Установка брейкпоинтов во встроенном JS в Chrome
Быстрый ответ
Для приостановки выполнения встроенного JavaScript необходимо открыть инструменты разработчика Chrome (комбинация клавиш Ctrl
+Shift
+I
или Cmd
+Option
+I
). Затем перейдите на вкладку "Источники", а в панели обзора найдите нужный HTML-файл. Выберите строчку скрипта, требующую отладки, и кликните по её номеру – это и будет точкой останова. Таким образом, выполнение кода остановится в выбранном месте, и у вас будет возможность осмотреть переменные и проследить ход выполнения скрипта.
<script>
// Обозначьте точку останова и спокойно отправляйтесь за кофе!
debugger;
alert('Точки останова: кофеин для отладки JavaScript!');
</script>
Если в вашем скрипте использована команда debugger;
, исполнение кода остановится при условии, что инструменты разработчика Chrome открыты.
Игры с парсером: отладка встроенного кода
Именуем скрипты
Очевидно, вы не захотите называть код по именам бывших, однако придание имен встроенным скриптам улучшает процесс отладки. Используйте конструкцию //# sourceURL=somename.js
:
//# sourceURL=friendlyscript.js
document.getElementById('element').onclick = function(){ debugger; /* Время отладки! */ };
Скрипт friendlyscript.js
станет видимым на вкладке "Источники", что значительно облегчит его отладку.
Используем инструменты разработчика: отказываемся от console.log
Попытка отладки с помощью console.log
может быть неэффективной. Вместо этого воспользуйтесь разнообразными инструментами отладки Chrome: устанавливайте условные точки останова, меняйте переменные "на лету" и оценивайте выражения в процессе выполнения скрипта.
Внимательность – залог успеха: случаи введения в заблуждение отладчиком
Даже инструменты разработчика Chrome могут иногда подвести, став неотзывчивыми или ведя себя неожиданно. В таких случаях попробуйте обновить страницу. Если это не помогает, рассмотрите возможность временного отключения обработчиков событий на элементах, чтобы избежать неожиданных ситуаций во время отладки.
Визуализация
Представьте, что ваш встроенный JavaScript — это лазерный лабиринт, который вы хотите безопасно пройти.
Вашей целью является определенный лазерный луч:
// 💎 символизирует строчку кода, которую требуется отладить
document.addEventListener('click', function() { debugger; /* 💎 */ });
В качестве защиты используйте ключевое слово debugger;
:
Примените свой щит (`debugger;`) в момент, когда 💎 луч будет пересечён.
Еще остается открыть инструменты разработчика Chrome:
**Точка останова установлена!**
Теперь перед вами 💎 (строка JS) в мире возможностей, которые открывают перед вами инструменты разработчика Chrome.
Охота в глубинах: изучаем мир инструментов разработчика
В инструментах разработчика ваша стартовая точка — вкладка "Источники". Нажатие на значок "Показать обозреватель" позволит вам войти в каталог файлов, аналогично IDE, где установить точку останова можно двойным кликом по номеру строки.
Расшифровываем "атлантические коды": Минифицированный или запутанный код
Если вы затерялись в минимизированных или "замусоренных" встроенных скриптах, кнопка {}
в нижнем левом углу вкладки "Источники" придет вам на помощь. Кликните по ней, чтобы отформатировать скрипт, сделав его более читабельным и упорядоченным.
Успешность пропорциональна высоте: продвинутые точки останова
Использование условных точек останова, которые активируются при выполнении определенных условий, точек останова DOM при изменениях в DOM, а также точек останова сетевых запросов для XHR/Fetch делают вашу отладку еще более эффективной благодаря разнообразию доступных средств в инструментах разработчика Chrome.
Полезные материалы
- Отладка JavaScript | Инструменты разработчика | Chrome для разработчиков — главенствующая официальная документация по использованию точек останова в JavaScript.
- Инструменты разработчика Chrome — самый полный справочник по Инструментам разработчика от Google.
- Flavio Copes — Практическое руководство по отладке JavaScript с применением Инструментов разработчика.
- Отладка JavaScript – Инструменты разработчика Chrome 101 – YouTube — Видеоурок для наглядного освоения процесса отладки.
- Овладеваем Инструментами разработчика Chrome – всеобъемлющее руководство — детальный обзор продвинутых возможностей для эффективного использования Инструментов разработчика.