Как отлаживать динамически загружаемый JavaScript (с помощью jQuery) в самом отладчике браузера?

92

Динамически добавляемый сценарий не отображается в разделе сценариев отладчика браузера.

Пояснение:

Мне нужно использовать и использовал

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

так что myScript.js может быть динамически загружен при выполнении некоторого условия ... А myFunction может быть вызван только после загрузки всего скрипта ...

Но браузеры не отображают динамически загружаемый файл myScript.js в разделе сценария отладчика.

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

TwiToiT
источник
2
используйте debugger;для автоматической остановки в динамически загружаемом скрипте, см. javascript.info/debugging-chrome
yu yang Jian

Ответы:

208

Вы можете дать своему динамически загружаемому скрипту имя, чтобы оно отображалось в отладчике JavaScript в Chrome / Firefox. Для этого вы помещаете комментарий в конец скрипта:

//# sourceURL=filename.js

Затем этот файл будет отображаться на вкладке «Источники» как filename.js. По моему опыту, вы можете использовать \ в названии, но я получаю странное поведение при использовании \.

Для получения дополнительной информации см .: Точки останова в динамическом JavaScript : прекращение поддержки // @ sourceurl

отметка
источник
19
Обратите внимание, что он изменен на // #, хотя // @ по-прежнему работает в Chrome. Сценарии в файлах .html также могут иметь такие же имена. Быть осторожен! Не оставляйте пробелов до и после знака «=».
Мерт Мертс, 02
11
Для меня файл js отображался в списке источников в группе под названием «(без домена)». Стоит упомянуть, так как я сначала пропустил это!
JMac,
7
Просто совет. Отладчик Chrome помещает эти файлы псевдо-javascript в элемент узла «(без домена)» на вкладке «Источники», по крайней мере, при отладке на локальном хосте. Вот где я их нашел.
Роберт Ошлер
1
Еще одна вещь, о которой следует опасаться, - это стиль комментариев. В этой ссылке "отказ от / / @ sourceURL" упоминаются как "// # sourceURL =", так и "/ * # sourceURL =". Это потому, что это также можно использовать для CSS, где вы должны использовать блочные комментарии, поскольку однострочные комментарии «//» недействительны. Что меня удивило, так это то, что вы не можете использовать "/ * sourceURL =" в javascript. Его просто игнорируют.
Jools
2
Afaik, большинство минификаторов JavaScript удаляют эти строки со стадий производства, что делает их бесполезными для диагностики производственных ошибок.
Lluís Suñol
16

Вы можете использовать //# sourceURL=и //# sourceMappingURL=в конце файла сценария или тега сценария.

ПРИМЕЧАНИЕ: //@ sourceURL и //@ sourceMappingURLустарели.

xRavisher
источник
Дополнительная информация об устаревании: developers.google.com/web/updates/2013/06/…
Pysis,
Конечно, но большинство минификаторов удаляют эти линии на стадии производства.
Lluís Suñol
13

Я попытался использовать «// # sourceURL = filename.js», который был предложен OP в качестве обходного пути, но он все еще не отображался для меня на панели «Источники», если он еще не существовал на моих вкладках с прошлого раза, когда это вызвало исключение.

Кодирование «отладчика»; линия вынудила его сломаться в этом месте. Затем, когда он оказался на моих вкладках на панели «Источники», я мог установить точки останова как обычно и удалить «отладчик»; линия.

Кевинпо
источник
6
Он также может отображаться в списке (без домена) на вкладке «Источники».
Splaktar
1
Мне также нужно было использовать debugger;, и DevTools должен был быть открыт во время загрузки скрипта.
Barmar
2
немного дополнительной информации: используйте browsertools: // в качестве протокола, как в //# sourceURL=browsertools://yourdomaingoeshere.com/action-openuwws.js
dolbysurnd
6

Обратите внимание, что исходный файл, отображаемый на вкладке источников таким образом, появится в группе (без домена), и, если вы хотите отладить его, вам нужно будет добавить debugger;строку в свой код, чтобы эта строка была выполнена (обычно в начало выполнения исходного файла), а затем добавьте точки останова, где захотите.

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

Луис Суньоль
источник
2
Это меня спасло! Что бы я ни делал, файл не отображался, пока я не ввел команду отладчика. После этого он сохранялся при перезагрузке страницы и сеансах отладки даже после того, как я удалил команду отладчика.
Майк Девенни 06
0

Пытаясь отследить подобные вещи в IE, я открываю инструменты разработчика (F12), а затем нахожу, где разместить точку останова, используя следующую строку в консоли:

debugger;myFunction();

Это переключится на вкладку отладчика, где вы можете войти myFunction()и установить точку останова.

Алан Самет
источник