Расширение «Debugger for Chrome» для VS Code
14.06.2021
Теги: IDE • JavaScript • Web-разработка • Настройка • Плагин
Это расширение устарело, так как VS Code теперь имеет встроенный отладчик JavaScript, который выполняет те же функции.
Расширение предназначено для отладки js-кода в редакторе VS Code с использованием Chrome DevTools протокола. Это альтернатива тому, чтобы отлаживать js-код в панели разработчика браузера Chrome. Для начала работы нужно установить это расширение в разделе плагинов.
Давайте создадим директорию project, а внутри нее еще две директории — src и dist. В директории src будут исходники, а в директории dist — готовая сборка. И откроем проект в VS Code — нужно кликнуть по директории project правой кнопкой мыши и выбрать в контекстном меню «Открыть с помощью VS Code».
Для работы отладчика нужно создать файл конфикурации launch.json в директории project/.vscode. Но вручную его создавать не нужно, при первом запуске отладчика файл будет создан автоматически. Для этого нужно кликнуть по иконке «Запуск и отладка», потом по ссылке «создать файл launch.json».
Расширение Debugger for Chrome может работать в двух режимах — либо самостоятельно запускать экземпляр Chrome (launch), либо присоедениться к уже работающему экземпляру Chrome (attach). Вообще говоря, можно запустить отладку даже без веб-сервера, но удобнее все-таки иметь работающий веб-сервер, например LiveServer. Как установить и настроить расширение Live Server для VS Code — можно прочитать здесь.
Подготовка к отладке
Давайте в директории project/dist создадим файл index.html, который подключает js-файл script.js. И создадим файл script.js, в котором добавим точку останова, чтобы проверить работу отладчика.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Debug</title> <script src="script.js"></script> </head> <body> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p> </body> </html>
function foo() { // стек вызовов foo() console.log('foo'); bar(); } function bar() { // стек вызовов foo() -> bar() console.log('bar'); baz(); } function baz() { debugger; // стек вызовов foo() -> bar() -> baz() console.log('baz'); } foo(); // место вызова foo()
Режим launch (запуск)
1. Запуск отладки в режиме launch без сервера
Для начала запустим отладку без использования веб-сервера. Редактируем файл конфигурации отладчика launch.json:
{ "version": "0.2.0", "configurations": [ { // режим launch без сервера "name": "Launch index.html, without WebServer", "type": "chrome", "request": "launch", "file": "${workspaceFolder}/dist/index.html" }, ] }
Конфигураций для запуска отладчика может быть несколько, выбрать нужную можно в выпадающем списке слева сверху, после чего нажать F5 для запуска отладки.
Будет запущен браузер Chrome, в котором будет открыт файл project/dist/index.html. Поскольку в этом html-файле подключается js-файл project/dist/script.js — выполнение остановится в точке останова.
2. Запуск отладки в режиме launch с LiveServer
Теперь добавим вторую конфигурацию запуска отладки — уже с использованием веб-сервера LiveServer.
{ "version": "0.2.0", "configurations": [ .......... { // режим launch с LiveServer "name": "Launch Chrome, server LiveServer", "type": "chrome", "request": "launch", "url": "http://localhost:5555", "webRoot": "${workspaceFolder}/dist" }, ] }
У меня LiveServer работает на порту 5555 (по умолчанию 5500), корень веб-сервера — project/dist. Разумеется, перед запуском отладки надо запустить веб-сервер — кнопка запуска LiveServer находится в правом нижнем углу. Но LiveServer не должен сам запускать браузер, поэтому добавляем опцию liveServer.settings.NoBrowser в файл конфигурации settings.json редактора VS Code.
Режим attach (присоединение)
3. Запуск отладки в режиме attach без сервера
Для начала запустим отладку в режиме attach без использования веб-сервера. Для этого добавляем третью конфигурацию запуска отладчика:
{ "version": "0.2.0", "configurations": [ .......... { // режим attach без сервера "name": "Attach Chrome tab, without WebServer", "type": "chrome", "request": "attach", "port": 9222 }, ] }
Отладчик должен присоединиться к уже запущенному экземпляру Chrome и обмениваться с ним сообщениями по протоколу Chrome DevTools. При этом браузер должен быть запущен с дополнительной опцией, указывающей порт для обмена этими сообщениями. Важный момент — это должен быть единственный экземпляр Chrome, остальные должны быть закрыты.
> "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
Давайте убедимся в том, что браузер был запущен с опцией remote-debugging-port, для этого открываем еще одну вкладку, набираем в адресной строке chrome://version и проверяем значение «Командная строка».
Теперь надо открыть в браузере файл project/dist/index.html, это можно сделать с помощью сочетания клавиш Ctrl+O. Нужно убедиться, что отладчик браузера Chrome в панели разработчика остановился на точке останова, если это не так — перезагрузить страницу с помощью F5.
И наконец, присоединяемся к этому экземпляру Chrome из редактора VS Code — как обычно, жмем F5 для запуска отладчика.
Если открыта только одна вкладка браузера, не возникает вопроса — к какой вкладке присоединяться. Но если вкладок две или три, нужно сообщить расширению «Debugger for Chrome» — к какой из них нужно присоединиться. Это можно сделать с помощью опции url, в которой надо указать содержимое адресной строки нужной вкладки.
{ "version": "0.2.0", "configurations": [ .......... { "name": "Attach index.html, without WebServer", "type": "chrome", "request": "attach", "port": 9222, "url": "file:///C:/Users/Evgeniy/Desktop/project/dist/index.html" }, { "name": "Attach second.html, without WebServer", "type": "chrome", "request": "attach", "port": 9222, "url": "file:///C:/Users/Evgeniy/Desktop/project/dist/second.html" }, ] }
4. Запуск отладки в режиме attach с LiveServer
Теперь запустим отладку в режиме attach с использования сервера LiveServer. Для этого добавляем четвертую конфигурацию запуска отладчика:
{ "version": "0.2.0", "configurations": [ .......... { // режим attach с LiveServer "name": "Attach Chrome tab, server LiveServer", "type": "chrome", "request": "attach", "port": 9222, "url": "http://localhost:5555", "webRoot": "${workspaceFolder}/dist" }, ] }
Запускать браузер LiveServer должен с опцией remote-debugging-port — поэтому открываем файл настроек VS Code settings.json и добавляем еще одну настройку. Все экземпляры Chrome должны быть закрыты перед тем, как LiveServer запустит новый экземпляр.
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --remote-debugging-port=9222"
Перед запуском отладки надо запустить веб-сервер — кнопка запуска LiveServer находится в правом нижнем углу. Теперь все готово — как обычно, жмем F5 для запуска отладчика.
Глобальные настройки отладчика
Все настройки для отдельного проекта launch.json можно перенести в файл настроек settings.json редактора VS Code — тогда они будут использоваться для всех проектов.
{ "editor.fontSize": 15, "editor.wordWrap": "on", .......... "launch": { "version": "0.2.0", "configurations": [ { "name": "Launch index.html, without WebServer", "type": "chrome", "request": "launch", "file": "${workspaceFolder}/dist/index.html" }, { "name": "Launch Chrome, server LiveServer", "type": "chrome", "request": "launch", "url": "http://localhost:5555", "webRoot": "${workspaceFolder}/dist" }, { "name": "Attach Chrome tab, without WebServer", "type": "chrome", "request": "attach", "port": 9222, }, { "name": "Attach Chrome tab, server LiveServer", "type": "chrome", "request": "attach", "port": 9222, "url": "http://localhost:5555", "webRoot": "${workspaceFolder}/dist" }, ] } .......... }
Профиль Chrome для отладки
Расширения Chrome, которые используются для повседневного использования и для веб-разработки часто конфликтуют. Было бы удобно иметь возможность запускать два разных экземпляра Chrome с разными профилями. Один — для повседневного использования при просмотре сайтов, другой — исключительно для веб-разработки.
Давайте создадим еще один ярлык запуска Chrome и изменим строку запуска в свойствах этого ярлыка:
Теперь запустим Chrome с использованием этого ярлыка, чтобы создать новый профиль Developer:
Путь к новому профилю можно посмотреть, если набрать в адресной строке браузера chrome://version:
Можно настроить внешний вид, чтобы он отличался от дефолтного — сразу видно, какой профиль используется:
Теперь можно установить все расширения, которые нужны для веб-разработки. А из профиля Default для повседневного использования — эти расширения удалить.
Используем новый профиль
1. Отладка в режиме launch без сервера и с профилем Developer
Давайте скажем отладчику, чтобы он запускал Chrome с использованием профиля Developer.
{ "version": "0.2.0", "configurations": [ { "name": "Launch index.html, without WebServer", "type": "chrome", "request": "launch", "file": "${workspaceFolder}/dist/index.html", "userDataDir": false, "runtimeArgs": [ "--profile-directory=Developer" ] }, .......... ] }
Опция userDataDir указывает на директорию для хранения профилей, по умолчанию имеет значение временной директории. При запуске отладчика создается временный профиль Default, с которым и будет запущен браузер.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:\Users\Evgeniy\AppData\Local\Temp\.profile"
Но нам нужно запустить браузер с нашим профилем Developer, который расположен совсем в другом месте, поэтому используем значание false и указываем название профиля, который нужно использовать.
Опция может принимать значение true — использовать временный профиль, false — не использовать временный профиль, путь — использовать указанный путь к директории с профилями.
2. Отладка в режиме launch с LiveServer и c профилем Developer
Давайте скажем веб-серверу, чтобы он сам не запускал браузер — это будет делать отладчик:
"liveServer.settings.NoBrowser": true
И скажем отладчику, чтобы он запускал браузер с использованием профиля Developer:
{ "version": "0.2.0", "configurations": [ .......... { "name": "Launch Chrome, server LiveServer", "type": "chrome", "request": "launch", "url": "http://localhost:5555", "webRoot": "${workspaceFolder}/dist", "userDataDir": false, "runtimeArgs": [ "--profile-directory=Developer" ] }, .......... ] }
3. Отладка в режиме attach без сервера и с профилем Developer
В этом случае нам надо самим запускать браузер с профилем Developer (ярлык для этого у нас уже есть), но еще мы должны указать дополнительную опцию remote-debugging-port — создать еще один ярлык или исправить существующий.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --profile-directory=Developer --remote-debugging-port=9222"
4. Отладка в режиме attach с LiveServer и с профилем Developer
Давайте скажем веб-серверу, чтобы запускал браузер с использованием профиля Developer и с доп.опцией remote-debugging-port.
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --profile-directory=Developer --remote-debugging-port=9222"
Вместо заключения
Получилось несколько многословно, но это из-за того, что мы рассмотрели все возможные варианты запуска отладчика. В реальности запускать отладчик чаще всего удобнее в режиме attach с использованием веб-сервера. LiveServer уже запущен, все изменения сразу отражаются в окне браузера, а если потребовалась отладка — присоединяемся к уже открытому окну.
launch.json есть полезная опция urlFilter, которая указывает отладчику искать вкладку с этим URL-адресом. Опция допускает использование *, например "localhost:*/app" будет соответствовать "http://localhost:123/app" или "http://localhost:456/app", но не "https://stackoverflow.com".
Дополнительно
- Using a Chrome Developer Profile with VS Code Debugger
- Plugin Debugger for Chrome for Visual Studio Code
Поиск: IDE • JavaScript • Web-разработка • Плагин • Настройка • Debug • Отладка