Вы здесь: Главная » JavaScript » Отладка JavaScript в Chrome DevTools

Отладка JavaScript в Chrome DevTools

При написании кода JavaScript вы наверняка будете сталкиваться с ошибками. Для поиска ошибок можно использовать console.log() , выводя в консоль значения каких-либо переменных. Иногда можно использовать для этой цели метод alert(), но очень скоро вы поймете, что в ряде случаев это может быть неудобно.

Вместо переключения между браузером и редактором кода вы можете использовать инструменты разработчика, которые есть в каждом современном браузере. В этой статье мы рассмотрим инструменты разработчика браузера Google Chrome, но аналогичные вы можете найти и в Mozilla Firefox, и в Opera, если они вам больше по душе.

Отладка кода (Debugging, или дебаггинг) в Chrome DevTools

Наверняка вы слышали, что ошибки называют багами. Так вот поиск и устранение ошибок - это дебаггинг, или по-русски отладка кода. Для этой процедуры нам и понадобятся инструменты разработчика в Google Chrome. Для того чтобы их протестировать, мы создадим простой html-файл с именем index.html и подключим к нему файл test.js, размещенный в папке js той же директории.

Подготовка файлов с HTML-разметкой и JavaScript-кодом

Разметка в html-файле будет содержать простую форму с несколькими radio-переключателями и кнопкой, которая будет применять выбранный цвет к тексту.

Код test.js тоже будет простым:

Обратите внимание, что в js-коде мы обрабатываем событие клика на кнопке. Обработчик события записан в html-коде, как атрибут элемента <button>. Поэтому при отладке мы будем отслеживать именно клик по кнопке.

Пример для тестов вы можете посмотреть и протестировать в новой вкладке.

Точки останова (брейкпойнты)

Вызвать Инструменты разработчика Chrome можно, открыв html-файл в браузере,  щелкнув меню в правом верхнем углу и выбрав в нем пункт  Дополнительные инструменты> Инструменты разработчика. Также  можно просто нажать F12 или Ctrl + Shift + I.

Инструменты разработчика в Chrome

Инструменты разработчика в Chrome

Можно также воспользоваться контекстным меню, выбрав по правому клику на любом из элементов пункт "Просмотреть код".

Просмотр кода в контекстном менюДумаю, что где находятся Инструменты разработчика в Chrome вы, скорей всего, знаете, т.к. при верстке любой html-страницы вы должны были ими пользоваться. Сейчас нас будет интересовать вкладка Sources (Источники). Слева в этой панели найдите папку js и кликните по имени файла test.js, чтобы отобразить его код.

Поставим первую точку останова (breakpoint) - это та часть/строка нашего кода, где мы хотим, чтобы выполнение было остановлено, чтобы мы могли проверить, что происходит в этот момент в браузере.

Все, что нужно сделать для этого - просто щелкнуть на нужном номере строки. Она при этом подсветится синим цветом в виде утолщенной стрелки.

Для нашего кода первым брейкпойнтом будет 3-я строка, в которой мы определяем value того переключателя, который отметил пользователь перед нажатием кнопки. Код в ней такой:

После клика на кнопке вы увидите, что браузер "поставил на паузу" выполнение вашего кода (надпись на полупрозрачном фоне "Paused in debugger") с двумя кнопками. В панели Sources на вкладке Local отобразится информация обо всех локальных переменных в нашей функции.

Добавляем и тестируем точку останова

Добавляем и тестируем точку останова

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

Обратите внимание на правую сторону вкладки Sources:

  • В разделе Call Stack были добавлены changeColor и onclick. CallStack содержит список функций, которые были вызваны для выполнения нашего кода до точки останова. Поскольку мы нажали кнопку, было вызвано событие onclick, которое, в свою очередь, вызвало функцию changeColor.
  • В раздел Scope был добавлен раздел Local, который определяет локальные переменную области видимости. В функции у нас есть output, radioColor и this. Ключевое слово this присутствует, поскольку мы запускаем JavaScript в браузере, и он ссылается на объект Window. Обратите внимание, что в этот момент во время выполнения переменные output и radioColor имеют значение undefined (не определены), так как мы еще не присвоили им значения.

Кнопки для управления переходом между строками кода

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

Кнопки отладки

- Первая кнопка со знаком паузы/воспроизведения Останов-запуск кода предназначена для возобновления выполнения кода. Нажатие на нее продолжит выполнение нашего сценария до конца, если у нас не будет другой точки останова. Если же точек останова 2 и более, клик по этой кнопке выполнит код до следующего брейкпойнта. Аналогичная кнопка есть вверху на полупрозрачном оверлее.

Останов-запуск кода

- Step Over  - кнопка с изогнутой стрелкой и точкой  выполняет текущую строку и останавливается на следующей строке. Т.е. вы как бы медленно проходите по строчкам кода.

step-over

При повторном нажатии кнопки Step Over мы будем видеть уже другие данные в блоке Scope > Local. Кроме того, рядом со строкой с переменной мы можем видеть ее значение.

Переход к выполнению кода после точки останова

Переход к выполнению кода после точки останова

- Step Into -  кнопка со стрелкой вниз и точкой внизу предназначена для перехода к следующему вызову функции. То есть, если в текущей строке вызывается определенная функция, вы перейдете в ее код. Например, если в коде присутствует код  var test = showInfo(), щелчок по кнопке "Step Into" переведет отладчик в функцию showInfo. Также клики по этой кнопке могут перевести выполнение скрипта на следующую строку.

step into
- Step Out (Выход) - кнопка со стрелкой вверх и точкой внизу предназначена для выхода из текущей функции. В приведенном выше примере с showInfo() щелчок по этой кнопке выведет нас из функции и вернет в место, где она была вызвана.

Вы также можете деактивировать/активировать заново точки останова соответствующей кнопкой.

Пример с пересчетом суммы товаров

Чтобы посмотреть на работу некоторых из этих кнопок разберем другой пример: мы удаляем товары из корзины в виде таблицы и пересчитываем сумму оставшихся товаров в отдельной функции.

HTML-разметка примера:

Код count-sum.js

Сам пример можно посмотреть здесь, а проверить работу точек останова лучше в новой вкладке.

С помощью Инструментов разработчика Chrome ставим точку останова на строку 4 с текстом if (confirm("Вы уверены?")) this.closest('tr').remove().

Переходим к функции

Сделаем клик по кнопке корзины, затем пару кликов по кнопке Step Into и после подтверждения действия в диалоговом окне confirm() попадем в код функции showPrice(). В зависимости от того, в какой функции мы находимся, справа мы видим разные переменные.

Функция showPrice()

Другой способ добавить точки останова

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

Однако в Chrome Dev Tools есть отличная функция для добавления точек останова на основе различных событий, которые происходят в браузере. Справа от инструментов разработчика, сразу после раздела точек останова, вы увидите категории для назначения точек останова.

Точки останова для слушателей событийВ нашем примере происходит обработка события клика, поэтому отмечаем в категории событий Mouse пункт click и получаем точку останова на той же строке.

Категория событий мыши

Второй вариант - добавить в нужное место в js-коде строку debugger; - и при клике по кнопке корзины вы получите "программную" точку останова в соответствующем месте.

debugger

Статьи о точках останова в Chrome DevTool на английском:

Отладка кода в Firefox и Opera

Для того чтобы отладить код в Opera, вам не придется привыкать к новому интерфейсу, т.к  с 2013 года Opera перешла на движок Webkit,  используемый в браузере Safari, Chromium и всех его производных: Google Chrome, «Яндекс.Браузер» и других, поэтому Инструменты разработчика в ней такие же, как и в Chrome. Разница только в маркировке точки красным, а не синим цветом.

Отладка кода во вкладке Source в Opera

В Mozilla Firefox кнопки выглядят несколько иначе, но все равно очень похоже.

Отладчик кода в FirefoxПоэтому, какой браузер вы бы не выбрали, процесс отладки будет примерно одинаковым.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *