Отладка веб-приложений с помощью Visual Studio Code значительно повышает эффективность работы, помогает сэкономить много времени и сохранить чистоту кода. Приступим!
Начало установки
Для начала установите расширение Debugger for Chrome. Затем создайте файл запуска для отладчика Visual Studio Code. Этот файл содержит различные конфигурации отладчика для проекта.
Создать файл запуска можно, перейдя в раздел debug в Activity Bar и щелкнув на значок шестеренки.
В списке опций будет предложено выбрать «Chrome».
После этого появится директория .vscode с файлом launch.json.
Конфигурации
Есть два типа конфигураций отладки Chrome: launch и attach. Их можно установить в опции request внутри каждого объекта конфигурации.
Launch
Конфигурация launch запускает экземпляр Chrome, на котором выполняется указанный файл или URL-адрес. При указании URL нужно установить webRoot в директорию, из которой извлекаются файлы. Можно использовать как абсолютный путь, так и путь с резолвером ${workspaceFolder}. Это папка, открытая в рабочей области Visual Studio Code.
Примечание: будьте внимательны при установке webRoot, он используется для просмотра URL-адресов файлов на компьютере.
В примере используются две конфигураций launch: одна запускается на локальном сервере, а другая — на локальном файле.
{
"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"
}
]
}
При работе экземпляра Chrome, который запущен отладчиком, будет использоваться временный сеанс, предполагающий отсутствие расширений или открытых вкладок. Чтобы запустить экземпляр Chrome с пользователем и расширениями, нужно закрыть каждый работающий экземпляр.
Примечание: при остановке отладчика окно Chrome закрывается.
Attach
Эта конфигурация прикрепляет отладчик к работающему экземпляру Chrome. Однако для работы этой опции нужно запустить Chrome с включенной удаленной отладкой. Способ запуска экземпляра Chrome с удаленной отладкой зависит от ОС.
Windows
Есть два способа запуска Chrome с удаленной отладкой в Windows. Первый — щелкните правой кнопкой мыши на ярлык Google Chrome. Выберите свойства и добавьте следующую команду в поле «объект».
--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 с флагом. В данном случае: —remote-debugging-port, который будет установлен на 9222. Узнать об этом подробнее можно здесь.
Примечание: если у вас запущены другие экземпляры Chrome без удаленной отладки, обязательно закройте их перед запуском нового.
Пример конфигурации attach:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
]
}
Примечание: при отсутствии опции «url» появится список с открытыми вкладками.
В этом расширении есть много полезных опций, которые можно использовать для настройки конфигураций проекта. Прочитать документацию можно здесь.
Заключение
Поздравляем! Мы узнали, как установить и настроить отладчик для Chrome в Visual Studio Code. Также мы узнали, как запустить Google Chrome с удаленной отладкой. Настоятельно рекомендую взглянуть на репозиторий расширения.
Специально для сайта ITWORLD.UZ. Новость взята с сайта NOP::Nuances of programming