Compartir a través de

Depuración de aplicaciones WebView2 con Visual Studio

  • Artículo

Microsoft Visual Studio proporciona varias herramientas de depuración para código nativo y web en aplicaciones WebView2, para depurar código web y nativo en aplicaciones Win32 o complementos de Office. Este artículo se centra en la depuración de controles WebView2. Los demás métodos de depuración en Visual Studio también están disponibles.

Abra DevTools con un enfoque distinto de F12

Al depurar la aplicación en Visual Studio con el depurador nativo asociado, al presionar F12 se puede desencadenar el depurador nativo en lugar de Herramientas de desarrollo. Para evitar esa situación, presione Ctrl+Mayús+I. O bien, haga clic con el botón derecho en la página y seleccione Inspect.

Requisitos

  • Para depurar scripts, la aplicación debe iniciarse desde Visual Studio.

  • No se puede asociar un depurador a un proceso WebView2 en ejecución.

  • Instale Visual Studio 2019, versión 16.4, versión preliminar 2 o posterior.

Para depurar el código, instale y configure primero las herramientas del depurador de scripts en Visual Studio, según las dos secciones siguientes.

Instalación del componente de diagnóstico de JavaScript

En primer lugar, instale el componente de diagnóstico de JavaScript en Desarrollo de escritorio con C++, como se indica a continuación.

  1. En la barra del Explorador de Windows, escriba Visual Studio Installer.

  2. Seleccione Instalador de Visual Studio para abrirlo.

  3. En la Instalador de Visual Studio, en la versión instalada, haga clic en el botón Más y, a continuación, seleccione Modificar.

  4. En Visual Studio, en Cargas de trabajo, seleccione la opción Desarrollo de escritorio con C++ :

    Pantalla De modificación de cargas de trabajo de Visual Studio

  5. Seleccione Componentes individuales, en la parte superior.

  6. En el cuadro de búsqueda, escriba JavaScript diagnostics.

  7. Seleccione la configuración de diagnóstico de JavaScript .

  8. Haga clic en Modificar.

    Visual Studio: Modificación de valores en la pestaña

Habilitación de la depuración de scripts para aplicaciones WebView2

En segundo lugar, habilite la depuración de scripts para aplicaciones WebView2, como se indica a continuación.

  1. Haga clic con el botón derecho en el proyecto WebView2 y, a continuación, seleccione Propiedades.

  2. En Propiedades de configuración, seleccione Depuración.

  3. En Tipo de depurador, seleccione JavaScript (WebView2).

    La propiedad de configuración

Depuración de la aplicación WebView2

Después de realizar la configuración anterior, depure la aplicación WebView2, como se indica a continuación.

  1. Para establecer un punto de interrupción en el código fuente, mantenga el puntero a la izquierda del número de línea y haga clic para establecer un punto de interrupción. El adaptador de depuración JS/TS no realiza la asignación de rutas de acceso de origen. Debe abrir exactamente la misma ruta de acceso asociada a WebView2.

    Adición de un punto de interrupción en Visual Studio

  2. Para ejecutar el depurador, seleccione el tamaño de bits de la plataforma y, a continuación, haga clic en el botón verde Reproducir situado junto a Depurador local de Windows. La aplicación se ejecuta y el depurador se conecta al primer proceso WebView2 que se crea.

    Depurador local de Windows en Visual Studio

  3. En la consola de depuración, busque la salida del depurador.

    Consola de depuración en Visual Studio

Solución de problemas

La asignación de rutas de acceso de origen virtual no se admite en Visual Studio 2019

Si usa el método SetVirtualHostNameToFolderMapping de WebView2, el depurador de Visual Studio 2019 no entiende la asignación de rutas de acceso de origen virtual, por lo que los puntos de interrupción no funcionan correctamente.

La asignación de rutas de acceso de origen virtual funciona cuando se usa el depurador en Visual Studio Code.

Vea también