Отладка JavaScript с помощью Visual Studio Code и DevTools от Google Chrome

Development, Java | Amber | Комментировать запись

Отладка и устранение неполадок – важный навык, поскольку он позволяет разработчику эффективно и вовремя исправлять ошибки. При отладке JavaScript вне интегрированной среды (IDE) даже опытным разработчикам не всегда очевидно, какие инструменты нужно использовать.

В этом мануале мы рассмотрим отладку JavaScript с помощью Google Chrome DevTools, а также с помощью популярного текстового редактора Visual Studio Code (VS Code).

Требования

• ​​Последняя версия Google Chrome на вашем компьютере.
• Последняя версия Visual Studio Code на вашем компьютере.
• Локальная установка Node.js (у нас есть мануалы для macOS, CentOS 8, Ubuntu 20.04, Debian 10).

Примеры, которые мы рассмотрим в этом мануале, вы можете выполнить на одном из ваших проектов JavaScript, которые можно запустить на сервере Node. Если у вас нет такого проекта, создайте тестовое приложение.

1: Создание тестового приложения (опционально)

Если у вас нет проекта JavaScript, с которым вы могли бы работать в ходе выполнения этого мануала, вы можете создать тестовый проект Quick Chat.

С помощью Git клонируйте этот репозиторий. Также можно загрузить zip-файл и разархивировать его содержимое.

Примечание: Если вам нужно установить Git, читайте мануал Разработка проектов с открытым исходным кодом: начало работы с Git.

Для этого руководства мы будем использовать код из part-8. Для начала рекомендуем ознакомиться с кодом, чтобы понять, как работает это приложение.

Перейдите в каталог проекта, а затем в каталог part-8:

cd Design-and-Build-a-Chat-Application-with-Socket.io
cd part-8

Установите пакеты npm для этого проекта:

npm install

Запустите сервер:

npm start

Если вы зайдете в Chrome и посетите 127.0.0.1:3000, вы увидите запрос имени пользователя. Когда вы введете имя и нажмете кнопку «Chat!», вы будете перенаправлены в приложение чата и увидите следующее сообщение:

User joined the chat...

Если ввести текст в поле ввода внизу окна и нажать кнопку «Send», ваши сообщения отобразятся в окне чата.

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

Внесение ошибки в код

Теперь мы намеренно внесем небольшую ошибку, из-за которой нам больше не удастся зарегистрировать пользователя после входа.

Откройте part-8/public/app.js в текстовом редакторе и найдите строку 96:

//set the username and create logged in message
username = usernameInput.value;

Замените ее следующей строкой:

//set the username and create logged in message
username = usernameInput.text; // added bug

Обновите вкладку браузера. Войдите в чат, после чего вы увидите:

undefined joined the chat...

Приложение неправильно регистрирует имя пользователя, ссылаясь на usernameInput.text вместо usernameInput.value. Мы будем использовать эту ошибку, чтобы попрактиковаться в отладке приложения.

2: Основы отладки

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

После срабатывания точки останова обычно есть следующие варианты:

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

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

Теперь, когда вы знаете основы процедуры отладки, вы можете приступить к отладке своего приложения.

3: Отладка в Google Chrome

Чтобы начать отладку в Chrome, добавьте в приложение оператор debugger.

Если вы работаете с тестовым приложением, которое мы создали в разделе 1, вы можете добавить оператор в обработчик события клика loginBtn:

loginBtn.addEventListener('click', e => {
debugger; // added debugger
e.preventDefault();
if (!usernameInput.value) {
return console.log('Must supply a username');
}
//set the username and create logged in message
username = usernameInput.text; // added bug
sendMessage({ author: username, type: messageTypes.LOGIN });
//show chat window and hide login
loginWindow.classList.add('hidden');
chatWindow.classList.remove('hidden');
});

При достижении этого оператора ваше приложение будет приостановлено, а инструменты отладки будут активированы автоматически. Вы заметите, что приложение будет неактивным – это означает, что оно было остановлено. Вы также увидите, что в Chrome DevTools появилась вкладка Sources.

Давайте теперь подробно разберемся с тем, что мы видим на экране.

Вкладка Sources

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

Chrome дает вам возможность просматривать этот код не просто так: теперь вы можете устанавливать в нем точки останова. Точка останова – это преднамеренная остановка или пауза в программе.

Чтобы добавить точку останова, кликните на пустое пространство слева от номеров строк. При этом обратите внимание, что Chrome добавляет каждую точку останова в список внизу.

Вкладка Scope

Во вкладке Scope у вас есть возможность проверить переменные в приложении. Здесь вы найдете раздел Local (локальная область действия функции, в которой находится точка останова), раздел Global (глобальная область) и Script (в нем вы можете просмотреть переменные в рамках текущего скрипта).

На этот этап отладки уйдет значительная часть времени. Это гораздо эффективнее, чем записывать множество операторов console.log().

Вкладка Watch

В дополнение к просмотру переменных во вкладке Scope вы также можете определить конкретные переменные, которые вы хотите изучить. Добавляя переменную во вкладку Watch, при каждом попадании в точку останова вы можете быстро найти ее значение (которое может быть undefined в зависимости от того, в какой части кода вы находитесь).

Используйте кнопку + и введите имя переменной, которую вы хотите отслеживать.

Если вы тоже работаете с тестовым приложением, вы можете использовать:

usernameInput

Стек вызовов и список точек останова

Последние разделы позволят вам просмотреть список точек останова, стек вызовов и т.д.

Если вы работаете с тестовым приложением, стек вызовов будет содержать функцию обработчика событий для кнопки входа (loginBtn.addEventListener.e). Она указана, потому что это единственная вызываемая на данный момент функция. По мере вызова других функций эта цепочка будет обновляться соответствующим образом.

Также обратите внимание на кнопки со стрелками в верхней части отладчика.

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

Вы можете установить различные виды точек останова. Давайте посмотрим, как создать условную точку останова, которая срабатывает только при выполнении определенного условия. Кликните правой кнопкой мыши по пустому пространству и выберите Add conditional breakpoint…

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

usernameInput.text === ''

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

Обратите внимание: множество доступных параметров точки останова здесь не рассматриваются.

4: Отладка в VS Code

Как вы уже видели, Chrome DevTools предлагает отличные возможности и большое количество функций для отладки приложения. Однако Visual Studio Code предоставляет аналогичные функции отладки, но более плавно интегрированные в вашу среду.

Чтобы начать отладку в VS Code, установите расширение Debugger for Chrome.

Давайте быстро взглянем на вкладку отладки на боковой панели (по умолчанию она находится в левой части редактора). Откройте вкладку отладки, нажав на значок, на котором изображен жук.

Открыв эту панель, вы увидите инструменты, аналогичные тем, что мы уже видели в Chrome: переменные, Watch, стек вызовов и точки останова.

Большинство функций, которые вы получаете в Chrome DevTools, доступны и здесь, в VS Code.

Теперь, когда вы увидели вкладку Debug, создайте конфигурацию запуска, которая сообщит VS Code, как отлаживать ваше приложение. VS Code хранит конфигурации отладки в файле launch.json в папке .vscode.

Чтобы VS Code создал этот файл, вы можете нажать на ссылку, указанную в панели, в сообщении To customize Run and Debug create a launch.json file. Вы также можете сделать это через меню: выберите Run → Add Configuration… → Chrome.

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

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

Если вы работаете с тестовым приложением, вам следует изменить порт с 8080 на 3000.

Наше тестовое приложение обслуживается из public каталога, и вам следует обновить webRoot, чтобы отразить это.

Для отладки тестового приложения файл launch.json должен иметь такой вид:

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/public"
}
] }

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

Определив конфигурацию, вы можете начать сеанс отладки, нажав зеленую кнопку воспроизведения в верхней части панели. Вы также можете использовать меню (Run → Start Debugging) и горячие клавиши.

Ваше приложение появится в окне Chrome.

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

Подключив отладку, вы можете установить точку останова в коде, как делали это в Chrome. Кликните на пустое место рядом с номером строки.

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

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

Далее вся функциональность, которую мы обсуждали в разделе, посвященном Chrome, полностью отображается в VS Code. Если вы хотите добавить условную точку останова, щелкните правой кнопкой мыши на пустое пространство и выберите Add Conditional Breakpoint… и укажите условие. Если вы хотите отслеживать переменную, нужно добавить новую переменную и ввести имя переменной, которую нужно отслеживать. Если вы хотите изучить переменные, перейдите во вкладку Variables.

Заключение

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

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