Можно ли отладить динамическую загрузку JavaScript каким-либо отладчиком, например WebKit, FireBug или IE8 Developer Tool?

Из моего недавнего вопроса я уже создал некоторую функцию JavaScript для динамической загрузки частичного представления. Итак, я не могу отлаживать JavaScript с динамической загрузкой. Потому что весь загруженный JavaScript будет оцениваться функцией eval.

Однако я нашел способ создать новый JavaScript, используя следующий скрипт для динамического создания скрипта в заголовке текущего документа. Все загруженные скрипты будут отображаться в HTML DOM (вы можете использовать любой отладчик, чтобы найти его).

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

Кстати, большинство отладчиков (панель инструментов разработчика IE8, Firebug и Google Chrome) не могут установить точку останова в любом динамическом скрипте. Потому что отлаживаемый сценарий должен загружаться в первый раз после загрузки страницы.

У вас есть идея для отладки динамического содержимого скрипта или файла?

Обновление 1 - добавить исходный код для тестирования

Вы можете использовать следующий файл xhtml для попытки отладки значения someVariable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

Из ответа я просто тестирую его в FireBug. Результат должен отображаться как на изображениях ниже.

альтернативный текст http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSbugtugtq/

Пожалуйста, посмотрите на скрипт dynamicLoadingScript, который добавляется после загрузки страницы.

альтернативный текст http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5cfugbugcriptable.cUDhqm

Но его нет на вкладке скриптов FireBug.

Обновление 2 - создание точки останова отладки в скрипте динамической загрузки

альтернативный текст http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAugApngoSh0JoWa.ua

альтернативный текст http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAUXl3QazeozrCABo7gerpNVQc1

Оба изображения выше показывают вставку «debugger;» Оператор в некоторой строке скрипта может активировать точку останова в скрипте динамической загрузки. Однако оба отладчика не отображают код в точке останова. Поэтому делать это бесполезно.

Благодаря,

Также можно было бы использовать хром для того же самого. В Chrome есть функция, в которой вы можете указать атрибут парсера и сделать так, чтобы фрагмент динамического JS отображался в виде файла, который затем можно было просмотреть и установить точки останова.

атрибут, который необходимо установить,

//# sourceURL=dynamicScript.js

где dynamicScript.js - это имя файла, который должен отображаться в браузере файлов сценария.

Больше информации здесь

Пол Айриш также кратко рассказывает об этом в своем превосходном выступлении на Tooling & The Webapp Development Stack.

Попробуйте добавить «отладчик»; в javascript, который вы добавляете динамически. Это должно привести к остановке на этой строке независимо от настроек точки останова.

Да, (сейчас) можно отлаживать динамически загружаемый JavaScript с помощью Google Chrome!

Нет необходимости добавлять дополнительный debugger;или какой-либо другой атрибут для динамически загружаемого файла JS. Просто выполните следующие шаги для отладки:

Способ 1:

Мой технический руководитель только что показал супер-простой способ отладки динамически загружаемых методов Javascript.

1. Откройте консоль хрома, напишите название метода и нажмите Enter.
   В моем случае это GetAdvancedSearchConditonRowNew
   если метод JS загружен, тогда он покажет определение метода.

2. Нажмите на определение метода, и весь JS-файл откроется для отладки :)

Способ 2:

Например, я загружаю файл JS, когда нажимаю кнопку с помощью ajaxcall.

1. Открыть networkвкладку в инструментах разработчика google chrome
2. Щелкните элемент управления (например, кнопку), который загружает некоторый файл javascript и вызывает некоторую функцию javascript.
3. наблюдайте за вкладкой сети и ищите эту JS-функцию (в моем случае это так RetrieveAllTags?_=1451974716935)
4. Наведите указатель мыши на него, initiaterи вы найдете свой динамически загружаемый JS-файл (с префиксом VM*).

5. Щелкните этот VM*файл, чтобы открыть.
6. Поместите отладчик куда хотите в этот файл: D

Для этого я использую Google Chrome.

В Chrome на вкладке скриптов вы можете включить паузу при всех исключениях

А затем поместите где-нибудь в строке кода try{throw ''} catch(e){}. Chrome остановит выполнение, когда достигнет этой строки.

РЕДАКТИРОВАТЬ: измененное изображение, чтобы было понятнее, о чем я говорю.

Я думаю, вам может потребоваться дать коду eval'd такое «имя»:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

Если вы это сделаете, я думаю, что debuggerподход из "обновления 2" тогда должен работать.

ОБНОВЛЕНИЕ : синтаксис для sourceUrl был изменен (@ заменен на #), чтобы избежать ошибок в неподдерживаемых браузерах (читайте: IE). Детали

Использование Chrome (12.0.742.112) с кодом, который вы предоставили, плюс оператор отладчика, подобный этому

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

работает на меня.

Мне нужно изменить некоторый JavaScript (ограничивая область действия всего селектора jQuery текущим частичным> представлением div) перед его выполнением.

Может быть, это будет более ощутимым, если вы привяжете изменение селектора к событию в частичном представлении вместо создания элементов скрипта в теле html (это не кажется правильным).

Вы могли бы сделать что-то вроде этого

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

Этот код всегда будет добавлять ограничивающий селектор ко всем операциям выбора jQuery, выполняемым, когда мышь находится в определенном элементе, учитывая, что HTML не испорчен.

(Все еще кажется хакерским, может быть, у кого-то есть лучшее решение)

ура

В Firebug вы должны увидеть этот скрипт после загрузки страницы и внедрения скрипта. Когда вы это сделаете, вы можете установить точку останова в соответствующем месте, и она будет сохранена при обновлении страницы.

Браузер по-прежнему должен анализировать динамически загружаемый Javascript, где находится отладчик WebKit или FireBug, поэтому он зависит от отладчика независимо от того, что, я думаю, это то же самое для инструментов разработчика в IE8,

Таким образом, ваш код зависит от отладчика, поэтому проблема, возникающая у вас, не будет в этом файле или тексте, если это не ошибка

Другая вещь script.text = "alert('Test!');";недействительна, поэтому она не будет работать во всех браузерах, что вы хотите, этоscript.innerHTML = "alert('Test!');";

несмотря на то, что его innerHTML означает код внутри тегов HTML, а не HTML внутри, просто большинство людей используют его для этого, поэтому он неправильно объясняется

ИЗМЕНИТЬ ДЛЯ ОБНОВЛЕНИЯ ДВА

И во втором обновлении с использованием Chrome я сделал это

перейти к about: blank Откройте консоль вверх и зайдите в

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

тогда он сломается и откроет вкладку скрипта с показом about: blank (ничего не видно)

Затем с правой стороны покажите список стека вызовов, затем щелкните вторую (анонимную функцию), и она покажет вам.

Итак, в вашем файле у вас будет (анонимная функция), код, который вы запускаете, и вы увидите там точку останова. так что вы знаете, что ваш в правильном.

Используя Google Chrome (или Safari ) Developers Tool, вы можете запускать JavaScript построчно. Сценарии

инструмента разработчика. Выберите сценарий, который вы хотите отладить, знак паузы справа. Или установите точки останова, щелкнув номер строки.>>>

Один из вариантов, который мне нравится использовать, - это добавить в свой код оператор console.log (''). Как только этот оператор появляется в консоли, с ним связывается номер строки. Вы можете щелкнуть этот номер, чтобы перейти к месту в источнике и установить точку останова. Недостатком этого подхода является то, что точки останова не сохраняются при перезагрузке страницы, и вам нужно выполнить код, прежде чем вы сможете добавить отладчик.

Для текущего браузера Google Chrome или других современных браузеров вы можете легко найти любой оцененный код с помощью инструмента разработчика, такого как следующие изображения.

1. Смоделируйте какой-нибудь файл с динамической загрузкой.

2. Нажмите Ctrl + Shift + F на вкладке источника и найдите указанную выше функцию.

Создайте точку останова и выполните функцию, чтобы проверить ее.