Перед тем, как двигаться дальше, поговорим об отладке скриптов.
Все современные браузеры поддерживают для этого «инструменты разработчика». Исправление ошибок с их помощью намного проще и быстрее.
На текущий момент самые многофункциональные инструменты – в браузере Chrome. Также очень хорош Firebug (для Firefox).
Общий вид панели Sources
В вашей версии Chrome панель может выглядеть несколько по-иному, но что где находится, должно быть понятно.
Зайдите на страницу с примером браузером Chrome.
Откройте инструменты разработчика: F12 или в меню Инструменты > Инструменты Разработчика .
Выберите сверху Sources .
Общие кнопки управления
Точки останова
Открыли файл pow. js во вкладке Sources? Кликните на 6-й строке файла pow. js. прямо на цифре 6.
Поздравляю! Вы поставили точку останова или, как чаще говорят, «брейкпойнт».
Выглядеть это должно примерно так:
Слово Брейкпойнт (breakpoint) – часто используемый английский жаргонизм. Это то место в коде, где отладчик будет автоматически останавливать выполнение JavaScript, как только оно до него дойдёт.
В остановленном коде можно посмотреть текущие значения переменных, выполнять команды и т. п. в общем – отлаживать его.
- Быстро перейти на место кода, где стоит брейкпойнт кликом на текст.
- Временно выключить брейкпойнт кликом на чекбокс.
- Быстро удалить брейкпойнт правым кликом на текст и выбором Remove, и так далее.
Дополнительные возможности
Остановку можно инициировать и напрямую из кода скрипта, командой debugger :
Правый клик на номер строки pow. js позволит создать условную точку останова (conditional breakpoint), т. е. задать условие, при котором точка останова сработает.
Остановиться и осмотреться
Обратите внимание на информационные вкладки справа (отмечены стрелками).
В них мы можем посмотреть текущее состояние:
Watch Expressions – показывает текущие значения любых выражений.
Можно раскрыть эту вкладку, нажать мышью + на ней и ввести любое выражение. Отладчик будет отображать его значение на текущий момент, автоматически перевычисляя его при проходе по коду.
Call Stack – стек вызовов, все вложенные вызовы, которые привели к текущему месту кода.
На текущий момент видно, отладчик находится в функции pow (pow. js, строка 6), вызванной из анонимного кода (index. html, строка 15).
Scope Variables – переменные.
На текущий момент строка 6 ещё не выполнилась, поэтому result равен undefined .
В Local показываются переменные функции: объявленные через var и параметры. Вы также можете там видеть ключевое слово this. если вы не знаете, что это такое – ничего страшного, мы это обсудим позже, в следующих главах учебника.
В Global – глобальные переменные и функции.
Управление выполнением
Пришло время, как говорят, «погонять» скрипт и «оттрейсить» (от англ. trace – отслеживать) его работу.
Обратим внимание на панель управления справа-сверху, в ней есть 6 кнопок:
– продолжить выполнение, горячая клавиша F8 .
Продолжает выполнения скрипта с текущего момента в обычном режиме. Если скрипт не встретит новых точек останова, то в отладчик управление больше не вернётся.
Нажмите на эту кнопку.
Скрипт продолжится, далее, в 6-й строке находится рекурсивный вызов функции pow. т. е. управление перейдёт в неё опять (с другими аргументами) и сработает точка останова, вновь включая отладчик.
При этом вы увидите, что выполнение стоит на той же строке, но в Call Stack появился новый вызов.
Походите по стеку вверх-вниз – вы увидите, что действительно аргументы разные.
– сделать шаг, не заходя внутрь функции, горячая клавиша F10 .
Выполняет одну команду скрипта. Если в ней есть вызов функции – то отладчик обходит его стороной, т. е. не переходит на код внутри.
Эта кнопка очень удобна, если в текущей строке вызывается функция JS-фреймворка или какая-то другая, которая нас ну совсем не интересует. Тогда выполнение продолжится дальше, без захода в эту функцию, что нам и нужно.
Обратим внимание, в данном случае эта кнопка при нажатии всё-таки перейдёт внутрь вложенного вызова pow. так как внутри pow находится брейкпойнт, а на включённых брейкпойнтах отладчик останавливается всегда.
– сделать шаг, горячая клавиша F11 .
Выполняет одну команду скрипта и переходит к следующей. Если есть вложенный вызов, то заходит внутрь функции.
Эта кнопка позволяет подробнейшим образом пройтись по очереди по командам скрипта.
– выполнять до выхода из текущей функции, горячая клавиша Shift + F11 .
Выполняет команды до завершения текущей функции.
Эта кнопка очень удобна в случае, если мы нечаянно вошли во вложенный вызов, который нам не интересен – чтобы быстро из него выйти.
– отключить/включить все точки останова.
Эта кнопка никак не двигает нас по коду, она позволяет временно отключить все точки останова в файле.
– включить/отключить автоматическую остановку при ошибке.
Эта кнопка – одна из самых важных.
Нажмите её несколько раз. В старых версиях Chrome у неё три режима – нужен фиолетовый, в новых – два, тогда достаточно синего.
Когда она включена, то при ошибке в коде он автоматически остановится и мы сможем посмотреть в отладчике текущие значения переменных, при желании выполнить команды и выяснить, как так получилось.
Процесс отладки заключается в том, что мы останавливаем скрипт, смотрим, что с переменными, переходим дальше и ищем, где поведение отклоняется от правильного.
Continue to here
Правый клик на номер строки открывает контекстное меню, в котором можно запустить выполнение кода до неё (Continue to here). Это удобно, когда хочется сразу прыгнуть вперёд и breakpoint неохота ставить.
Консоль
При отладке, кроме просмотра переменных и передвижения по скрипту, бывает полезно запускать команды JavaScript. Для этого нужна консоль.
В неё можно перейти, нажав кнопку «Console» вверху-справа, а можно и открыть в дополнение к отладчику, нажав на кнопку или клавишей ESC .