Как запустить отладку js

Copyright OpenJS Foundation and Node.js contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Отладка¶

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

Для отладки Node.js приложений при запуске главного скрипта необходимо указать команду inspect , которая запускает отдельный процесс для получения и обработки сигналов отладки.

node inspect app.js

По умолчанию процесс Node.js отладки запускается по адресу 127.0.0.1:9229 . Для задания других хоста и порта, используйте параметр —inspect в следующем формате.

node inspect --inspect=127.0.0.1:5000 app.js

Для запуска приложения в режиме отладки и установки точки останова на первой же строке, вместо параметра —inspect используйте —inspect-brk .

Отладка Node js через CLI¶

Теперь рассмотрим процесс Node.js отладки на примере.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

const express = require('express'), app = express(); const host = '127.0.0.1'; const port = 7000; app.get('/', (req, res) =>  let counter = 0; counter += 5; debugger; res.send('Node js inspector'); >); app.listen(port, host, () => console.log(`Server listens http://$host>:$port>`) );

После запуска приведенного примера командой inspect , отладчик остановится на первой строке и предложит ввести команду. Список возможных команд:

cont — продолжает выполнение скрипта;
next — следующее действие (переходит на следующую строку кода);
step — «входит» в исходный код текущего исполняемого выражения;
step — «входит» в исходный код текущего исполняемого выражения;
pause — ставит на паузу выполнение скрипта.

Отладка

После ввода команды cont приложение будет запущено.

Отладка

Теперь отладчик остановит выполнение скрипта при обращении к маршруту / на строке debugger ;.

Отладка

Чтобы узнать значения переменных в точке останова скрипта используйте в качестве команды функцию watch() , которой передается имя переменной, значение которой необходимо узнать.

Теперь чтобы вывести значение желаемой переменной используйте команду watchers , которая выводит значения всех выражений, которые были заданы функцией watch() .

Для удаления переменной из списка отслеживаемых выражений имеется функция unwatch() .

Отладка

Для запуска последней выполненной команды просто нажмите Enter.

Точка останова уже в процессе отладки может быть установлена с помощью функции setBreakpoint() , которая передается один, либо два аргумента. Если один — то указывается номер строки в текущем скрипте, на которой необходимо остановить его выполнение.

Отладка

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

Отладка Node js в Chrome¶

Процессу отладки назначается уникальный идентификатор ( UUID ), входящий в состав URL, по которому к нему можно обратиться через браузер Google Chrome. UUID будет выведен сразу после начала выполнения команды запуска приложения в режиме отладки.

Отладка

Перейдя по ссылке chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:9229/81ed051b-e1d0-4415-b473-5a5d543dd306 , где 81ed051b-e1d0-4415-b473-5a5d543dd306 это ваш UUID , можно осуществлять отладку Node.js приложения отладчиком Chrome.

После перехода по ссылке вы должны увидеть следующее.

Отладка

Если версия браузера Google Chrome 67 и выше, то в URL app_js.html необходимо заменить на inspector.html .

Отладка JavaScript программы в браузере. Инструменты Разработчика

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

В каждом современном браузере есть свои инструменты, и хотя они могут отличаться интерфейсом или некоторыми специфическими возможностями, основной функционал для отладки программы у них схожий. Поэтому понимание процесса отладки в рамках даже одного браузера позволит сформировать общее представление об отладке в других браузерах. Полную документацию по Инструментам Разработчика для браузера Firefox можно найти в документации MDN, а для браузера Chrome (на английском) в документации Chrome DevTools.

Поэтапный процесс отладки программы

Скачать архив с исходным кодом для его отладки можно по этой ссылке. В нём содержится несколько ошибок, которые нужно найти и исправить для корректной работы программы. После запуска страницы index.html в браузере (в этой статье для отладки программы будет использоваться Firefox), на ней отобразится заголовок “Страница с ошибкой в коде JavaScript”. Хотя при корректном выполнении кода, заголовок должен быть “Страница без ошибок. Спасибо!” и ниже должна появиться картинка.

Есть несколько способов открыть на странице Консоль Разработчика:

Клавиатура. Ctrl + Shift + I, кроме
- Internet Explorer. (клавиша — F12)
- Mac OS X. (сочетание клавиш — ⌘ + ⌥ + I )
В открывшейся Консоли есть набор вкладок, каждая из которых предоставляет определенный функционал. На начальном этапе достаточно иметь представление о следующих вкладках:
1. Первой является вкладка Инспектор (или Elements в браузере Chrome), где отображается разметка страницы и стили элементов справа. Эта панель имеет косвенное отношение к процессу отладки JavaScript, поэтому детально в этой статье разбираться не будет. Подробную информацию по ней лучше изучить в соответствующей документации.
2. Следующей вкладкой в Инструментах Разработчика является панель Консоль (или Console в браузере Chrome), которая отображает логи работы программы. Например, ошибки, предупреждения, и другую дополнительную информацию, которую генерирует программа JavaScript в ходе своего выполнения. А также эта панель позволяет непосредственно взаимодействовать с кодом JavaScript на странице. Все возникшие ошибки в JavaScript коде, выводятся в ней с указанием файла и конкретного места в нем, где произошла ошибка. Также консоль содержит ряд инструментов и настроек для фильтрации выводимых сообщений, очистки консоли и запрета очистки логов при перезагрузке страницы — Непрерывные логи. В текущем исходном коде используется метод console.log() , который выводит в консоль указанное в скобках сообщение. Таким образом, при корректной работе программы, в консоли должно быть выведено “Успешное начало программы”. Более полную информацию по методам консоли можно прочитать в соответствующей части документации MDN
3. Третьей вкладкой является панель Отладчик (или Sources в Chrome). Эта панель по сути представляет собой встроенную среду разработки кода, в которой можно получить доступ ко всем подключенным к странице файлам. Можно посмотреть их содержимое, отследить их выполнение, а в Chrome еще можно отредактировать код, скопировать его или сохранить изменения в новом файле. Также, для отладки кода в этой панели используются точки останова (брейкпоинты), которые позволяют приостановить выполнение кода на определенной строке. Поставить точку останова можно кликнув на номер соответствующей строки или написав в самом коде ключевое слово debugger; Управлять потоком выполнения программы после остановки на точке можно с помощью кнопок, расположенных справа в верхнем углу консоли. Которые позволяют возобновить выполнение ( F8 ), перешагнуть выполнение до следующей точки останова ( F10 ), зайти в функцию ( F11 ) или выйти из неё ( Shift F11 ). Крайняя кнопка, если её активировать, позволяет приостанавливаться на каждом непойманном исключении.
Воспроизведение и поиск ошибок

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

Далее начинается поиск ошибки, перейдя в панель “Консоль” можно увидеть выведенное там сообщение о возникшем в коде исключении.
```
ReferenceError: assignment to undeclared variable undeclaredVariable 
```
В этом сообщении еще содержится метка с информацией о файле и номере строки, которая привела к исключению main.js:8:1 . Кликнув на эту метку произойдет переход в этот файл на указанную строку в панели Отладчик.

В данном случае исключение указывает на то, что используемая переменная не была объявлена. Чтобы исправить это, надо заменить в файле main.js строку
```
undeclaredVariable = "Успешное начало программы"; 
```
```
let undeclaredVariable = "Успешное начало программы"; 
```
После сохранения файла и обновления страницы index.html в браузере, при этом в Консоли должно пропасть сообщение об исключении и вместо него отобразиться сообщение «Успешное начало программы» , которое выводится с помощью метода console.log(«Успешное начало программы»);

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

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

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

Как говорилось выше есть два способа поставить точку останова: кликнув по номере строки в отладчике или написав на нужной строке в коде ключевое слово debugger; .

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

При этом в правой части панели в блоке “Области” можно отслеживать значения переменных. В данном случае в переменной param содержится значение «Show» , хотя в этой функции, для изменения содержимого страницы, этот параметр должен начинаться с маленькой буквы. Поэтому, для корректной работы программы, нужно изменить входной параметр в вызове функции на «show»
```
buggy("show"); 
```
После сохранения файла main.js с указанными изменения и обновления страницы в браузере должно корректно измениться её содержимое. А корректный код программы в итоге должен выглядеть так:
```
"use strict"; let undeclaredVariable = "Успешное начало программы"; console.log(undeclaredVariable); function buggy(param)  if (param === "show")  document.getElementById("content").innerHTML = ' '; document.getElementById("header").innerHTML = "Страница без ошибок. Спасибо!"; > > buggy("show"); 
```
Дата изменения: February 26, 2023

Поделиться

Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!

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

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

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

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

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

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

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

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

Интерфейс состоит из трёх зон:
1. В зоне File Navigator (панель для навигации файлов) показаны файлы HTML, JavaScript, CSS, включая изображения, используемые на странице. Здесь также могут быть файлы различных расширений Chrome.
2. Зона Code Editor (редактор кода) показывает исходный код.
3. Наконец, зона JavaScript Debugging (панель отладки JavaScript) отведена для отладки, скоро мы к ней вернёмся.
Чтобы скрыть список ресурсов и освободить экранное место для исходного кода, щёлкните по тому же переключателю .

Консоль

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

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

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

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

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

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

Вот что в итоге должно получиться (синим это те места, по которым вы должны щёлкнуть):

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

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

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

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

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

Команда debugger

Выполнение кода можно также приостановить с помощью команды debugger прямо изнутри самого кода:
```
function hello(name) < let phrase = `Привет, $!`; debugger; //
```
Такая команда сработает только если открыты инструменты разработки, иначе браузер ее проигнорирует.

Остановимся и оглядимся

В нашем примере функция hello() вызывается во время загрузки страницы, поэтому для начала отладки (после того, как мы поставили точки останова) проще всего её перезагрузить. Нажмите F5 (Windows, Linux) или Cmd + R (Mac).

Выполнение прервётся на четвёртой строчке (где находится точка останова):

Чтобы понять, что происходит в коде, щёлкните по стрелочкам справа:
1. Watch – показывает текущие значения для любых выражений. Вы можете нажать на + и ввести выражение. Отладчик покажет его значение, автоматически пересчитывая его в процессе выполнения.
2. Call Stack – показывает цепочку вложенных вызовов. В текущий момент отладчик находится внутри вызова hello() , вызываемого скриптом в index.html (там нет функции, поэтому она называется “анонимной”). Если вы нажмёте на элемент стека (например, «anonymous»), отладчик перейдёт к соответствующему коду, и нам представляется возможность его проанализировать.
3. Scope показывает текущие переменные. Local показывает локальные переменные функций, а их значения подсвечены прямо в исходном коде. В Global перечисляются глобальные переменные (то есть вне каких-либо функций). Там также есть ключевое слово this , которое мы ещё не изучали, но скоро изучим.
Пошаговое выполнение скрипта

А теперь давайте пошагаем по нашему скрипту.

Для этого есть кнопки в верхней части правой панели. Давайте рассмотрим их.

– «Resume»: продолжить выполнение, быстрая клавиша F8 .

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

Вот, что мы увидим, кликнув на неё:

Выполнение кода возобновилось, дошло до другой точки останова внутри say() , и отладчик снова приостановил выполнение. Обратите внимание на пункт «Call stack» справа: в списке появился ещё один вызов. Сейчас мы внутри say() .

– «Step»: выполнить следующую команду, быстрая клавиша F9 .

Выполняет следующую инструкцию. Если мы нажмём на неё сейчас, появится alert .

Нажатие на эту кнопку снова и снова приведёт к пошаговому выполнению всех инструкций скрипта одного за другим.

– «Step over»: выполнить следующую команду, но не заходя внутрь функции, быстрая клавиша F10 .

Работает аналогично предыдущей команде «Step», но ведёт себя по-другому, если следующая инструкция является вызовом функции (имеется ввиду: не встроенная, как alert , а объявленная нами функция).

Если сравнить, то команда «Step» переходит во вложенный вызов функцию и приостанавливает выполнение в первой строке, в то время как «Step over» выполняет вызов вложенной функции незаметно для нас, пропуская её внутренний код.

Затем выполнение приостанавливается сразу после вызова функции.

Это хорошо, если нам не интересно видеть, что происходит внутри вызова функции.

– «Step into», быстрая клавиша F11 .

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

На будущее просто помните, что команда «Step» игнорирует асинхронные действия, такие как setTimeout (вызов функции по расписанию), которые выполняются позже. «Step into» входит в их код, ожидая их, если это необходимо. См. DevTools manual для получения более подробной информации.

– «Step out»: продолжить выполнение до завершения текущей функции, быстрая клавиша Shift + F11 .

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

– активировать/деактивировать все точки останова(breakpoints).

Эта кнопка не влияет на выполнение кода, она лишь позволяет массово включить/отключить точки останова.

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

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

Continue to here

Щелчок правой кнопкой мыши по строке кода открывает контекстное меню с отличной опцией под названием «Continue to here» («продолжить до этого места»).

Это удобно, когда мы хотим перейти на несколько шагов вперёд к строке, но лень устанавливать точку останова (breakpoint).

Логирование

Чтобы вывести что-то на консоль из нашего кода, существует функция console.log .

Например, это выводит в консоль значения от 0 до 4 :
Похожие публикации: