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

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

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

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

Ответ 1

Вы можете поместить

debugger;

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

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

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

Ответ 2

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

Или способ JavaScript использовать

debugger;

Ответ 3

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

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

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

Ответ 4

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

//# sourceURL = filename.js

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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