Интеграция с отладкой Visual Studio Code

  • Статья

Чтобы открыть средства разработки в Visual Studio Code в режиме отладки с помощью пользовательского интерфейса DevTools, щелкните правой .html кнопкой мыши файл или нажмите кнопку Запустить проект, как описано в разделе Открытие инструментов разработки и браузера DevTools. Вы также можете использовать пользовательский интерфейс Visual Studio Code для запуска отладчика, например F5, чтобы открыть вкладки Средства разработки, если вы определяете файл, совместимый с launch.json DevTools, нажав кнопку Создать launch.json на боковой панели инструментов Microsoft Edge.

Вкладки, открываемые при щелчке правой кнопкой мыши .html файла в Обозреватель

При открытии средств разработки в Visual Studio Code в режиме отладки открываются следующие компоненты пользовательского интерфейса:

  • Вкладка Средства разработки для Edge .
  • Вкладка Edge DevTools: Браузер .
  • Панель инструментов Отладка.
  • Боковая панель запуска (отладчик), включая панель контрольных значений .
  • Консоль отладки в нижней части окна.

См. также шаг 5. Пошаговое выполнение кода JavaScript в отладчике в разделе Начало работы, щелкнув правой кнопкой мыши HTML-файл.

Способы запуска отладчика вместе с вкладками DevTools

Для большинства из этих подходов требуется launch.json созданный devTools файл, содержащий ваш URL-адрес.

Функции пользовательского интерфейса DevTools для открытия средств разработки в режиме отладки

  • Щелкните правой кнопкой .html мыши файл в Обозреватель>Открыть с помощью Edge. Этот подход по существу использует путь к файлу, а не URL-адрес, и не требует создания launch.json файла.

  • Панель> действийСредства> Microsoft Edge нажмите кнопку Запустить проект.

Visual Studio Code функций пользовательского интерфейса для открытия средств разработки в режиме отладки

  • Нажмите клавишу F5.

  • На панели действий щелкните значок Запуск и отладка (кнопка Запуск и отладка), а затем на боковой панели Запуск и отладка нажмите кнопку Запуск и отладка .

  • Откройте палитру команд Visual Studio Code, начните вводить слово debug после >и выберите Отладка: Открыть ссылку. См . команду Open Link в статье Отладка браузера в VS Code.

Открытие браузера в рамках сеанса отладки

Вы можете открыть вкладку Edge DevTools: Browser (встроенный браузер DevTools) в рамках сеанса отладки. Расширение DevTools открывает новый браузер в виде встроенного браузера в Visual Studio Code. Эту вкладку Средства разработки: браузер можно переместить в любое место редактора. Эту вкладку можно использовать параллельно с исходным кодом или разделить области и просмотреть браузер под кодом:

Расширение, открытое в Visual Studio Code с предварительным просмотром браузера под исходным кодом и средствами разработки справа

Расширение DevTools можно использовать с обычным Visual Studio Code отладки пользовательского интерфейса или рабочего процесса, как показано ниже. В этом подходе, чтобы перейти в режим отладки, мы не используем пользовательский интерфейс DevTools. Мы не щелкаем файл правой кнопкой .html мыши, чтобы выбрать команду Открыть с помощью Edge, и не нажимаем кнопку Панель> действийMicrosoft Edge Tools>Launch Project (Запуск проекта).

Отладка JavaScript встроена в Visual Studio Code. Вы можете выполнять отладку в Chrome, Microsoft Edge или Node.js без установки расширений. При отладке с помощью параметра Microsoft Edge с Visual Studio Code функций отладки и пользовательского интерфейса можно запустить средства разработки Microsoft Edge из отладчика JavaScript. Если расширение DevTools не установлено, вам будет предложено дополнительно установить его.

Расширение DevTools предоставляет дополнительные функции, такие как встроенный браузер DevTools с панелью инструментов эмуляции устройства, а также дополнительные способы входа в режим отладки в Visual Studio Code.

Чтобы запустить отладчик Visual Studio Code вместе с DevTools, используя обычный пользовательский интерфейс, который является частью Visual Studio Code:

  1. Откройте новое окно Visual Studio Code. Папка (рабочая область) не открыта, а вкладки Средства разработки не открыты.

  2. Откройте папку (рабочую область). Например, выберите Файл>Открыть последние>C:\Users\username\Documents\GitHub\Demos\demo-to-do. Вкладки Средства разработки не открыты.

  3. .html Откройте файл.

  4. Щелкните файл в .html редакторе и выполните любые из следующих действий пользовательского интерфейса, которые запускают отладчик Visual Studio Code обычным способом:

    • Нажмите клавишу F5.

    • На панели действий щелкните значок Запуск и отладка (значок Запуск и отладка), а затем на боковой панели Запуск и отладка нажмите кнопку Выполнить и отладку , как показано ниже.

    • Откройте палитру команд Visual Studio Code, начните вводить слово debug и выберите Отладка: Открыть ссылку.

    Запуск средств разработки Microsoft Edge из отладчика JavaScript

    Средства Microsoft Edge не отображаются на приведенном выше снимке экрана, так как на этом снимке экрана были удалены средства разработки.

  5. Выберите Веб-приложение (Edge).

  6. На панели инструментов Отладка нажмите кнопку Проверить , которая содержит подсказку Открыть средства разработки в браузере:

    Кнопка

    При первом нажатии кнопки Проверить на панели инструментов Отладка откроется боковая панель Расширения: Marketplace , содержащая средства Microsoft Edge для VS Code:

    Установка средств разработки из значка

  7. Щелкните Microsoft Edge Tools for VS Code Install (Средства Microsoft Edge для VS Code>Install).

  8. Закройте средства разработки на закрывающие средства разработки.

  9. Откройте папку .html и файл.

Перейдите ниже.

Создание launch.json, ориентированной на средства разработки

Предположим, что открытая папка не содержит папку .vscode , которая уже содержит launch.json файл:

  1. Выберите Панель> действийMicrosoft Edge Tools> нажмите кнопку Создать launch.json и нажмите клавишу F5. Или см. статью Открытие средств разработки и браузера DevTools.

    После установки расширения DevTools при открытии .html файла и нажатии кнопки Проверить на панели инструментов Отладка вкладки Edge DevTools открываются внутри Visual Studio Code:

    Кнопка Проверить открывает Microsoft Edge DevTools внутри Visual Studio Code

    На приведенном выше снимке экрана в папке Обозреватель есть launch.json файл, а в .vscode нижней части окна — строка из этого файла: Запуск Edge Безголовый и присоединение Средств разработки, так как Средства разработки были открыты с помощью Visual Studio Code функции, например F5, которая использовала созданный devTools launch.json файл.

  2. При необходимости в левом верхнем углу вкладки Edge DevTools нажмите кнопку Переключить экранную трансляцию :

    Нажмите кнопку

    Откроется вкладка Edge DevTools: Browser ( Браузер ).

    На приведенном выше снимке экрана нет launch.json файла в Обозреватель в .vscode папке, а также нет строки, например Launch Edge Headless and attach DevTools в нижней части окна, так как DevTools был открыт путем щелчка правой кнопкой мыши .html файла в Обозреватель.

Дополнительные шаги и снимки экрана пользовательского интерфейса см. в разделе Где строки имен отображаются в пользовательском интерфейсе. В большинстве случаев единственное, что нужно знать о содержимом файла, созданного launch.json средствами разработки, — ввести нужный URL-адрес в строке "url" в нескольких местах.

Автоматическое открытие браузера и средств разработки при отладке в Visual Studio Code

Для отладки проекта может потребоваться изменить страницу по умолчанию, которая открывается в Microsoft Edge в Visual Studio Code. Чтобы изменить страницу по умолчанию на веб-сайт проекта, выполните следующие действия:

  1. В Visual Studio Code выберите Файл>Новое окно. Обратите внимание, что папка не открыта.

  2. На панели действий выберите Средства Microsoft Edge.

  3. На панели Инструменты Microsoft Edge: Целевые объекты щелкните ссылку открыть папку .

  4. Выберите папку проекта с новой страницей по умолчанию, отображаемой при запуске отладки в Visual Studio Code.

    При первом открытии папки необходимо подтвердить, что вы доверяете авторам файлов в этой папке:

    Доверяете ли вы авторам в файлах этой папки?

  5. При необходимости установите флажок Доверять авторам всех файлов в родительской папке, а затем нажмите кнопку Да, я доверяю авторам :

    При первом выполнении этого процесса необходимо также снова выбрать панель действий>Microsoft Edge Tools .

    На панели Инструменты Microsoft Edge: Цели теперь отображаются две кнопки: Запустить экземпляр и Создать launch.json:

    На панели

Создание launch.json, ориентированной на средства разработки

  1. Выберите Создать launch.json , чтобы создать launch.json в проекте. Это должен быть более длинный файл, созданный devTools, как показано в разделе Файл launch.json для расширения DevTools, а не более короткий, более универсальный файл, созданный Visual Studio Code. См. также статью Удаление или повторное создание launch.json в разделе Устранение неполадок с расширением DevTools.

  2. В launch.jsonдобавьте URL-адрес проекта. Если оставить URL-адрес пустым, отобразится страница по умолчанию.

  3. Сохраните launch.json.

При выборе отладки проекта в Visual Studio Code, независимо от того, используете ли вы функции пользовательского интерфейса DevTools или обычные функции Visual Studio Code пользовательского интерфейса, он автоматически запустит браузер и откроет средства разработчика, указав URL-адрес, указанный в файлеlaunch.json.

Если вы видите страницу Успешно, но хотите использовать собственную веб-страницу

Какая веб-страница открывается в Средствах разработки, определяется launch.json , существует ли этот файл в рабочей области (открытой папке). Таким образом, вы можете нажать клавишу F5 во время открытия собственного .html файла, но увидеть страницу по умолчанию Успешно на вкладках Средства разработки . В этом случае возможны следующие варианты:

  • Измените launch.json в открытой папке url-адрес (обычно) или, возможно, путь к файлу. Затем можно использовать рабочий процесс или пользовательский интерфейс отладчика Visual Studio Code, например F5.

  • Или удалите launch.json, а затем панель> действий Обозреватель щелкните файл >правой> кнопкой мыши .htmlвыберите Открыть с помощью Edge. В этом подходе не используется рабочий процесс или пользовательский интерфейс отладчика Visual Studio Code, например F5.

См. также

Внешние страницы: