Сборка от 17 марта 2017 г

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

Консоль

При отладке, кроме просмотра переменных и передвижения по скрипту, бывает полезно запускать команды JavaScript. Для этого нужна консоль.

В неё можно перейти, нажав кнопку «Console» вверху‑справа, а можно и открыть в дополнение к отладчику, нажав на кнопку или клавишей ESC .

Самая любимая команда разработчиков: console.log(...) .

Она пишет переданные ей аргументы в консоль, например:

// результат будет виден в консоли for (var i = 0; i < 5; i++) {

console.log("значение", i);
}

Полную информацию по специальным командам консоли вы можете получить на странице Chrome Console API ^ и Chrome CommandLine API ^. Почти все команды также действуют в Firebug (отладчик для браузера Firefox).

Консоль поддерживают все браузеры, и, хотя IE10‑ поддерживает далеко не все функции, но console.log работает везде. Используйте его для вывода отладочной информации по ходу работы скрипта.

Ошибки

Ошибки JavaScript выводятся в консоли.

Например, прервите отладку – для этого достаточно закрыть инструменты разработчика – и откройте страницу с ошибкой. Перейдите во вкладку Console инструментов разработчика ( Ctrl+Shift+J / Cmd+Shift+J ).


В консоли вы увидите что‑то подобное:

Красная строка – это сообщение об ошибке.

Если кликнуть на ссылке pow.js в консоли, справа в строке с ошибкой, то мы перейдём непосредственно к месту в скрипте, где возникла ошибка. Однако почему она возникла?

Более подробно прояснить произошедшее нам поможет отладчик. Он может «заморозить» выполнение скрипта на момент ошибки и дать нам возможность посмотреть значения переменных и стека на тот момент.
Для этого:

1. 
   Перейдите на вкладку Sources.
   
2. 
   Включите останов при ошибке, кликнув на кнопку
   
3. 
   Перезагрузите страницу.
   

После перезагрузки страницы JavaScript‑код запустится снова и отладчик остановит выполнение на строке с ошибкой:

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

Итого

Отладчик позволяет:

• 
  Останавливаться на отмеченном месте (breakpoint) или по команде debugger .
  
• 
  Выполнять код – по одной строке или до определённого места.
  
• 
  Смотреть переменные, выполнять команды в консоли и т.п.
  

В этой главе кратко описаны возможности отладчика Google Chrome, относящиеся именно к работе с кодом.

Пока что это всё, что нам надо, но, конечно, инструменты разработчика умеют много чего ещё. В частности, вкладка Elements – позволяет работать со страницей (понадобится позже), Timeline – смотреть, что именно делает браузер и сколько это у него занимает и т.п.

Осваивать можно двумя путями:

1. 
   Официальная документация ^ (на англ.)
   
2. 
   Кликать в разных местах и смотреть, что получается. Не забывать о клике правой кнопкой мыши.
   

Мы ещё вернёмся к отладчику позже, когда будем работать с HTML.