Установка брейкпоинтов во встроенном 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.

Полезные материалы

1. Отладка JavaScript | Инструменты разработчика | Chrome для разработчиков — главенствующая официальная документация по использованию точек останова в JavaScript.
2. Инструменты разработчика Chrome — самый полный справочник по Инструментам разработчика от Google.
3. Flavio Copes — Практическое руководство по отладке JavaScript с применением Инструментов разработчика.
4. Отладка JavaScript – Инструменты разработчика Chrome 101 – YouTube — Видеоурок для наглядного освоения процесса отладки.
5. Овладеваем Инструментами разработчика Chrome – всеобъемлющее руководство — детальный обзор продвинутых возможностей для эффективного использования Инструментов разработчика.