Depurar complementos con herramientas de desarrollador en Microsoft Edge (Chromium basados en aplicaciones)

En este artículo se muestra cómo depurar el código del lado cliente (JavaScript o TypeScript) del complemento cuando se cumplen las siguientes condiciones.

  • No puede o no desea depurar con herramientas integradas en el IDE; o se encuentra con un problema que solo se produce cuando el complemento se ejecuta fuera del IDE.
  • El equipo usa una combinación de versiones Windows y Office que usan el control de vista web perimetral (basado en Chromium), WebView2.

Sugerencia

Para obtener información sobre la depuración con Edge WebView2 (basado en Chromium) dentro de Visual Studio Code, vea Depurar complementos en Windows mediante Visual Studio Code y Microsoft Edge WebView2 (basadoen Chromium).

Para determinar qué explorador está usando, vea Exploradores usados por Office complementos.

Sugerencia

En las versiones recientes de Office, una forma de identificar el control de vista web que Office está usando es a través del menú de personalidad en cualquier complemento donde esté disponible. (El menú de personalidad no se admite en Outlook). Abra el menú y seleccione Información de seguridad. En el cuadro de diálogo Información de seguridad Windows, el tiempo de ejecución Microsoft Edge , Microsoft Edge (versión anterior) o Internet Explorer. El tiempo de ejecución no se incluye en el cuadro de diálogo en versiones anteriores de Office.

Depurar un complemento de panel de tareas con Microsoft Edge herramientas Chromium desarrolladores (basadas en Chromium)

Nota

Si el complemento tiene un comando de complemento que ejecuta una función, la función se ejecuta en un proceso de explorador oculto desde el que no se pueden iniciar las herramientas de desarrollador de Microsoft Edge (basadas en Chromium), por lo que la técnica descrita en este artículo no se puede usar para depurar código en la función.

  1. Instalación local y ejecución del complemento.

  2. Ejecute las Microsoft Edge desarrolladores de Chromium (basadas en Chromium) mediante uno de estos métodos:

    • Asegúrese de que el panel de tareas del complemento tenga el foco y presione Ctrl+Mayús+I.
    • Haga clic con el botón secundario en el panel de tareas para abrir el menú contextual y seleccione Inspeccionar, o abra el menú de personalidad y seleccione Adjuntar depurador.
  3. Abra la pestaña Orígenes.

  4. Abra el archivo que desea depurar con los pasos siguientes.

    1. En el extremo derecho de la barra de menús superior de la herramienta, seleccione el botón ... y, a continuación, seleccione Buscar.
    2. Escriba una línea de código del archivo que desea depurar en el cuadro de búsqueda. Debe ser algo que probablemente no esté en ningún otro archivo.
    3. Seleccione el botón actualizar.
    4. En los resultados de búsqueda, seleccione la línea para abrir el archivo de código en el panel encima de los resultados de búsqueda.

    Captura de pantalla de la Chromium de origen de herramientas para desarrolladores con 4 partes etiquetadas de A a D.

  5. Para establecer un punto de interrupción, seleccione el número de línea de la línea en el archivo de código. Aparece un punto rojo junto a la línea del archivo de código. En la ventana del depurador a la derecha, el punto de interrupción se registra en la lista desplegable Puntos de interrupción.

  6. Según lo necesite, ejecute funciones en el complemento para activar el punto de interrupción.

Sugerencia

Para obtener más información acerca del uso de las herramientas, vea Microsoft Edge Developer Tools overview.

Depurar un cuadro de diálogo en un complemento

Si el complemento usa la API de cuadros de diálogo de Office, el cuadro de diálogo se ejecuta en un proceso independiente del panel de tareas (si lo hay) y la herramienta debe iniciarse desde ese proceso independiente. Siga estos pasos.

  1. Ejecutar el complemento.

  2. Abra el cuadro de diálogo y asegúrese de que tiene el foco.

  3. Abra las Microsoft Edge desarrolladores de Chromium (basadas en Chromium) mediante uno de estos métodos:

    • Presione Ctrl+Mayús+I o F12.
    • Haga clic con el botón secundario en el cuadro de diálogo para abrir el menú contextual y seleccione Inspeccionar.
  4. Use la herramienta del mismo modo que lo haría para el código en un panel de tareas. Vea Depurar un complemento de panel de tareas con Microsoft Edge herramientas de desarrollador (basadas Chromium) anteriores en este artículo.