Отладка Chrome JavaScript - как сохранить точки останова между обновлением страницы или с помощью кода?

Question

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

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

В качестве альтернативы, есть лиКстати, в моем коде JavaScript я могу напечатать что-нибудь, чтобы Chrome начал трассировку (приостановить на строке)?

Answer 1

Можно поставить

debugger;

, чтобы сломаться в большинстве сред JavaScript. Они будут сохраняться наверняка. Хорошо, если вы используете миниатор, который избавляет от вызовов debugger и console.log для производственной среды.

В последних версиях браузера Chrome есть опция «Сохранить журнал» в верхней части панели консоли, рядом с фильтрами. В более старых версиях, щелкнув правой кнопкой мыши на пустом окне консоли, вы получите эту опцию («Сохранить журнал при навигации»). Это удобно, когда у вас нет операторов console.log или жестко запрограммированных вызовов отладчика.

обновление: я нашел на github инструмент под названием chimney , который берет файл и удаляет все вызовы console.log. это дает хорошее представление о том, как удалить вызовы отладчика.

Answer 2

Установите точки останова, переключитесь на вкладку Сеть и выберите кнопку Сохранить журнал при навигации .Теперь точки останова должны быть при обновлении.

Или JavaScript должен использовать

debugger;

Answer 3

Кроме того, отправляете ли вы свои файлы JavaScript с сервера клиенту с прикрепленным параметром запроса к URL с текущим временем Epoch ? Это используется для предотвращения кэширования файлов JavaScript.

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

Для меня удаление параметра запроса заставило CDT сохранять точки останова после обновления.

Answer 4

Это, вероятно, происходит со сценариями, которые вы динамически загружаете или анализируете из других сценариев?Я могу сказать для себя, что этот сценарий действительно раздражал меня, пока я не обнаружил свойство sourceURL.Поместив следующий специально отформатированный комментарий в последнюю строку скрипта, который вы хотите отладить, он «закрепит» его в Chrome, чтобы у него была ссылка на него:

// # sourceURL = filename.js

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

Answer 5

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

Answer 6

Для людей, использующих ExtJs 6.x:
вместо disableCaching в Ext.Loader, вы можете добавить "cache" или "disableCacheBuster" параметр запроса к страницеURL.Это удалит параметр «_dc» из файла и позволит отладчику chrome сохранить точку останова.

См. Bootstrap.js в вашем приложении (параметр конфигурации disableCaching).

Answer 7

Инструменты разработчика Chrome должны вести себя так, как вы ожидаете, но вы можете поместить операторы debugger; в свой код (для разработчиков!), Чтобы приостановить выполнение.

Answer 8

Вы можете использовать оператор debugger; в своем источнике, чтобы отладчик сломался там.