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

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

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

На текущий момент самые многофункциональные инструменты – в браузере 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 .

ошибка скрипта что это и как исправить

c как скрипт

как в html скрипт

This entry was posted in Как проверить скрипт and tagged , , , . Bookmark the <a href="http://iprowebber.ru/otladka-v-brauzere-chrome/" title="Permalink to Отладка в браузере Chrome" rel="bookmark">permalink</a>.

Comments are closed.