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

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

Подробное содержание:

Введение

Используйте 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": {
   // The following variable is needed when the "runtimeExecutable" property is set.
   // The port number below must match the value of the "port" property above.
   "WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS": "--remote-debugging-port=9222"
   // Customize for your app location.
   "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 containing all your code files.
"url": "file:///${workspaceFolder}/path/to/your/toplevel/foo.html",
"webRoot": "${workspaceFolder}/path/to/your/assets"

Использование значения реестра

Вместо установки WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS переменной среды вы можете добавить новое значение реестра с именем <myApp.exe> "data --remote-debugging-port=9222 " в раздел Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArgumentsреестра , чтобы отладчик мог найти правильный порт. Дополнительные сведения см. в статье Флаги браузера WebView2.

Передаваемый параметр 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.json, обновите параметр, изменив request его значение на 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; "
}

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

Также необходимо добавить новый раздел <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. В столбце Name щелкните правой кнопкой мыши имя исполняемого файла, например , myApp.exeа затем выберите Modify. Откроется диалоговое окно "Изменение строки ".

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

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

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

    Полученный раздел реестра в редакторе реестра

Использование переменной среды

Вместо добавления указанного выше раздела реестра можно установить WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS переменную среды в --remote-debugging-port=9222. Убедитесь, что приложение запускается после установки переменной среды и что приложение наследует переменную среды. Дополнительные сведения см. в статье Флаги браузера WebView2.

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

Чтобы включить трассировку отладки, добавьте 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 в области DEBUG CONSOLE с включенной подробной трассировкой:

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

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

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

,"debugServer": 4711

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

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

  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. Нажмите кнопку Start Debugging , чтобы подключиться к процессу и начать отладку.

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

Сопоставление источника с сопоставлением WebResourceRequested имени события или виртуального узла

Карты исходного кода нужны для отладки исходного кода скомпилированного контента, включая:

  • Транспилированный JavaScript, например TypeScript или минифицированный JavaScript.
  • Скомпилированный CSS, например SASS или SCSS.

WebView2 не загружает исходные карты, на которые ссылается содержимое, загруженное с помощью любого из подходов:

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

При использовании отладчика вы можете столкнуться с такими сценариями.

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

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

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

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

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

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

См. также

  • Последнее обновление: