Compartir a través de

Depuración de aplicaciones WebView2 con Visual Studio Code

  • Artículo

Use Microsoft Visual Studio Code para depurar scripts que se ejecutan en controles WebView2. Visual Studio Code tiene un depurador integrado para la depuración del explorador. Consulte Depuración del explorador en VS Code.

Creación de un archivo launch.json

Para depurar el código, es necesario que el proyecto tenga un launch.json archivo. Un launch.json archivo es un archivo de configuración del depurador para configurar y personalizar el depurador de Visual Studio Code. Una de las propiedades necesarias para configurar el depurador es la request propiedad . Hay dos request tipos, launch y attach.

En el código siguiente se muestra cómo iniciar la aplicación desde Visual Studio Code (en lugar de adjuntar el depurador a una instancia en ejecución de la aplicación). Para ello, la aplicación debe haberse creado anteriormente. Si el proyecto no tiene un launch.json archivo, cree un nuevo launch.json archivo en la .vscode subcarpeta del proyecto actual y pegue el código siguiente en él:

"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"

Parámetro de dirección URL de línea de comandos pasado

La asignación de rutas de acceso de origen de Visual Studio Code ahora requiere una dirección URL, por lo que la aplicación ahora recibe un url parámetro de línea de comandos cuando se inicia. Si es necesario, puede omitir el url parámetro de forma segura.

Depuración del código

  1. Para establecer un punto de interrupción en el código fuente, haga clic en una línea de código y, a continuación, presione F9:

    Un punto de interrupción establecido en Visual Studio Code

  2. En la pestaña Ejecutar , seleccione la configuración de inicio en el menú desplegable.

  3. Haga clic en Iniciar depuración, que es el triángulo verde situado junto a la lista desplegable de configuración de inicio:

    Pestaña Ejecutar en Visual Studio Code

  4. Para ver la salida de depuración y los errores, abra la consola de depuración:

    Consola de depuración en Visual Studio Code

Depuración de WebView2 de destino

En algunas aplicaciones WebView2, puede usar más de un control WebView2. Para elegir qué control WebView2 se va a depurar en esta situación, puede usar la depuración webView2 de destino.

Abra launch.json y complete las siguientes acciones para usar la depuración webView2 de destino.

  1. Confirme que el useWebview parámetro está establecido en true.

  2. Agregue el urlFilter parámetro . Cuando el control WebView2 navega a una dirección URL, el valor del urlFilter parámetro se usa para comparar las cadenas que aparecen en la dirección 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",

Al depurar la aplicación, es posible que deba recorrer el código desde el principio del proceso de representación. Si está representando páginas web en sitios y no tiene acceso al código fuente, puede usar la ?=value opción , ya que las páginas web omiten parámetros no reconocidos.

No se pueden depurar dos controles WebView2 al mismo tiempo

Una vez que se encuentra la primera coincidencia en la dirección URL, el depurador se detiene. No se pueden depurar dos controles WebView2 al mismo tiempo, porque todos los controles WebView2 comparten el puerto CDP y usa un solo número de puerto.

Depuración de procesos en ejecución

Es posible que tenga que asociar el depurador a procesos de WebView2 en ejecución. Para ello, en launch.json, actualice el request parámetro y cambie su valor a 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

El control WebView2 debe abrir el puerto del Protocolo para desarrolladores de Chrome (CDP) para permitir la depuración del control WebView2. El código debe compilarse para asegurarse de que solo un control WebView2 tiene un puerto CDP abierto, antes de iniciar el depurador.

También debe agregar una nueva REGKEY <myApp.exe> = --remote-debugging-port=9222 en Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments, para que el depurador pueda encontrar el puerto adecuado. Para agregar esta clave del Registro:

  1. Presione la tecla del logotipo de Windows y busque el editor del Registro. Abra la aplicación Editor del Registro y haga clic en Sí para permitir la edición.

  2. En el árbol de carpetas de la izquierda, intente expandir HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments.

  3. Si la \Edge\WebView2\AdditionalBrowserArguments parte de esa ruta de acceso no existe, cree esas tres subcarpetas anidadas, como se indica a continuación:

    1. Para crear la \Edge subcarpeta: en el árbol de carpetas, haga clic con el botón derecho en la carpeta, mantenga el HKEY_CURRENT_USER\Software\Policies\Microsoft puntero sobre Nuevo y, a continuación, seleccione Clave. Se agrega una carpeta como elemento secundario de la Microsoft carpeta, inicialmente denominada New Key #1. Haga clic con el botón derecho en la New Key #1 carpeta y, a continuación, seleccione Cambiar nombre. Escriba Edge el nombre de la nueva clave.

    2. Cree la \WebView2 subcarpeta, como en el paso anterior.

    3. Cree la \AdditionalBrowserArguments subcarpeta, como en el paso anterior.

      El árbol ahora se expande a HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments.

  4. Haga clic con el botón derecho en la AdditionalBrowserArguments carpeta, mantenga el puntero sobre Nuevo y, a continuación, seleccione Valor de cadena. En la columna Nombre , haga clic con el botón derecho en New Value #1, seleccione Cambiar nombre y escriba el nombre de archivo del archivo ejecutable de la aplicación, como myApp.exe.

  5. En la columna Nombre , haga clic con el botón derecho en el nombre de archivo ejecutable, como myApp.exey, a continuación, seleccione Modificar. Se abre el cuadro de diálogo Editar cadena .

  6. En el cuadro de texto Datos de valor, escriba --remote-debugging-port=9222:

    Cuadro de diálogo

  7. Haga clic en el botón Aceptar y compruebe que la clave del Registro coincide con lo siguiente (con el nombre de archivo del .exe archivo en la columna Nombre ):

    La clave del Registro resultante en el Editor del Registro

Opciones de seguimiento de depuración

Para habilitar el seguimiento de depuración, agregue el trace parámetro a , como se indica a launch.json continuación:

  1. Agregue el trace parámetro :
"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.

Guardar la salida de depuración en un archivo de registro:

Guardar la salida de depuración en un archivo de registro 

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

Salida de depuración de Visual Studio Code con el seguimiento detallado activado:

Salida de depuración de Visual Studio Code con el seguimiento detallado activado

Depurar complementos de Office

Si va a depurar complementos de Office, abra el código fuente del complemento en una instancia independiente de Visual Studio Code. Abra launch.json en la aplicación WebView2. Agregue el código siguiente a launch.json, para asociar el depurador al complemento de Office:

,"debugServer": 4711

Depuración de aplicaciones De WebView2 WinUI 2 (UWP)

  1. Instale una versión de WebView2 Runtime después de 106.0.1370.34.

  2. Abra el Editor del Registro presionando la tecla del logotipo de Windows y, a continuación, buscando el editor del Registro. Abra la aplicación Editor del Registro y seleccione Sí para permitir la edición.

  3. Establezca la clave HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments del Registro en .--remote-debugging-pipe Para ello, siga los pasos descritos anteriormente en la sección Depurar procesos en ejecución .

  4. Compruebe que la clave del Registro está establecida en el editor y coincide con lo siguiente:

    Establecer la clave del Registro AdditionalBrowserArguments en --remote-debugging-pipe

  5. Agregue una nueva configuración al launch.json archivo. Abra launch.json y agregue el código siguiente:

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

  6. Inicie la aplicación.

  7. Haga clic en el botón Iniciar depuración para asociarlo al proceso e iniciar la depuración.

    Ejecución y depuración

Solución de problemas del depurador

Puede encontrar estos escenarios al usar el depurador.

No se detiene en el punto de interrupción

Si el depurador no se detiene en el punto de interrupción y tiene la salida de depuración:

Para solucionar el problema, confirme que el archivo con el punto de interrupción es el mismo archivo que usa el control WebView2. El depurador no realiza la asignación de rutas de acceso de origen.

No se puede asociar al proceso en ejecución

Si no se puede asociar a un proceso en ejecución y se obtiene un error de tiempo de espera:

Para solucionar el problema, confirme que el control WebView2 abrió el puerto CDP. Asegúrese de que el valor del Registro es correcto o de que additionalBrowserArguments las opciones son correctas. Consulta additionalBrowserArguments para dotnet y additionalBrowserArguments para Win32.

Vea también