Extensión del Depurador de complementos de Microsoft Office para Visual Studio Code

  • Artículo

Los complementos de Office que se ejecutan en Windows pueden usar la extensión del depurador de complementos de Office en Visual Studio Code para depurar en Microsoft Edge (versión anterior) con el entorno de ejecución original de WebView (EdgeHTML).

Importante

Este artículo solo se aplica cuando Office ejecuta complementos en el entorno de ejecución original de WebView (EdgeHTML), como se explica en Exploradores y controles de vista web que usan los complementos de Office. Para obtener instrucciones sobre la depuración en Visual Studio Code con Microsoft Edge WebView2 (basado en Chromium), consulte Extensión del depurador de complementos de Microsoft Office para obtener Visual Studio Code.

Sugerencia

Si no puede depurar con herramientas integradas en Visual Studio Code o si no lo desea, o si encuentra un problema que solo se produce cuando el complemento se ejecuta fuera de Visual Studio Code, puede depurar el entorno de ejecución de Edge Legacy (EdgeHTML) mediante las herramientas para desarrolladores heredadas de Edge, como se describe en Depuración de complementos con herramientas para desarrolladores en Microsoft Edge (versión anterior).

Este modo de depuración es dinámico, lo que permite establecer puntos de interrupción mientras se ejecuta el código. Puede ver los cambios en el código inmediatamente mientras se adjunta el depurador, todo ello sin perder la sesión de depuración. Los cambios de código también persisten, por lo que puede ver los resultados de varios cambios en el código. La siguiente imagen muestra esta extensión en acción.

La extensión de depurador del complemento de Office depura una sección de complementos de Excel.

Requisitos previos

Instalar y usar el depurador

En estas instrucciones se supone que tiene experiencia en el uso de la línea de comandos, que comprende JavaScript básico y que ha creado un proyecto de complemento de Office antes de usar el generador de Yeoman para complementos de Office. Si no lo ha hecho antes, considere la posibilidad de visitar uno de nuestros tutoriales, como este tutorial de complemento de Office de Excel.

  1. El primer paso depende del proyecto y de cómo se creó.

    • Si desea crear un proyecto para experimentar con la depuración en Visual Studio Code, use el generador de Yeoman para complementos de Office. Use cualquiera de nuestras guías de inicio rápido, como el inicio rápido del complemento de Outlook, para hacerlo.
    • Si desea depurar un proyecto existente que se creó con Yo Office, vaya al paso siguiente.
    • Si desea depurar un proyecto existente que no se creó con Yo Office, realice el procedimiento en el Apéndice y vuelva al paso siguiente de este procedimiento.

  2. Abra VS Code y abra el proyecto en él.

  3. En VS Code, seleccione Ctrl+Mayús+X para abrir la barra extensiones. Busque la extensión "Depurador de complementos de Microsoft Office" e instálela.

  4. Elija Ver>ejecutar o escriba Ctrl+Mayús+D para cambiar a la vista de depuración.

  5. En las opciones EJECUTAR Y DEPURAR , elija la opción Edge Legacy para la aplicación host, como Outlook Desktop (Edge Legacy). Seleccione F5 o elija Ejecutar>iniciar depuración en el menú para comenzar la depuración. Esta acción inicia automáticamente un servidor local en una ventana de Nodo para hospedar el complemento y, a continuación, abre de forma automática la aplicación host, como Excel o Word. Esto podría tardar varios segundos.

  6. El complemento ya estará listo para usarse en la aplicación host. Seleccione Mostrar panel de tareas o ejecute cualquier otro comando de complemento. Un cuadro de diálogo aparecerá similar al siguiente:

    Detención de WebView en carga. Para depurar WebView, adjunte VS Code a la instancia de WebView mediante la extensión Microsoft Debugger for Edge y haga clic en Aceptar para continuar. Para evitar que este cuadro de diálogo aparezca en el futuro, haga clic en Cancelar.

    Seleccione Aceptar.

    Nota:

    Si selecciona Cancelar, no se volverá a mostrar el cuadro de diálogo mientras se esté ejecutando esta instancia del complemento. Sin embargo, si reinicia el complemento, verá el cuadro de diálogo de nuevo.

  7. Establezca un punto de interrupción en el archivo del panel de tareas del proyecto. Para establecer puntos de interrupción en Visual Studio Code, mantenga el ratón junto a una línea de código y seleccione el círculo rojo que aparece.

    El círculo rojo aparece en una línea de código en Visual Studio Code.

  8. Ejecute la funcionalidad en el complemento que llama a las líneas con puntos de interrupción. Verá que los puntos de interrupción se han alcanzado y puede inspeccionar variables locales.

    Nota:

    Se omiten los puntos de interrupción en llamadas de Office.initialize o Office.onReady. Para obtener más información sobre estos métodos, vea Iniciar el complemento de Office.

Importante

La mejor manera de detener una sesión de depuración es seleccionar Mayús+F5 o elegir Ejecutar>detener depuración en el menú. Esta acción cerrará la ventana del servidor de Node e intentará cerrar la aplicación host, pero aparecerá un mensaje en la aplicación host que le preguntará si desea guardar el documento. Elija la opción más adecuada y deje que se cierre la aplicación host. Evite cerrar manualmente la ventana Node o la aplicación host. Esto podría producir errores, especialmente cuando se detienen e inician de forma reiterada las sesiones de depuración.

Si la depuración deja de funcionar; por ejemplo, si se omiten los puntos de interrupción; detenga la depuración. A continuación, si es necesario, cierre todas las ventanas de la aplicación host y la ventana Nodo. Por último, cierre Visual Studio Code y vuelva a abrirlo.

Apéndice

Si el proyecto no se creó con Yo Office, debe crear una configuración de depuración para Visual Studio Code.

  1. Cree un archivo denominado launch.json en la carpeta \.vscode del proyecto si aún no hay uno.

  2. Asegúrese de que el archivo tiene una matriz configurations. A continuación se muestra un ejemplo sencillo de un launch.json.

    {
  // Other properties may be here.

  "configurations": [

    // Configuration objects may be here.

  ]

  // Other properties may be here.
}

  3. Agregue el siguiente objeto a la matriz configurations.

    {
  "name": "HOST Desktop (Edge Legacy)",
  "type": "office-addin",
  "request": "attach",
  "url": "https://localhost:3000/taskpane.html?_host_Info=HOST$Win32$16.01$en-US$$$$0",
  "port": 9222,
  "timeout": 600000,
  "webRoot": "${workspaceRoot}",
  "preLaunchTask": "Debug: HOST Desktop",
  "postDebugTask": "Stop Debug"
}

  4. Reemplace el marcador de posición HOST en los tres lugares por el nombre de la aplicación de Office en la que se ejecuta el complemento; por ejemplo, Outlook o Word.

  5. Guarde y cierre el archivo.

Vea también