Запуск JavaScript-отладчика в браузере Google Chrome

Быстрый ответ

Для активации отладчика JavaScript в Google Chrome воспользуйтесь сочетанием клавиш Ctrl + Shift + J на Windows/Linux или Cmd + Option + J на macOS, которое откроет Инструменты разработчика. Зайдите на вкладку «Источники», где расположены инструменты для отладки. Помимо этого, вы можете внести в свой код JavaScript команду debugger;, что создаст точку останова и приостановит выполнение кода при достижении этой строчки.

Основы отладки

Включение инструментов отладки

Для работы с точками останова, также как и для детального просмотра процесса выполнения кода и проверки значений переменных, откройте вкладку «Источники» в Инструментах разработчика.

console.log('Привет, мир!');
// Вставляем команду с отладкой
debugger;
console.log('Этот блок кода отработает только после того, как работа отладчика будет продолжена');

Отладка в реальном времени без вмешательства в код

Вы можете ставить точки останова прямо в строчках кода через Инструменты разработчика Chrome, либо воспользоваться контекстным меню, кликнув правой кнопкой мыши на нужной строке, и выбрав «Добавить точку останова». Также доступны условные точки останова, которые позволяют приостановить код, если соблюдается определённое условие.

Диагностическая консоль

Цель консоли — вывод сообщений, ошибок и предупреждений во время работы кода. Здесь можно протестировать переменные и функции, а также выполнять код непосредственно в контексте страницы.

Решение сложных вопросов в отладке

Если отладчик игнорирует установленные вами точки останова, проверьте, не работаете ли вы в режиме Инкогнито и не отключены ли расширения. Обратите внимание на соответствие настроек исходных карт при использовании языков, компилируемых в JavaScript, например, TypeScript.

Визуализация

Пример визуализации активации отладчика JavaScript в Google Chrome:

1. Открываем Google Chrome: 🌐
2. Ищем проблемный скрипт: 🧭
3. Активируем Инструменты разработчика: 🛠️ (нажимаем `F12` или `Ctrl+Shift+I`)
4. Переходим в раздел "Источники": 📁
5. Ставим точку останова: 💥 (щёлкаем на номере строки)
6. При необходимости обновляем страницу: 🔄

Подготовка завершена ...🚀

До этого: код работал неуправляемо 🌪️💻
Теперь: отладка включена, мы готовы следовать заданному курсу! 🚀🛰️
Вы можете шаг за шагом пройтись по коду и найти все проблемные места! 🕵️‍♂️🔍

Альтернативные способы доступа к инструментам отладки

К инструментам разработчика можно также обратиться через меню «Ещё инструменты > Инструменты разработчика» (три точки в правом верхнем углу браузера), а также через контекстное меню при нажатию правой кнопки мыши на элементе страницы и выборе «Исследовать».

Отладка не только для выявления ошибок

Используйте Инструменты разработчика не только для поиска и локализации ошибок, но также для оптимизации быстродействия и анализа порядка выполнения кода. Раздел «Сеть» позволит наблюдать за XHR и Fetch-запросами, а детальный анализ загрузки страницы и использования памяти поможет определить проблемные участки приложения.

Дополнительные советы по отладке

Наблюдение и контроль за переменными

Использование выражений для наблюдения поможет отслеживать изменение значений переменных в реальном времени.

// Рассматриваем изменение значения х
var x = 10;
console.log('Начальное значение x =', x); // выводит "Начальное значение x = 10"
x *= 2;
console.log('После умножения x =', x); // выводит "После умножения x = 20"
// Примечание: x тенденциозно увеличивается!

Навигация по стеку вызовов

Стек вызовов позволяет проследить последовательность вызова функций как бы делая путешествие в прошлое кода.

Отслеживание действий пользователя

Помощью точек останова на слушателях событий можно определить, как действия пользователя влияют на поведение кода.

Перехват сетевых запросов

Для остановки выполнения кода при сетевых запросах используйте точки останова XHR/fetch.

Отслеживание асинхронного кода

С помощью асинхронного стека вызовов можно проследить порядок выполнения промисов и асинхронного кода, избегая «ада callback'ов».

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

1. Инструменты разработчика Chrome | Chrome для разработчиков — подробное руководство по использованию Инструментов разработчика Chrome.
2. Google I/O 2011: Инструменты разработчика Chrome Reloaded – YouTube — общее руководство по освоению Инструментов разработчика Chrome в видеоформате.
3. Быстрая и продуктивная отладка JavaScript в Chrome DevTools — обзор отладки JavaScript в Chrome DevTools на Medium.
4. GitHub – ChromeDevTools/devtools-frontend: Фронтенд Инструментов разработчика Chrome — официальный репозиторий фронтенда Инструментов разработчика Chrome на GitHub.