Из моего недавнего вопроса я уже создал некоторую функцию 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. Результат должен отображаться как на изображениях ниже.
Пожалуйста, посмотрите на скрипт dynamicLoadingScript, который добавляется после загрузки страницы.
Но его нет на вкладке скриптов FireBug.
Обновление 2 - создание точки останова отладки в скрипте динамической загрузки
Оба изображения выше показывают вставку «debugger;» Оператор в некоторой строке скрипта может активировать точку останова в скрипте динамической загрузки. Однако оба отладчика не отображают код в точке останова. Поэтому делать это бесполезно.
Благодаря,
источник
Ответы:
Также можно было бы использовать хром для того же самого. В Chrome есть функция, в которой вы можете указать атрибут парсера и сделать так, чтобы фрагмент динамического JS отображался в виде файла, который затем можно было просмотреть и установить точки останова.
атрибут, который необходимо установить,
//# sourceURL=dynamicScript.jsгде dynamicScript.js - это имя файла, который должен отображаться в браузере файлов сценария.
Больше информации здесь
Пол Айриш также кратко рассказывает об этом в своем превосходном выступлении на Tooling & The Webapp Development Stack.
источник
Попробуйте добавить «отладчик»; в javascript, который вы добавляете динамически. Это должно привести к остановке на этой строке независимо от настроек точки останова.
источник
Да, (сейчас) можно отлаживать динамически загружаемый JavaScript с помощью Google Chrome!
Нет необходимости добавлять дополнительный
debugger;или какой-либо другой атрибут для динамически загружаемого файла JS. Просто выполните следующие шаги для отладки:Способ 1:
Мой технический руководитель только что показал супер-простой способ отладки динамически загружаемых методов Javascript.
В моем случае это
GetAdvancedSearchConditonRowNewесли метод JS загружен, тогда он покажет определение метода.
Способ 2:
Например, я загружаю файл JS, когда нажимаю кнопку с помощью
ajaxcall.networkвкладку в инструментах разработчика google chromeRetrieveAllTags?_=1451974716935)initiaterи вы найдете свой динамически загружаемый JS-файл (с префиксомVM*).VM*файл, чтобы открыть.источник
Для этого я использую Google Chrome.
В Chrome на вкладке скриптов вы можете включить паузу при всех исключениях
А затем поместите где-нибудь в строке кода
try{throw ''} catch(e){}. Chrome остановит выполнение, когда достигнет этой строки.РЕДАКТИРОВАТЬ: измененное изображение, чтобы было понятнее, о чем я говорю.
источник
try{throw ''} catch(e){}затем включаете режим паузы при всех исключениях, и хром прекращает выполнение, когда выбрано исключение. Проверял много раз. Загрузил другое изображение. Там яснее то, о чем я говорю.debuggerв то время не работал в динамически создаваемом скрипте.Я думаю, вам может потребоваться дать коду eval'd такое «имя»:
http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/
Если вы это сделаете, я думаю, что
debuggerподход из "обновления 2" тогда должен работать.источник
//@ sourceURL=blahв производстве.debuggerчасть вызывает проблемы, а не комментарий источника (который наверняка игнорируется JS)ОБНОВЛЕНИЕ : синтаксис для sourceUrl был изменен (@ заменен на #), чтобы избежать ошибок в неподдерживаемых браузерах (читайте: IE). Детали
источник
Использование Chrome (12.0.742.112) с кодом, который вы предоставили, плюс оператор отладчика, подобный этому
script.text = "debugger;var someVariable = 0;\n" + "someVariable = window.outerWidth;\n" + "alert(someVariable);";работает на меня.
Может быть, это будет более ощутимым, если вы привяжете изменение селектора к событию в частичном представлении вместо создания элементов скрипта в теле 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 или других современных браузеров вы можете легко найти любой оцененный код с помощью инструмента разработчика, такого как следующие изображения.
Создайте точку останова и выполните функцию, чтобы проверить ее.
источник