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.

Resumen de los pasos de alto nivel

Para depurar código JavaScript en un control WebView2:

  1. Instale el componente de diagnóstico de JavaScript en la carga de trabajo Desarrollo de escritorio con C++ de Visual Studio o en la carga de trabajo de otra plataforma.

  2. Establezca un punto de interrupción en una línea de código JavaScript.

  3. En la páginaDepuración de propiedades> del proyecto, establezca Tipo de depurador en JavaScript (WebView2) (en lugar de Auto o Nativo).

  4. Inicie el depurador, como de costumbre. Por ejemplo, en la barra de menús, seleccione Depurar>iniciar depuración (F5).

  5. En la aplicación WebView2 en ejecución, interactúe con una página web que ejecute el código JavaScript. El depurador se detiene en la línea de código JavaScript que tiene el punto de interrupción.

  6. Use los paneles del depurador en Visual Studio.

Estos pasos se detallan a continuación, con el ejemplo principal de Win32/C++ (WebView2APISample).

Requisitos

  • Clone el repositorio WebView2Samples si desea seguir los pasos de ejemplo específicos que se indican a continuación (con el ejemplo principal de Win32/C++, WebView2APISample). En un paso siguiente se muestra cómo hacerlo.

  • Instale Visual Studio 2022. Puede usar Visual Studio 2022 para trabajar con las aplicaciones de ejemplo WebView2 y su propia aplicación WebView2. (Visual Studio 2019 también funciona). En un paso siguiente se muestra cómo hacerlo.

  • Instale y configure las herramientas del depurador de scripts en Visual Studio. Es decir, instale la carga de trabajo Desarrollo de escritorio con C++ de Visual Studio (o la carga de trabajo equivalente para un lenguaje diferente), incluido su componente de diagnóstico de JavaScript . En un paso siguiente se muestra cómo hacerlo.

  • Compile y ejecute el ejemplo principal de Win32/C++, para que la aplicación WebView2APISample se compile y ejecute (si desea seguir los pasos de ejemplo específicos que se indican a continuación). En un paso siguiente se muestra cómo hacerlo.

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

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

Instalación del componente de diagnóstico de JavaScript

Use la Instalador de Visual Studio para instalar la carga de trabajo Desarrollo de escritorio con C++ de Visual Studio, incluido su componente de diagnóstico de JavaScript, como se indica a continuación. O bien, si usa una carga de trabajo de lenguaje distinta de C++, seleccione el componente de diagnóstico de JavaScript de esa carga de trabajo, de forma similar a los pasos siguientes.

  1. Si aún no lo ha hecho, clone el repositorio WebView2Samples, como se describe en Clonación del repositorio WebView2Samples en Configuración del entorno de desarrollo para WebView2.

  2. Si aún no lo ha hecho, instale Visual Studio 2022, como se describe en Instalación de Visual Studio en Configuración del entorno de desarrollo para WebView2.

  3. En Visual Studio 2022, instale la carga de trabajo Desarrollo de escritorio con C++ , como se indica a continuación:

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

  5. Seleccione Instalador de Visual Studio para abrirlo.

  6. 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.

  7. En Visual Studio, en Cargas de trabajo, seleccione la carga de trabajo Desarrollo de escritorio con C++ , para que aparezca una marca de verificación:

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

  8. Seleccione Componentes individuales, en la parte superior.

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

  10. Active la casilla diagnósticos de JavaScript :

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

  11. Haga clic en el botón Modificar .

Continúe con la siguiente sección, a continuación.

Selección del depurador de JavaScript (WebView2)

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

  1. Si aún no lo ha hecho, siga los pasos de la aplicación de ejemplo Win32 para que la aplicación WebView2APISample se compile y se ejecute. La solución WebView2Samples debe estar abierta en Visual Studio y la aplicación de ejemplo no debe estar en ejecución. O bien, abra su propio proyecto de aplicación WebView2 en Visual Studio.

  2. En Visual Studio, en Explorador de soluciones, haga clic con el botón derecho en el proyecto WebView2APISample (o en su propio proyecto) y, a continuación, seleccione Propiedades.

    Se abre el cuadro de diálogo Páginas de propiedades.

  3. A la izquierda, expanda Propiedades de configuración y, a continuación, seleccione Depuración.

  4. A la derecha de Tipo de depurador, seleccione JavaScript (WebView2) y, a continuación, haga clic en el botón Aceptar :

    La propiedad

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. Por ejemplo, abra WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.jsy establezca un punto de interrupción en la línea 2: console.log("onAddClick+");, en el cuerpo de la onAddClick función:

    Ejecución del depurador local de Windows en Visual Studio

    Al establecer un punto de interrupción, debe abrir el archivo que se encuentra en la misma ruta de acceso que está asociada al control WebView2, ya que el adaptador de depuración JS/TS no realiza la asignación de rutas de acceso de origen.

    El punto de interrupción se desencadenará cuando se ejecute esta sección del código. Este punto de interrupción se desencadena al hacer clic en el botón Agregar un nuevo elemento de la aplicación de ejemplo, en un paso posterior a continuación.

  2. Seleccione el tamaño de bits de la plataforma, como x64.

  3. Para ejecutar el depurador, haga lo siguiente:

    • En la barra de menús, seleccione Depurar>iniciar depuración (F5).
    • En Explorador de soluciones, haga clic con el botón derecho en el proyecto >Depurar>Nueva instancia o Paso a paso por nueva instancia.
    • Haga clic en el botón verde Reproducir situado a la izquierda de Depurador local de Windows.

    La aplicación WebView2APISample (o su propia aplicación) se ejecuta y se abre, y el depurador se conecta al primer proceso WebView2 que se crea. EnDepuración depropiedades> para el proyecto, Local Windows Debugger se estableció en JavaScript (WebView2).

  4. En Visual Studio, haga clic en la pestaña Salida , en la esquina inferior derecha.

    La pestaña contiene solo el siguiente mensaje, que menciona al depurador de JS: "Los registros detallados se escriben en: C:\Users\myUsername\AppData\Local\Temp\visualstudio-js-debugger.txt".

  5. En la ventana de la aplicación WebView2APISample, seleccione Scenario Script Debugging JavaScript Local File (Escenario>de depuración de> scriptsde archivo local de JavaScript).

    El archivo WebView2APISample/Debug/x64/assets/ScenarioJavaScriptDebugIndex.html se representa:

    Archivo HTML representado

  6. En Visual Studio, examine el panel Salida . Se ha agregado la siguiente salida:

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

  7. En la página web de la aplicación, haga clic en el botón emergente Agregar un nuevo elemento .

    Se alcanza el punto de interrupción de la onAddClick función y la aplicación se pausa en el depurador.

  8. Cambie a la ventana de Visual Studio y examine los paneles del depurador.

  9. Haga clic en la pestaña Salida para mostrar la salida de la aplicación:

    Pestaña Salida en Visual Studio 2022 que muestra la salida del depurador

    La salida de la aplicación muestra "Esta es la primera línea de código que se ejecuta", debido a la línea console.log("This is the very first line of code that executes."); del archivo WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.html.

Solución de problemas

Abra DevTools con un enfoque distinto de F12

Al depurar la aplicación en Visual Studio con el depurador nativo asociado, al ver la aplicación en ejecución, al presionar F12 podría iniciar el depurador nativo en lugar de iniciar Herramientas de desarrollo.

Para abrir DevTools, presione Ctrl+Mayús+I. O bien, haga clic con el botón derecho en la página de la aplicación en ejecución y, a continuación, seleccione Inspect.

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.

Al establecer un punto de interrupción, debe abrir el archivo que se encuentra en la misma ruta de acceso que está asociada al control WebView2, ya que el adaptador de depuración JS/TS no realiza la asignación de rutas de acceso de origen.

El depurador admite la asignación de rutas de acceso de origen virtual en Visual Studio Code.

Vea también