Отладка скриптов в браузере Chrome

Отладка скриптов в браузере Chrome

Здравствуйте! В продолжении темы обработки ошибок в JavaScript  поговорим об отладке скриптов силами браузера. Для примера возьмем самый лучший браузер на Земле —  Chrome.

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

отладка скриптов в браузере Chrome

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

Запустите браузер Chrome.

Нажмите F12, при этом запустятся  Инструменты разработчика.

Перейдите на вкладку Source

Вкладка Sources в браузере Chrome

Здесь можно выделить 3 зоны:

  1. Область исходных файлов.  В ней находятся все файлы проекта
  2. Область текста.  В этой области находятся текст файла
  3. Область  информации и контроля.  О ней разговор пойдет позже

Как правило при отладке область исходных файлов не нужна, поэтому ее можно скрыть кнопкой.

Общие кнопки управления

кнопки панели source

3 наиболее часто используемые кнопки управления:

Формат
Эта кнопка позволяет отформатировать код. Может вам понадобиться, если вы желаете отформатировать чужой код.
Консоль
Очень важная кнопка по нажатию на которой открывается консоль. В консоли можно вводить различные команды и операторы на JavaScript.
Окно
В случае с большим участком кода позволяет  открыть код  в отдельном окне.

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

Рассмотрим на примере файла pow.js.  Если клацнуть на любой строке этого файла, то на этой строке будет задана точка останова.

Выглядеть это  примерно так:

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

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

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

Информация о точке останова появляется  на вкладке Breakpoints.

Читайте также  Переопределение функций в JavaScript

Вкладка Breakpoints очень полезна, когда код  очень большой, она позволяет:

  • Быстро перейти на то место кода, где поставлен брейкпойнт  простым кликом на текст.
  • Временно отключить  точку останова  кликом на чекбокс.
  • Быстро удалить точку останова правым кликом на текст и выбором Remove.
Некоторые дополнительные возможности
  • Точку останова  можно инициировать и напрямую из а скрипта, командой debugger:
    function pow(x, n) {
      ...
      debugger; // <-- отладчик остановится тут
      ...
    }
  • Правый клик на номере строки pow.js позволит вам  создать так называемую  условную точку останова (conditional breakpoint), т.е. задать условие, при котором точка останова сработает.

 

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

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

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

Обратите внимание на информационные вкладки:

  • Watch Expressions –  здесь можно увидеть текущее значение переменных , которые вы отслеживаете в скрипте.
  • Call Stack –  показывает стек вызовов — это все вызовы приведшие к этой строке кода.
  • Scope Variables –  показывает переменные. Причем  показывает как глобальные так и локальные переменные.

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

А теперь  давайте  «погоняем » скрипт и  отследим  его работу.  Обратите внимание  на панель сверху там находятся 6 кнопок работу которых мы и рассмотрим.

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

Выполнить один шаг скрипта не заходя при этом внутрь функции.

– сделать шаг внутрь функции,  клавиша F11.
Выполняет один шаг скрипта и при этом заходит внутрь функции.
– выполнять до выхода из текущей функции, клавиша Shift+F11.
Читайте также  Приведение типов javascript.

выполняет полностью код, находящийся в функции.

– отключить/включить все точки останова.
Эта кнопка просто отключает и при повторном нажатии включает все точки останова.
– включить/отключить автоматическую остановку при ошибке.
Данная кнопка весьма полезна при отладке и позволяет  включать и отключать автоматическую остановку при ошибке.

Сам процесс отладки заключается в  пошаговом прохождении программы и в наблюдении за значениями переменных.

Консоль браузера

При отладке кода скрипта бывает полезным перейти на вкладку  Console и посмотреть нет ли там ошибок также можно выводить информацию в консоль с помощью  console.log().

Например:

// результат будет виден в консоли
for (var i = 0; i < 6; i++) {
  console.log("значение", i);
}

Консоль доступна в любом браузере

Ошибки в консоли

Ошибки JavaScript скриптов можно посмотреть в консоли.

ошибки в консоли браузера

В консоли вы можете увидеть:

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

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

Итого

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

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

В инструментах разработчика есть и другие вкладки  как Elements позволяет смотреть HTML-код страницы, Timeline показывает сколько файлов загружает браузер и сколько времени у него на это уходит. Но нам пока эт вкладки не очень интересны.

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

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