Depuración de complementos mediante herramientas de desarrollo en Microsoft Edge (versión anterior)

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

• No se puede depurar mediante 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 de Windows y Office que usan el control de vista web edge original, EdgeHTML.

Sugerencia

Para obtener información sobre la depuración con Edge Heredado dentro de Visual Studio Code, vea Extensión del depurador de complementos de Microsoft Office para Visual Studio Code.

Para determinar qué explorador o vista web usa, vea Exploradores y controles de vista web que usan los complementos de Office.

Sugerencia

En las versiones recientes de Office, una manera de identificar el control de vista web que usa Office es a través del menú de personalidad en cualquier complemento donde esté disponible. (El menú 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 de Windows, runtime notifica 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.

Nota:

Para instalar una versión de Office que usa la vista web heredada de Edge o para forzar que la versión actual de Office use Edge Heredado, consulte Cambiar a la vista web heredada de Edge.

Depuración de un complemento de panel de tareas mediante Microsoft Edge DevTools Preview

1. Instale la versión preliminar de Microsoft Edge DevTools. (La palabra "Versión preliminar" está en el nombre por motivos históricos. No hay una versión más reciente).

   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 al que Microsoft Edge DevTools no puede detectar ni asociar, por lo que la técnica descrita en este artículo no se puede usar para depurar código en la función.

2. Transferir localmente y ejecutar el complemento.

3. Ejecutar el DevTools de Microsoft Edge.

4. En el menú herramientas, abra la pestaña Local. El complemento se mostrará por su nombre. (Solo los procesos que se ejecutan en EdgeHTML aparecen en la pestaña . La herramienta no se puede asociar a procesos que se ejecutan en otros exploradores o vistas web, incluidos Microsoft Edge (WebView2) e Internet Explorer (Trident).

   

5. Seleccione el nombre del complemento para abrirlo en las herramientas.

6. Abra la pestaña Depurador.

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

   1. En la barra de tareas del depurador, seleccione Mostrar búsqueda en archivos. Se abrirá una ventana de búsqueda.
   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.

   

8. Para establecer un punto de interrupción, seleccione la línea en el archivo de código. El punto de interrupción se registra en el panel Pila de llamadas (parte inferior derecha). También puede haber un punto rojo por la línea en el archivo de código, pero esto no aparece de forma confiable.

9. 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, vea Herramientas de desarrollo de Microsoft Edge (EdgeHTML).

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 las herramientas deben asociarse a ese proceso. Siga estos pasos.

1. Ejecute el complemento y las herramientas.

2. Abra el cuadro de diálogo y, a continuación, seleccione el botón Actualizar en las herramientas. Se muestra el proceso de diálogo. Su nombre procede del <title> elemento del archivo HTML que está abierto en el cuadro de diálogo.

3. Seleccione el proceso para abrirlo y depurarlo tal como se describe en la sección Depuración de un complemento de panel de tareas mediante Microsoft Edge DevTools Preview.

   

Cambiar a la vista web heredada de Edge

Hay dos maneras de cambiar la vista web heredada de Edge. Puede ejecutar un comando simple en un símbolo del sistema o puede instalar una versión de Office que use Edge Legacy de forma predeterminada. Se recomienda el primer método. Pero debe usar el segundo en los escenarios siguientes.

• El proyecto se desarrolló con Visual Studio e IIS. No se basa en Node.js.
• Quiere ser absolutamente sólido en las pruebas.
• Si por algún motivo la herramienta de línea de comandos no funciona.

Cambiar a través de la línea de comandos

Si el proyecto está basado en Node.js (es decir, no desarrollado con Visual Studio e Internet Information Server (IIS)), puede forzar a Office en Windows a usar el control webview EdgeHTML proporcionado por Edge Legacy o el control webview Trident proporcionado por Internet Explorer para ejecutar complementos, incluso si tiene una combinación de versiones de Windows y Office que normalmente usarían una vista web más reciente. Para obtener más información sobre qué exploradores y vistas web usan varias combinaciones de versiones de Windows y Office, vea Exploradores y controles de vista web que usan los complementos de Office.

Nota:

La herramienta que se usa para forzar el cambio en la vista web solo se admite en el canal de suscripción Beta de Microsoft 365. Únase al programa Microsoft 365 Insider y seleccione la opción Canal beta para acceder a las compilaciones de Office Beta. Vea también Acerca de Office: ¿Qué versión de Office estoy usando?.

Estrictamente, es el webview cambio de esta herramienta (consulte el paso 2) el que requiere el canal Beta. La herramienta tiene otros modificadores que no tienen este requisito.

1. Si el proyecto no se creó con la herramienta generador de Yeoman para complementos de Office , debe instalar la herramienta office-addin-dev-settings. Ejecute el siguiente comando en un símbolo del sistema.

   npm install office-addin-dev-settings --save-dev
   

   Importante

   La herramienta office-addin-dev-settings no se admite en Mac.

2. Especifique la vista web que quiere que Office use con el siguiente comando en un símbolo del sistema en la raíz del proyecto. Reemplace por <path-to-manifest> la ruta de acceso relativa, que es solo el nombre de archivo del manifiesto si está en la raíz del proyecto. Reemplace por <webview> o ieedge-legacy. Tenga en cuenta que las opciones tienen el nombre de los exploradores en los que se originaron las vistas web. La ie opción significa "Trident" y la edge-legacy opción significa "EdgeHTML".

   npx office-addin-dev-settings webview <path-to-manifest> <webview>
   

   A continuación se muestra un ejemplo.

   npx office-addin-dev-settings webview manifest.xml ie
   

   Debería ver un mensaje en la línea de comandos que indica que el tipo de vista web ahora está establecido en IE (o Edge Legacy).

3. Cuando haya terminado, establezca Office para reanudar el uso de la vista web predeterminada para la combinación de versiones de Windows y Office con el siguiente comando.

   npx office-addin-dev-settings webview <path-to-manifest> default
   

Instalación de una versión de Office que usa Edge Heredado

Use el procedimiento siguiente para instalar una versión de Office (descargada desde una suscripción de Microsoft 365) que use la vista web de Microsoft Edge (versión anterior) (EdgeHTML) para ejecutar complementos o una versión que use Internet Explorer (Trident).

1. En cualquier aplicación de Office, abra la pestaña Archivo en la cinta de opciones y, a continuación, seleccione Cuenta de Office o Cuenta. Seleccione el botón Acerca del nombre de host (por ejemplo, Acerca de Word).

2. En el cuadro de diálogo que se abre, busque el número de compilación xx.x.xxxxx.xxxxx completo y haga una copia de él en algún lugar.

3. Descargar la Herramienta de implementación de Office.

4. Ejecute el archivo descargado para extraer la herramienta. Se le pedirá que elija dónde instalar la herramienta.

5. En la carpeta donde instaló la herramienta (donde se encuentra el setup.exe archivo), cree un archivo de texto con el nombre config.xml y agregue el siguiente contenido.

   <Configuration>
     <Add OfficeClientEdition="64" Channel="SemiAnnual" Version="16.0.xxxxx.xxxxx">
       <Product ID="O365ProPlusRetail">
         <Language ID="en-us" />
       </Product>
     </Add>
   </Configuration>
   

6. Cambie el Version valor.

   • Para instalar una versión que usa EdgeHTML, cámbiela a 16.0.11929.20946.
   • Para instalar una versión que use Trident, cámbiela a 16.0.10730.20348.

7. Opcionalmente, cambie el valor de OfficeClientEdition a "32" para instalar Office de 32 bits y cambie el Language ID valor según sea necesario para instalar Office en otro idioma.

8. Abra un símbolo del sistema como administrador.

9. Vaya a la carpeta con los setup.exe archivos y config.xml .

10. Ejecuta el siguiente comando.

    setup.exe /configure config.xml
    

    Este comando instala Office. Es posible que este proceso tarde varios minutos.

11. Borre la memoria caché de Office.

Importante

Después de la instalación, asegúrese de desactivar la actualización automática de Office, para que Office no se actualice a una versión que no use la vista web con la que desea trabajar antes de completar su uso. Esto puede ocurrir en cuestión de minutos después de la instalación. Siga estos pasos.

1. Inicie cualquier aplicación de Office y abra un nuevo documento.
2. Abra la pestaña Archivo en la cinta de opciones y, a continuación, seleccione Cuenta de Office o Cuenta.
3. En la columna Información del producto, seleccione Opciones de actualización y, a continuación, seleccione Deshabilitar Novedades. Si esa opción no está disponible, Office ya está configurado para no actualizarse automáticamente.

Cuando haya terminado de usar la versión anterior de Office, vuelva a instalar la versión más reciente editando el config.xml archivo y cambiando al Version número de compilación que copió anteriormente. A continuación, repita el setup.exe /configure config.xml comando en un símbolo del sistema de administrador. Opcionalmente, vuelva a habilitar las actualizaciones automáticas.