Перевод статьи «How to set up the debugger for Chrome extension in Visual Studio Code».
Отладка веб-приложений с помощью Visual Studio Code повышает эффективность вашей работы. Она помогает сэкономить много времени и поддерживать чистоту кода. А все потому, что вам не приходится писать целую кучу console.log и вы можете просматривать выполнение вашего кода построчно. Но раз вы уже здесь, вы, вероятно, и так знаете о преимуществах отладки веб-приложений. Итак, начнем…
Разбираемся в настройках
Для начала вам нужно установить расширение Debugger for Chrome. (Для этого откройте VS Code, нажмите Ctrl+P, вставьте в открывшейся строке команду ext install msjsdiag.debugger-for-chrome и нажмите enter). После установки отладчик можно начинать использовать практически сразу.
Но вы можете настраивать поведение отладчика для каждого своего проекта (поэтому для дальнейших действий следует сразу открыть папку нужного проекта).
Далее вам нужно создать файл запуска для Visual Studio Code Debugger. Этот файл будет содержать различные настройки отладчика для выбранного проекта.
Для создания файла запуска нужно перейти в раздел отладки в панели действий (Activity Bar ) и кликнуть на значок шестеренки.
Вам будет предложен список вариантов, из которых нужно выбрать «Chrome».
После этого в папке вашего проекта появится директория .vscode с файлом launch.json. Этот файл также откроется в вашем VS Code; в нем мы и будем указывать настройки конфигурации.
Конфигурация
Есть два вида конфигурации отладчика: launch и attach. Устанавливаются они в опции request. Выбирать нужный вид можно для каждого отдельного объекта конфигурации.
Launch
Конфигурация Launch предполагает запуск отдельного экземпляра Chrome, в котором выполняется указанный файл или URL.
Если вы указываете URL, вам нужно указать директорию, файлы которой обслуживаются, в опции webRoot. Это можно сделать путем указания абсолютного пути или с использованием преобразователя ${workspaceFolder} (он указывает на папку, открытую в вашем рабочем пространстве Visual Studio Code).
Примечание: будьте осторожны при указании webRoot, поскольку эта опция используется, чтобы резолвить URL к файлам на вашем компьютере.
В примере вы можете видеть два варианта конфигурации launch: один предполагает запуск локального сервера, а другой – отдельного файла.
[javascript]
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "Open a specific file",
"file": "${workspaceFolder}/index.html"
}
]
}[/javascript]
Если у вас уже есть запущенный экземпляр Chrome, то экземпляр, запускаемый отладчиком, будет использовать временную сессию. То есть, у вас не будет ваших расширений или открытых вкладок. Если вы хотите, чтобы отладчик запустил экземпляр Chrome с вашими пользовательскими настройками и расширениями, вам сначала нужно закрыть все открытые экземпляры Chrome.
Примечание: когда вы остановите отладчик, окно Chrome закроется.
Attach
Лично я предпочитаю этот вариант. Эта конфигурация присоединяет отладчик к запущенному экземпляру Chrome. Но чтобы этот вариант работал, вам нужно запустить Chrome с включенной опцией удаленной отладки. Как это сделать, зависит от вашей операционной системы.
Windows
Есть два способа запустить Chrome с удаленной отладкой в Windows. Самый простой – кликнуть правой кнопкой мыши по ярлыку Google Chrome. Затем нужно выбрать нужную опцию в свойствах и добавить следующую команду в поле target.
--remote-debugging-port=9222
Примечание: таким образом Chrome с возможностью удаленной отладки будет запускаться каждый раз, как вы кликнете по ярлыку.
Другой способ – открыть командную строку и выполнить в ней следующую команду (заменив при этом <chrome_path> на настоящее местоположение установки вашего Chrome):
<chrome_path>\chrome.exe --remote-debugging-port=9222
macOS
Откройте терминал и выполните следующую команду:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Linux
Откройте терминал и выполните следующую команду:
google-chrome --remote-debugging-port=9222
Указанные команды (во всех трех вариантах) открывают Chrome с дополнительной опцией, которая указывает порт для удаленной отладки – 9222. Узнать больше по этой теме можно здесь.
Примечание: если у вас запущены другие экземпляры Chrome с удаленной отладкой, позаботьтесь о том чтобы закрыть их, прежде чем запускать новый экземпляр.
Вот пример конфигурации attach:
[javascript]
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
]
}
[/javascript]
Примечание: если вы не установите опцию «url», вам будет предложен список из ваших открытых вкладок.
Это расширение имеет множество очень полезных опций, которые вы можете использовать для подгонки конфигурации отладчика для вашего проекта. Документацию некоторых из них можно почитать здесь.
Заключение
Поздравляем! Вы научились устанавливать и настраивать отладчик для Chrome в Visual Studio Code. Также вы научились запускать Google Chrome с включенной возможностью удаленной отладки. Теперь пора исследовать это расширение и углубить свои знания. Я настоятельно советую изучить репозиторий этого расширения.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]