Поделиться через

Отладка приложений WebView2 с помощью Visual Studio

  • Статья

Microsoft Visual Studio предоставляет различные средства отладки для веб-кода и машинного кода в приложениях WebView2 для отладки веб-кода и машинного кода в приложениях Win32 или надстройках Office. В этой статье рассматривается отладка элементов управления WebView2. Доступны и другие методы отладки в Visual Studio.

Сводка общих шагов

Отладка кода JavaScript в элементе управления WebView2:

  1. Установите компонент диагностика JavaScript в рабочей нагрузке Разработка на C++ в Visual Studio или в рабочей нагрузке другой платформы.

  2. Установите точку останова в строке кода JavaScript.

  3. На странице Отладка свойств> проекта задайте для параметра Тип отладчика значениеJavaScript (WebView2) (вместо Auto или Native).

  4. Запустите отладчик, как обычно. Например, в строке меню выберите Отладка>Начать отладку (F5).

  5. В работающем приложении WebView2 взаимодействуйте с веб-страницей, на которой выполняется код JavaScript. Отладчик приостанавливает работу в строке кода JavaScript с точкой останова.

  6. Используйте панели отладчика в Visual Studio.

Эти действия подробно описаны ниже, используя пример main Win32/C++ (WebView2APISample).

Требования

  • Клонируйте репозиторий WebView2Samples, если вы хотите выполнить указанные ниже примеры действий (с помощью примера main, Win32/C++, WebView2APISample). В следующем шаге показано, как это сделать.

  • Установите Visual Studio 2022. Visual Studio 2022 можно использовать для работы с примерами приложений WebView2 и собственным приложением WebView2. (Visual Studio 2019 также работает.) В следующем шаге показано, как это сделать.

  • Установите и настройте средства отладчика скриптов в Visual Studio. То есть установите рабочую нагрузку Visual Studio (или эквивалентную рабочую нагрузку для другого языка), включая компонент javaScript диагностика. В следующем шаге показано, как это сделать.

  • Создайте и запустите пример main Win32/C++, чтобы приложение WebView2APISample выполняло сборку и выполнение (если вы хотите выполнить приведенные ниже примеры действий). В следующем шаге показано, как это сделать.

  • Для отладки скриптов приложение должно быть запущено из Visual Studio.

  • Отладчик нельзя подключить к работающему процессу WebView2.

Установка компонента диагностика JavaScript

Используйте Visual Studio Installer, чтобы установить рабочую нагрузку Разработка классических приложений на C++ в Visual Studio, включая компонент javaScript диагностика, как показано ниже. Или, если вы используете языковую рабочую нагрузку, отличный от C++, выберите компонент javaScript диагностика этой рабочей нагрузки, как описано ниже.

  1. Если это еще не сделано, клонируйте репозиторий WebView2Samples, как описано в разделе Клонирование репозитория WebView2Samples в статье Настройка среды разработки для WebView2.

  2. Если это еще не сделано, установите Visual Studio 2022, как описано в разделе Установка Visual Studioв разделе Настройка среды разработки для WebView2.

  3. В Visual Studio 2022 установите рабочую нагрузку Разработка классических приложений на C++ , как показано ниже.

  4. На панели Обозреватель Windows введите Visual Studio Installer.

  5. Выберите Visual Studio Installer, чтобы открыть его.

  6. В Visual Studio Installer в установленной версии нажмите кнопку Дополнительно, а затем выберите Изменить.

  7. В Visual Studio в разделе Рабочие нагрузки выберите рабочую нагрузку Разработка классических приложений на C++ , чтобы появилась галочка:

    Экран изменения рабочих нагрузок Visual Studio

  8. Выберите Отдельные компоненты в верхней части окна.

  9. В поле поиска введите JavaScript diagnostics.

  10. Установите флажок JavaScript диагностика:

    Visual Studio: изменение значений на вкладке

  11. Нажмите кнопку Изменить .

Перейдите к следующему разделу ниже.

Выбор отладчика JavaScript (WebView2)

Затем включите отладку скриптов для приложений WebView2, как показано ниже.

  1. Если это еще не сделано, выполните действия в примере приложения Win32 , чтобы выполнить сборку и запуск приложения WebView2APISample. Решение WebView2Samples должно быть открыто в Visual Studio, а пример приложения не должен выполняться. Или откройте собственный проект приложения WebView2 в Visual Studio.

  2. В Visual Studio в Обозреватель решений щелкните правой кнопкой мыши проект WebView2APISample (или собственный проект) и выберите Пункт Свойства.

    Откроется диалоговое окно Страницы свойств .

  3. Слева разверните узел Свойства конфигурации, а затем выберите Отладка.

  4. Справа отладчик Тип выберите JavaScript (WebView2) и нажмите кнопку ОК :

    Свойство

Отладка приложения WebView2

После настройки выше выполните отладку приложения WebView2, как показано ниже.

  1. Чтобы задать точку останова в исходном коде, наведите указатель мыши слева от номера строки и щелкните, чтобы задать точку останова. Например, откройте WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.jsи установите точку останова в строке 2: console.log("onAddClick+");, в тексте onAddClick функции:

    Запуск локального отладчика Windows в Visual Studio

    При установке точки останова необходимо открыть файл по тому же пути, который связан с элементом управления WebView2, так как адаптер отладки JS/TS не выполняет сопоставление исходного пути.

    Точка останова будет активирована при выполнении этого раздела кода. Эта точка останова активируется при нажатии кнопки Добавить новый элемент в примере приложения на следующем шаге ниже.

  2. Выберите размер платформы, например x64.

  3. Чтобы запустить отладчик, выполните одно из следующих действий:

    • В строке меню выберите Отладка>Начать отладку (F5).
    • В Обозреватель решений щелкните правой кнопкой мыши проект >Отладка>Запуск нового экземпляра или Шаг в новый экземпляр.
    • Нажмите зеленую кнопку Воспроизвести слева от локального отладчика Windows.

    Приложение WebView2APISample (или ваше собственное приложение) запускается и открывается, и отладчик подключается к первому созданному процессу WebView2. В разделе Отладка свойств> для проекта для локального отладчика Windows задано значение JavaScript (WebView2).

  4. В Visual Studio щелкните вкладку Вывод в правом нижнем углу.

    Вкладка содержит только следующее сообщение, в котором упоминается отладчик JS: "Подробные журналы записываются в: C:\Users\myUsername\AppData\Local\Temp\visualstudio-js-debugger.txt".

  5. В окне приложения WebView2APISample выберите Сценарий>Отладка>локального файла JavaScript.

    Файл WebView2APISample/Debug/x64/assets/ScenarioJavaScriptDebugIndex.html отображается:

    Отрисованный HTML-файл

  6. В Visual Studio просмотрите панель Вывод . Добавлены следующие выходные данные:

    This is the very first line of code that executes.
Second
Third
inside
onAddClick+
onAddClick-
onAddClick+
onAddClick-
End

  7. На веб-странице в приложении нажмите кнопку Добавить новый элемент всплывающего окна.

    Точка останова onAddClick в функции достигается, и приложение приостанавливается в отладчике.

  8. Переключитесь в окно Visual Studio и просмотрите области отладчика.

  9. Перейдите на вкладку Вывод , чтобы отобразить выходные данные приложения:

    Вкладка

    В выходных данных приложения отображается сообщение "Это самая первая строка кода, которая выполняется" из-за строки console.log("This is the very first line of code that executes."); в файле WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.html.

Устранение неполадок

Откройте средства разработки, используя подход, отличный от F12

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

Чтобы открыть средства разработки, нажмите клавиши CTRL+SHIFT+I. Или щелкните правой кнопкой мыши страницу в работающем приложении и выберите .Inspect

Сопоставление виртуального исходного пути не поддерживается в Visual Studio 2019

При использовании метода WebView2 SetVirtualHostNameToFolderMapping отладчик в Visual Studio 2019 не понимает сопоставление пути к виртуальному источнику, поэтому точки останова работают неправильно.

При установке точки останова необходимо открыть файл по тому же пути, который связан с элементом управления WebView2, так как адаптер отладки JS/TS не выполняет сопоставление исходного пути.

Сопоставление пути к виртуальному источнику поддерживается отладчиком в Visual Studio Code.

См. также