Отладка в браузере Chrome

Перед тем, как двигаться дальше, поговорим об отладке скриптов.

Все современные браузеры поддерживают для этого «инструменты разработчика». Исправление ошибок с их помощью намного проще и быстрее.

На текущий момент самые многофункциональные инструменты — в браузере Chrome. Также очень хорош Firebug (для Firefox).

Общий вид панели Sources

Зайдите на страницу tutorial/debugging/pow/index.html браузером Chrome.

Откройте инструменты разработчика: F12 или в меню Инструменты > Инструменты Разработчика.

Выберите сверху Sources:

Кнопки, которые мы будем использовать:

1. Раскрывает список скриптов и стилей, подключенных к странице.
2. Включает-выключает консоль (ESC).
3. Двойное нажатие на эту кнопку заставляет отладчик останавливаться на ошибках JavaScript (кнопка поменяет цвет на фиолетовый).
4. Код можно отлаживать в отформатированном виде, если включить эту кнопку.
5. Панель управления потоком исполнения в режиме отладки. Нам она скоро понадобится.

Точки остановки

Зашли на страницу? Раскройте список скриптов, нажав на кнопку 1, и выберите pow.js. Кликните на 6й строке, прямо на цифре 6.

Поздравляю! Вы поставили свой первый «брейкпойнт».

Слово Брейкпойнт (breakpoint) — часто используемый английский жаргонизм. В русскоязычных пособиях используется термин «точка остановки». Это то место в коде, где отладчик будет останавливать выполнение JavaScript, как только оно до него дойдет.

В остановленном коде можно посмотреть любые переменные, выполнить команды и т.п.

Справа-снизу находится вкладка Breakpoints, в ней можно:

• Просматривать точки остановки.
• Выключать их кликом на чекбокс.
• При клике на точку остановки происходит переход на соответствующее место кода (удобно, когда их много).

Остановиться и осмотреться

Наша функция выполняется сразу при загрузке страницы, так что самый простой способ активировать JavaScript — перезагрузить ее. Итак, нажимаем F5.

Если вы сделали все, как описано выше, то выполнение прервется как раз на 6й строке.

Обратите внимание на информационные вкладки справа (отмечены стрелками).

В них мы можем посмотреть текущее состояние:

1. Watch Expressions — показывает текущие значения любых выражений.

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

2. Call Stack — вложенные вызовы (иначе называют «стек вызовов»).

   На текущий момент видно, отладчик находится в функции pow (pow.js, строка 6), вызванной из анонимного кода (index.html, строка 13).

3. Scope Variables — переменные.

   На текущий момент строка 6 еще не выполнилась, поэтому result равен undefined.

   В Local показываются переменные функции: объявленные через var и параметры. Вы также можете там видеть переменную this, она создается автоматически. Если вы не знаете, что она означает — ничего страшного, мы это обсудим в главе Контекст this в деталях.

   В Global — глобальные переменные, которые находятся вне функций.

Управление выполнением

Пришло время погонять скрипт и «оттрейсить» (от англ. trace, отслеживать) его работу.

Обратим внимание на панель управления в ней есть 4 основные кнопки:

 — продолжить выполнение (F8).

Если скрипт не встретит новых точек остановки, то на этом работа в отладчике закончится.

Нажмите на эту кнопку.

Вы увидите, что отладчик остался на той же строке, но в Call Stack появился новый вызов. Это произошло потому, что в 6й строке находится рекурсивный вызов функции pow, т.е. управление перешло в нее опять, но с другими аргументами.

Походите по стеку вверх-вниз — вы увидите, что действительно аргументы разные.

 — сделать шаг, не заходя внутрь функции (F10).

Выполняет одну строку скрипта. Если в ней есть вызов функции — то отладчик обходит его стороной, т.е. не переходит на код внутри.

Нажмите на эту кнопку.

Отладчик перейдет на строку 7. Все правильно, хотя есть и тонкость.

Дело в том, что во вложенном вызове pow есть брейкпойнт, а на включенных брейкпойнтах отладчик останавливается всегда. Даже если вложенный вызов и нажата эта кнопка.

…Но в данном случае вложенный вызов будет с n=1, поэтому сработает if и до строки 6 управление не дойдет. Поэтому и остановки нет.

 — сделать шаг (F11).

Переходит на следующую строку кода. Если есть вложенный вызов, то внутрь функции.

 — выполнять до выхода из текущей функции (Shift + F11).

Как только текущая функция завершилась, отладчик тут же останавливает скрипт.

Удобно в случае, если мы нечаянно вошли во вложенный вызов, который нам совсем не интересен — чтобы быстро из него выйти.

 — отключить/включить все точки остановки.

Эта кнопка никак не двигает нас по коду, она позволяет временно отключить все точки остановки в файле.

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

Консоль

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

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

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

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

Полную информацию по специальным командам консоли вы можете получить на страницеhttp://firebug.ru/commandline.html. Эти команды также действуют в Firebug (отладчик для браузера Firefox).

Консоль поддерживают все браузеры, но IE<10 поддерживает не все функции. Логирование работает везде, пользуйтесь им вместо alert.

Ошибки

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

Например, откройте страницу tutorial/debugging/pow-error/index.html. Предыдущую отладку можно прекратить (очистить брейкпойнты  и затем продолжить ).

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

Да, действительно, это потому что в этом скрипте есть ошибка. Но в чем же дело? Давайте посмотрим, какие были значения переменных на момент отладки. Для этого заставим отладчик остановиться при ошибке, нажав два раза на  (до фиолетового цвета).

Кстати, чтобы увидеть эту кнопку, нужно быть именно во вкладке Sources, не в Console.

Теперь перезагрузите страницу. Отладчик остановится на строке с ошибкой:

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

В данном случае-то все просто: опечатка в имени переменной y вместо x. Этот тип ошибки называетсяReferenceError.

Итого

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

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

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

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

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

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