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

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

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

нажимаем
(Windows, Linux) или
(Mac).

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

Обратите внимание на информационные вкладки справа (отмечены стрелками). В них мы можем посмотреть текущее состояние:

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

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

2. Call Stack – стек вызовов, все вложенные вызовы, которые привели к текущему месту кода.

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

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

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

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

В Global – глобальные переменные и функции.

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

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

– продолжить выполнение, горячая клавиша F8 .

Продолжает выполнения скрипта с текущего момента в обычном режиме. Если скрипт не встретит новых точек останова, то в отладчик управление больше не вернётся.
Нажмите на эту кнопку.

Скрипт продолжится, далее, в 6‑й строке находится рекурсивный вызов функции pow , т.е. управление перейдёт в неё опять (с другими аргументами) и сработает точка останова, вновь включая отладчик.

При этом вы увидите, что выполнение стоит на той же строке, но в Call Stack появился новый вызов. Походите по стеку вверх‑вниз – вы увидите, что действительно аргументы разные.

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

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

Эта кнопка очень удобна, если в текущей строке вызывается функция JS‑фреймворка или какая‑то другая, которая нас ну совсем не интересует. Тогда выполнение продолжится дальше, без захода в эту функцию, что нам и нужно.

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

– сделать шаг, горячая клавиша F11 .

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

– выполнять до выхода из текущей функции, горячая клавиша Shift+F11 .

Выполняет команды до завершения текущей функции.

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

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

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

– включить/отключить автоматическую останова при ошибке.

Эта кнопка – одна из самых важных.

Нажмите её несколько раз. В старых версиях Chrome у неё три режима – нужен фиолетовый, в новых – два, тогда достаточно синего.

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