Как настроить отладчик для Chrome extension в Visual Studio Code

Отладка веб-приложений с помощью 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 с удаленной отладкой. Настоятельно рекомендую взглянуть на репозиторий расширения.

Читайте также:

• Использование Angular Elements с расширением Chrome
• Отладка Node.js с помощью Google Chrome
• Как работает JavaScript

---

Перевод статьи Victor A. Requena: How to set up the debugger for Chrome extension in Visual Studio Code