Compartir a través de


Depuración de complementos mediante herramientas de desarrollo en Microsoft Edge

En este artículo se muestra cómo depurar el código del lado cliente (JavaScript o TypeScript) del complemento fuera del IDE actual.

Depuración de un complemento de panel de tareas mediante herramientas para desarrolladores de Microsoft Edge

Nota:

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

  1. Transferir localmente y ejecutar el complemento.

    Nota:

    Para transferir localmente un complemento en Outlook, vea Transferir localmente complementos de Outlook para realizar pruebas.

  2. Ejecute las herramientas de desarrollo de Microsoft Edge mediante uno de estos métodos:

    • Asegúrese de que el panel de tareas del complemento tiene el foco y presione Ctrl+Mayús+I.
    • Haga clic con el botón derecho (o mantenga presionado) el panel de tareas para abrir el menú contextual y seleccionar Inspeccionar, o bien abra el menú personalidad y seleccione Asociar depurador. (El menú personalidad no se admite en Outlook).

    Nota:

    El nuevo cliente de escritorio de Outlook en Windows no admite el menú contextual ni el método abreviado de teclado para acceder a las herramientas de desarrollo de Microsoft Edge. En su lugar, debe ejecutar desde olk.exe --devtools un símbolo del sistema. Para obtener más información, vea la sección "Depurar el complemento" de Desarrollo de complementos de Outlook para el nuevo Outlook en Windows.

  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 no es probable que esté en ningún otro archivo.
    3. Seleccione el botón actualizar.
    4. En los resultados de la búsqueda, seleccione la línea para abrir el archivo de código en el panel situado encima de los resultados de la búsqueda.

    Pestaña de origen de las herramientas para desarrolladores perimetrales con 4 elementos etiquetados 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 por la línea del archivo de código. En la ventana del depurador de 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 sobre el uso de las herramientas, consulte Introducción a Las herramientas de desarrollo de Microsoft Edge.

Depuración de un cuadro de diálogo en un complemento

Si el complemento usa la API de diálogo de Office, el cuadro de diálogo se ejecuta en un proceso independiente del panel de tareas (si existe) 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 herramientas de desarrollo de Microsoft Edge mediante uno de estos métodos:

    • Presione Ctrl+Mayús+I o F12.
    • Haga clic con el botón derecho (o mantenga presionado) el cuadro de diálogo para abrir el menú contextual y seleccionar Inspeccionar.
  4. Use la herramienta igual que lo haría para el código en un panel de tareas. Consulte Depuración de un complemento de panel de tareas mediante las herramientas de desarrollo de Microsoft Edge anteriormente en este artículo.

Abrir automáticamente las herramientas de desarrollo de Microsoft Edge para depurar la inicialización

Para depurar la secuencia de inicialización del complemento, configure el entorno para que las herramientas de desarrollo de Microsoft WebView2 se abran automáticamente cuando se inicie el complemento.

  1. Cierre la aplicación de Office donde tiene previsto depurar el complemento.
  2. Establezca la variable de WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS entorno para incluir el valor --auto-open-devtools-for-tabs.
  3. Abra la aplicación de Office.
  4. Ejecutar el complemento.
  5. Las herramientas de desarrollo de Microsoft Edge deben abrirse automáticamente. Use la herramienta de la misma manera que lo haría al depurar un panel de tareas, como se especifica en Depurar un complemento de panel de tareas mediante herramientas para desarrolladores de Microsoft Edge.

Nota:

Es posible que vea otras instancias de la apertura automática de la herramienta para desarrolladores de Microsoft Edge, ya que esta variable de entorno afectará a todas las instancias de WebView2 del sistema.