Подробный гайд по отладке кода на JavaScript в Chrome Devtools. Отладка и тестирование JavaScript в приложениях HTML5
Здравствуйте! В продолжении темы поговорим об отладке скриптов силами браузера. Для примера возьмем самый лучший браузер на Земле — Chrome.
В принципе такие инструменты есть в любом браузере, а если учесть, что большая часть браузеров работает на одном движке, что и Chrome, то тут в принципе не будет особых различий. Также еще очень хорош Firefox со своим инструментом Firebug.
Запустите браузер Chrome.
Нажмите F12, при этом запустятся Инструменты разработчика.
Перейдите на вкладку Source
![](https://i2.wp.com/webdiz.com.ua/wp-content/uploads/2018/06/chrome_sources.png)
Здесь можно выделить 3 зоны:
Как правило при отладке область исходных файлов не нужна, поэтому ее можно скрыть кнопкой.
Общие кнопки управления![](https://i0.wp.com/webdiz.com.ua/wp-content/uploads/2018/06/chrome_sources_buttons.png)
3 наиболее часто используемые кнопки управления:
Формат Эта кнопка позволяет отформатировать код. Может вам понадобиться, если вы желаете отформатировать чужой код. Консоль Очень важная кнопка по нажатию на которой открывается консоль. В консоли можно вводить различные команды и операторы на JavaScript. Окно В случае с большим участком кода позволяет открыть код в отдельном окне. Точки остановаРассмотрим на примере файла pow.js. Если клацнуть на любой строке этого файла, то на этой строке будет задана точка останова.
Выглядеть это примерно так:
![](https://i1.wp.com/webdiz.com.ua/wp-content/uploads/2018/06/chrome_sources_breakpoint.png)
Еще точку останова называют брейкпойнт это больше жаргонизм, который ассимилировался в нашем языке и дословно тоже означает точка прерывания.
В коде, где вы сделали точку останова можно смотреть значения переменных на каждом шаге, в общем всячески его отслеживать.
Информация о точке останова появляется на вкладке Breakpoints.
Вкладка Breakpoints очень полезна, когда код очень большой, она позволяет:
- Быстро перейти на то место кода, где поставлен брейкпойнт простым кликом на текст.
- Временно отключить точку останова кликом на чекбокс.
- Быстро удалить точку останова правым кликом на текст и выбором Remove.
Некоторые дополнительные возможности
- Точку останова можно инициировать и напрямую из а скрипта, командой debugger:
function pow(x, n) {
...
debugger; //