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


90

Из моего недавнего вопроса я уже создал некоторую функцию 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;» Оператор в некоторой строке скрипта может активировать точку останова в скрипте динамической загрузки. Однако оба отладчика не отображают код в точке останова. Поэтому делать это бесполезно.

Благодаря,


Вы случайно нашли для этого решение? У меня такая же проблема.
adamJLev

Попробуйте загрузить отдельный файл динамически, то есть см. Здесь для реализации queryj.com/2011/03/11/a-lightweight-script-loader - я считаю, что отладчики справляются с этим намного легче.
Джеймс Вестгейт

@infinity, посмотри мое решение
Molecular Man

3
2014 год, а ваши изображения все еще мертвы. Можете ли вы восстановить их?
TheGeekZn

У меня есть аналогичный вопрос, но я не могу сказать, потому что изображения битые. Вы можете их обновить?
Эрик

Ответы:


118

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

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

//# sourceURL=dynamicScript.js

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

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

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


5
В случае, если у кого-то возникнут проблемы с MVC3 / Razor, не забудьте избегать символа @, поэтому что-то вроде // @@ sourceURL = Dynamicscript.js И, к сожалению, вышеуказанное также работает в firebug.
парш

1
Вы также можете использовать эту функцию для динамических встроенных javascripts. Но если у вас есть какое-то исключение в этом скрипте, вы не увидите его в списке источников.
Роман Снитко

4
Обратите внимание, что новый синтаксис: изменение «// # sourceURL = dynamicScript.js» с @ на #
Cekk,

3
обновленная ссылка на раздел инструментов разработчика Chrome на исходных картах: developer.chrome.com/devtools/docs/…
chrismarx

3
Для меня файл js отображался в списке источников в группе под названием «(без домена)». Стоит упомянуть, так как я сначала пропустил это!
JMac,

21

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


Все, что я могу найти, это: code.google.com/p/fbug/issues/detail?id=1259 . Кстати, я использую тег скрипта, добавляемый в заголовок, для динамической загрузки скриптов (но с использованием атрибута src), и добавленный таким образом код можно отладить для меня во всех браузерах, даже если он не загружается вместе с начальной страницей.
Joeri Sebrechts

Какой именно код вы используете для добавления тега скрипта? У меня та же проблема, что и с OP, из-за которой невозможно отлаживать динамически загружаемые файлы JS в Chrome. Спасибо!
adamJLev

var loaderNode = document.createElement («скрипт»); loaderNode.setAttribute («тип», «текст / javascript»); loaderNode.setAttribute ("источник", URL); document.getElementsByTagName ("голова") [0] .appendChild (loaderNode);
Joeri Sebrechts

18

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

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

Способ 1:

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

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

введите описание изображения здесь


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

введите описание изображения здесь


Способ 2:

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

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

отладка динамической загрузки JavaScript в chrome -1


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

отладка динамической загрузки JavaScript в chrome -1



Позор Google за то, что сделал это так глупо. 1 / Позор = Престижность (противоположность стыда) вам за то, что вы
вытащили

16

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

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

введите описание изображения здесь

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

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


Для разработки в Google Chrome вы должны вставить текст, который указывает имя текущего динамического скрипта, когда jQuery или любой другой скрипт загрузки добавляет скрипт в DOM, как я сообщил команде jQuery. Но у меня нет времени над этим работать. bugs.jquery.com/ticket/8292
Soul_Master

@Soul_Master, но по моему методу вставлять текст не нужно. Вы вставляете строку динамического скрипта, try{throw ''} catch(e){}затем включаете режим паузы при всех исключениях, и хром прекращает выполнение, когда выбрано исключение. Проверял много раз. Загрузил другое изображение. Там яснее то, о чем я говорю.
Molecular Man

В chrome вы можете использовать оператор «debugger;», чтобы прервать выполнение оператора, когда панель отладчика открыта. Chrome просто проигнорирует это, если панель отладчика закрыта.
dinesh ygv

@dineshygv, ты можешь ... сейчас. Но 3 года назад вы не смогли. debuggerв то время не работал в динамически создаваемом скрипте.
Molecular Man

10

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

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

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


Да. Я вижу это. Я уже давно сообщал об этой ошибке команде jQuery. bugs.jquery.com/ticket/8292
Soul_Master

1
Предупреждение! описанный метод вызывает ошибку в IE7, поэтому не оставляйте его //@ sourceURL=blahв производстве.
Джетро Ларсон

Вероятно, именно эта debuggerчасть вызывает проблемы, а не комментарий источника (который наверняка игнорируется JS)
Кайл Симпсон

Это может вызвать проблемы, например, с условной компиляцией. например: javascriptkit.com/javatutors/conditionalcompile.shtml
Джетро Ларсон,

5

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


2

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

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

chrome_debugger

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

Мне нужно изменить некоторый 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 не испорчен.

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

ура


1

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


Вы правы. Это не работает. Я пробовал это с eval (), и Firebug позволит вам установить точку останова, когда вы ее используете. Есть ли причина, по которой вы не можете использовать eval () и вам нужно установить тег скрипта? В более общем плане, есть ли причина, по которой вы не можете использовать этот динамический javascript как отдельный файл .js на своем сервере? Какую проблему ты пытаешься решить?
Мойше Леттвин

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

1

Браузер по-прежнему должен анализировать динамически загружаемый 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 (ничего не видно)

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

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


0

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

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


0

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


0

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

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

введите описание изображения здесь

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

введите описание изображения здесь

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

введите описание изображения здесь

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.