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

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

  • Статья

Используйте Microsoft Visual Studio Code для отладки скриптов, выполняемых в элементах управления WebView2. Visual Studio Code имеет встроенный отладчик для отладки браузера. См . статью Отладка браузера в VS Code.

Создание файла launch.json

Для отладки кода в проекте требуется launch.json файл. Файл launch.json — это файл конфигурации отладчика для настройки и настройки отладчика Visual Studio Code. Одним из свойств, необходимых для настройки отладчика, является request свойство . Существует два request типа: launch и attach.

Следующий код демонстрирует запуск приложения из Visual Studio Code (а не присоединение отладчика к работающему экземпляру приложения). Для этого приложение должно быть создано ранее. Если в проекте нет launch.json файла, создайте новый launch.json файл во .vscode вложенной папке в текущем проекте и вставьте в него следующий код:

"name": "Hello debug world",
"type": "msedge",
"port": 9222, // The port value is optional, and the default value is 9222.
"request": "launch",
"runtimeExecutable": "C:/path/to/your/webview2/app.exe",
"env": {
   // Customize for your app location if needed
   "Path": "%path%;e:/path/to/your/app/location; "
},
"useWebView": true,
// The following two lines set up source path mapping, where `url` is the start page
// of your app, and `webRoot` is the top level directory with all your code files.
"url": "file:///${workspaceFolder}/path/to/your/toplevel/foo.html",
"webRoot": "${workspaceFolder}/path/to/your/assets"

Параметр URL-адреса командной строки передается

Для сопоставления исходного пути Visual Studio Code теперь требуется URL-адрес, поэтому приложение теперь получает параметр командной url строки при запуске. При необходимости параметр можно игнорировать url .

Отладка кода

  1. Чтобы задать точку останова в исходном коде, щелкните строку кода и нажмите клавишу F9:

    Точка останова, заданная в Visual Studio Code

  2. На вкладке Выполнить выберите конфигурацию запуска в раскрывающемся меню.

  3. Нажмите кнопку Начать отладку, которая является зеленым треугольником рядом с раскрывающимся списком конфигурации запуска:

    Вкладка

  4. Чтобы просмотреть выходные данные и ошибки отладки, откройте консоль отладки:

    Консоль отладки в Visual Studio Code

Целевая отладка WebView2

В некоторых приложениях WebView2 можно использовать несколько элементов управления WebView2. Чтобы выбрать элемент управления WebView2 для отладки в этой ситуации, можно использовать целевую отладку WebView2.

Откройте launch.json и выполните следующие действия, чтобы использовать целевую отладку WebView2.

  1. Убедитесь, что useWebview параметр имеет значение true.

  2. urlFilter Добавьте параметр . Когда элемент управления WebView2 переходит по URL-адресу, urlFilter значение параметра используется для сравнения строк, отображаемых в URL-адресе.

"useWebview": "true",
"urlFilter": "*index.ts",

// Options for "urlFilter":
// Match any url that ends with "index.ts":
"urlFilter": "*index.ts",
// Match any url that contains "index" anywhere in the URL:
"urlFilter": "*index*",
// Explicitly match a file named "index.ts":
"urlFilter": "file://C:/path/to/my/index.ts",

При отладке приложения может потребоваться выполнить пошаговое выполнение кода с начала процесса отрисовки. Если веб-страницы отрисовываются на сайтах и у вас нет доступа к исходному коду, можно использовать ?=value параметр , так как веб-страницы игнорируют нераспознанные параметры.

Не удается выполнить отладку двух элементов управления WebView2 одновременно

После обнаружения первого совпадения в URL-адресе отладчик останавливается. Невозможно одновременно выполнить отладку двух элементов управления WebView2, так как порт CDP является общим для всех элементов управления WebView2 и использует один номер порта.

Отладка запущенных процессов

Возможно, потребуется подключить отладчик к запущенным процессам WebView2. Для этого в обновите launch.jsonrequest параметр, изменив его значение на attach:

"name": "Hello debugging world",
"type": "msedge",
"port": 9222,
"request": "attach",
"runtimeExecutable": "C:/path/to/your/webview2/myApp.exe",
"env": {
   "Path": "%path%;e:/path/to/your/build/location; "
},
"useWebView": true

Элемент управления WebView2 должен открыть порт протокола разработчика Chrome (CDP), чтобы разрешить отладку элемента управления WebView2. Код должен быть создан, чтобы только один элемент управления WebView2 был открыт через порт CDP перед запуском отладчика.

Кроме того, необходимо добавить новый REGKEY <myApp.exe> = --remote-debugging-port=9222 в Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments, чтобы отладчик смог найти нужный порт. Чтобы добавить этот раздел реестра, выполните следующие действия:

  1. Нажмите клавишу с логотипом Windows и найдите редактор реестра. Откройте приложение Редактор реестра и нажмите кнопку Да , чтобы разрешить редактирование.

  2. В дереве папок слева попробуйте развернуть HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments.

  3. \Edge\WebView2\AdditionalBrowserArguments Если часть этого пути не существует, создайте эти три вложенные папки следующим образом:

    1. Чтобы создать вложенную \Edge папку: в дереве папок щелкните папку HKEY_CURRENT_USER\Software\Policies\Microsoft правой кнопкой мыши, наведите указатель мыши на кнопку Создать и выберите пункт Ключ. Папка добавляется в качестве дочерней Microsoft папки с именем New Key #1. Щелкните папку правой кнопкой New Key #1 мыши и выберите команду Переименовать. Введите Edge имя нового ключа.

    2. Создайте вложенную \WebView2 папку, как на предыдущем шаге.

    3. Создайте вложенную \AdditionalBrowserArguments папку, как на предыдущем шаге.

      Дерево теперь развернуто до HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments.

  4. Щелкните папку правой AdditionalBrowserArguments кнопкой мыши, наведите указатель мыши на кнопку Создать и выберите Строковое значение. В столбце Имя щелкните правой кнопкой мыши New Value #1, выберите Переименовать, а затем введите имя файла исполняемого файла приложения, например myApp.exe.

  5. В столбце Имя щелкните правой кнопкой мыши имя исполняемого файла, например myApp.exe, и выберите команду Изменить. Откроется диалоговое окно Изменение строки .

  6. В текстовом поле Данные значения введите --remote-debugging-port=9222:

    Диалоговое окно

  7. Нажмите кнопку ОК и убедитесь, что раздел реестра соответствует следующему (с именем .exe файла в столбце Имя ):

    Результирующий раздел реестра в редакторе реестра

Параметры трассировки отладки

Чтобы включить трассировку отладки trace , добавьте параметр в launch.json , как показано ниже.

  1. trace Добавьте параметр :
"name": "Hello debugging world",
"type": "msedge",
"port": 9222,
"request": "attach",
"runtimeExecutable": "C:/path/to/your/webview2/app.exe",
"env": {
"Path": "%path%;e:/path/to/your/build/location; "
},
"useWebView": true
,"trace": true  // Turn on debug tracing, and save the output to a log file.

Сохранение выходных данных отладки в файл журнала:

Сохранение выходных данных отладки в файл журнала 

,"trace": "verbose"  // Turn on verbose tracing in the Debug Output pane.

Выходные данные отладки Visual Studio Code с включенной подробной трассировкой:

Выходные данные отладки Visual Studio Code с включенной подробной трассировкой

Отладка надстроек Office

При отладке надстроек Office откройте исходный код надстройки в отдельном экземпляре Visual Studio Code. Откройте launch.json приложение WebView2. Добавьте следующий код в launch.json, чтобы присоединить отладчик к надстройке Office:

,"debugServer": 4711

Отладка приложений WebView2 WinUI 2 (UWP)

  1. Установите версию среды выполнения WebView2 после 106.0.1370.34.

  2. Откройте редактор реестра, нажав клавишу с логотипом Windows и найдите редактор реестра. Откройте приложение Редактор реестра и выберите Да , чтобы разрешить редактирование.

  3. Задайте для раздела HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments реестра значение --remote-debugging-pipe. Для этого выполните действия, описанные в разделе Отладка выполняемых процессов выше.

  4. Убедитесь, что раздел реестра задан в редакторе и соответствует следующему:

    Установка раздела реестра AdditionalBrowserArguments в значение --remote-debugging-pipe

  5. Добавьте новую конфигурацию в launch.json файл. Откройте launch.json и добавьте следующий код:

    "name": "Attach to UWP App",
"useWebView":{
   "pipeName":"JSDebugPipe"
}
"request": "attach",
"type": "msedge",
"webRoot":"${workspaceFolder}"

  6. Запустите приложение.

  7. Нажмите кнопку Начать отладку , чтобы присоединиться к процессу и начать отладку.

    Запуск и отладка

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

Эти сценарии могут возникнуть при использовании отладчика.

Не останавливается в точке останова

Если отладчик не останавливается в точке останова и у вас есть выходные данные отладки:

Чтобы устранить эту проблему, убедитесь, что файл с точкой останова является тем же файлом, который используется элементом управления WebView2. Отладчик не выполняет сопоставление пути к источнику.

Не удается подключиться к запущенным процессам

Если не удается подключиться к выполняющийся процессу и возникает ошибка времени ожидания:

Чтобы устранить эту проблему, убедитесь, что элемент управления WebView2 открыл порт CDP. Убедитесь, что additionalBrowserArguments в реестре указано правильное значение или правильность параметров. См. раздел additionalBrowserArguments для dotnet и additionalBrowserArguments для Win32.

См. также