Introducción a la depuración de aplicaciones webView2

Use Microsoft Edge Developer Tools para depurar el contenido web que se muestra en los controles WebView2, del mismo modo que puede depurar para otra página web que se muestra en Microsoft Edge. Para abrir DevTools, establezca el foco en el control WebView y, a continuación, use una de las siguientes acciones.

• Seleccione F12.
• Seleccione Ctrl + Shift + I .
• Abra el menú contextual (haga clic con el botón secundario) y elija Inspect .

Para obtener más información, vaya a DevTools overview.

Visual Studio proporciona varias herramientas de depuración para código web y nativo en aplicaciones webView2. En la Visual Studio, el foco principal es la depuración de controles WebView, pero los demás métodos de depuración de Visual Studio están disponibles como de costumbre. Use el siguiente proceso para depurar código web y nativo en aplicaciones de Win32 o solo Office complementos.

Antes de comenzar, asegúrese de que se cumplen los siguientes requisitos.

• Para depurar scripts, la aplicación debe iniciarse desde dentro de Visual Studio.
• No puede adjuntar un depurador a un proceso webView2 en ejecución.
• Instale Visual Studio versión 16.4 preview 2 o posterior de 2019.

Instale y configure las herramientas del depurador de scripts en Visual Studio.

1. Complete las siguientes acciones para instalar el componente de diagnóstico de JavaScript en el desarrollo de escritorio con C++.

   1. En la barra Windows Explorer, escriba Visual Studio Installer .

   2. Elija Instalador de Visual Studio para abrirlo.

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

   4. En Visual Studio, en Cargas de trabajo, elija la configuración Desarrollo de escritorio en C++.

      

      Visual Studio pantalla Modificar cargas de trabajo
      

   5. Elija Componentes individuales.

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

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

   8. Elija Modificar.

      

      Visual Studio modificar componentes individuales

2. Habilitar la depuración de scripts para aplicaciones webView2.

   1. En el proyecto WebView2, abra el menú contextual (haga clic con el botón secundario) y elija Propiedades.

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

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

      

      Visual Studio de depuración de propiedades de configuración

Complete las siguientes acciones para depurar la aplicación WebView2.

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

   

   Visual Studio agregar punto de interrupción

2. Para ejecutar el depurador, elija el tamaño de bits de la plataforma y, a continuación, elija el botón de reproducción verde junto a Local Windows Debugger. La aplicación se ejecuta y el depurador se conecta al primer proceso de WebView2 que se crea.

   

   Visual Studio depurador de Windows local

3. En la Consola de depuración, busque el resultado del depurador.

   

   Visual Studio de depuración

Use Microsoft Visual Studio code para depurar scripts que se ejecutan en controles WebView2.

En Visual Studio Code, realice las siguientes acciones para depurar el código.

1. Es necesario que el proyecto tenga un launch.json archivo. Si el proyecto no tiene un archivo, copie el siguiente fragmento de código launch.json y cree un nuevo launch.json archivo.

       "name": "Hello debug world",
       "type": "pwa-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 setup 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"
   

   Nota

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

2. Para establecer un punto de interrupción en el código fuente, mantenga el mouse en la línea y seleccione F9

   

   El punto de interrupción se establece en Visual Studio Code

3. Ejecute el código.

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

   2. Para empezar a depurar la aplicación, elija Iniciar depuración, que es el triángulo verde junto a la lista desplegable de configuración de inicio.

      

      Visual Studio Code ejecutar

4. Abra la Consola de depuración para ver el resultado de depuración y los errores.

   

   Visual Studio Code de depuración

Opciones Configuración:

• Depuración de vista web dirigida.

  En algunas aplicaciones webView2, puede usar más de un control WebView2. Para elegir el control WebView2 para depurar en esta situación, puede usar la depuración de webview2 dirigida

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

  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 parámetro se usa para comparar las cadenas que urlFilter aparecen en la dirección URL.

  "useWebview": "true",
  "urlFilter": "*index.ts",
  
  // Other urlFilter options.
  
  urlFilter="*index.ts"    // Match any url that ends with index.ts, and ignore all leading characters.
  urlFilter="*index*"      // Match any url that contains the string index anywhere in the URL.
  urlFilter="file://C:/path/to/my/index.ts," // To match explicit file called index.ts.
  

  Al depurar la aplicación, es posible que deba pasar por 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 opción, ya que las páginas web omiten parámetros no ?=value  reconocidos.

  Importante

  Después de encontrar la primera coincidencia en la dirección URL, el depurador se detiene. No puede depurar dos controles WebView2 al mismo tiempo porque todos los controles WebView2 comparten el puerto CDP y usan un único número de puerto.

• Depurar procesos en ejecución

  Es posible que deba adjuntar el depurador a los procesos de WebView2 en ejecución. Para ello, en launch.json , actualice el parámetro a request attach .

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

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

• Opciones de seguimiento de depuración

  Agregue el trace parámetro a launch.json para habilitar el seguimiento de depuración.

  1. Parámetro trace Add.

     "name": "Hello debugging world",
     "type": "pwa-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 resultados de depuración en un archivo de registro :::image-end:::

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

     

     Visual Studio Code salida de depuración con seguimiento detallado activado :::image-end:::

• Depurar Office complementos.

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

  ,"debugServer": 4711
  

• Solución de problemas del depurador

  Es posible que encuentre los siguientes escenarios al usar el depurador.

  • El depurador no se detiene en el punto de interrupción y tiene resultados 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 ruta de acceso de origen.
  • No se puede adjuntar a un proceso en ejecución y se produce un error de tiempo de espera. Para solucionar el problema, confirme que el control WebView2 abrió el puerto CDP. Asegúrese de  additionalBrowserArguments  que el valor del Registro es correcto o de que las opciones son correctas. Para obtener más información, vaya a additionalBrowserArguments para dotnet y additionalBrowserArguments para Win32.