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

Давайте отвлечёмся от написания кода и поговорим о его отладке.

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

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

Панель «Исходный код» («Sources»)

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

  • Работая в Chrome, откройте тестовую страницу.
  • Включите инструменты разработчика, нажав F12 (Mac: Cmd+Opt+I).
  • Щёлкните по панели sources («исходный код»).

При первом запуске получаем следующее:

Кнопка-переключатель  откроет вкладку со списком файлов.

Кликните на неё и выберите hello.js. Вот что появится:

Интерфейс состоит из трёх зон:

  1. В зоне Resources (Ресурсы) показаны файлы HTML, JavaScript, CSS, включая изображения, используемые на странице. Здесь также могут быть файлы различных расширений Chrome.
  2. Зона Source показывает исходный код.
  3. Наконец, зона Information and control (Сведения и контроль) отведена для отладки, вскоре мы к ней вернёмся.

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

Консоль

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

Результат выполнения инструкций сразу же отображается в консоли.

Например, результатом 1+2 будет 3, а инструкция hello("debugger") ничего не возвращает, так что получаем undefined:

Точки останова (breakpoints)

Давайте разберёмся, как работает код нашей тестовой страницы. В файле hello.js щёлкните по строчке номер 4. Да, щёлкайте именно по самой цифре, не по коду.

Ура! Вы поставили точку останова. А теперь щёлкните по цифре 8 на восьмой линии. Номер строки будет окрашен в синий цвет.

Вот что в итоге должно получиться:

Точка останова – это участок кода, где отладчик автоматически приостановит исполнение JavaScript.

Пока исполнение поставлено «на паузу», мы можем просмотреть текущие значения переменных, выполнить команды в консоли, одним словом, мы выполняем отладку кода.

В правой части графического интерфейса мы видим список точек останова. А когда таких точек выставлено много, да ещё и в разных файлах, этот список поможет эффективно ими управлять:

  • Быстро переместиться к любой точке останова в коде – нужно щёлкнуть по точке в правой части экрана.
  • Временно деактивировать точку – в общем списке снимите галочку напротив ненужной в данный момент точки.
  • Удалить точку – щёлкните по ней правой кнопкой мыши и выберите Remove (Удалить).
  • …и так далее.

Условные точки останова

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *