Depuración de complementos mediante herramientas para desarrolladores en Internet Explorer

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 webview de Internet Explorer, Trident.

Para determinar qué explorador o vista web se usa en el equipo, consulte 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 notificaMicrosoft Edge, Microsoft Edge Heredado 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 Trident o para forzar que la versión actual use Trident, vea Cambiar a la vista web trident.

Depuración de un complemento de panel de tareas mediante las herramientas F12

Windows 10 y 11 incluyen una herramienta de desarrollo web denominada "F12" porque se inició originalmente presionando F12 en Internet Explorer. F12 es ahora una aplicación independiente que se usa para depurar el complemento cuando se ejecuta en el control webview de Internet Explorer, Trident. La aplicación no está disponible en versiones anteriores de Windows.

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 las herramientas F12 no pueden 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.

Los pasos siguientes son las instrucciones para depurar el complemento. Si solo quiere probar las propias herramientas de F12, consulte Complemento de ejemplo para probar las herramientas F12.

1. Transferir localmente y ejecutar el complemento.

2. Inicie las herramientas de desarrollo F12 correspondientes a la versión de Office.

   • Para la versión de Office de 32 bits, use C:\Windows\System32\F12\IEChooser.exe
   • Para la versión de Office de 64 bits, use C:\Windows\SysWOW64\F12\IEChooser.exe

   IEChooser se abre con una ventana denominada Elegir destino para depurar. El complemento aparecerá en la ventana denominada por el nombre de archivo de la página principal del complemento. En la captura de pantalla siguiente, es Home.html. Solo aparecen los procesos que se ejecutan en Internet Explorer o Trident. La herramienta no se puede asociar a procesos que se ejecutan en otros exploradores o vistas web, incluido Microsoft Edge.

   

3. Seleccione el proceso del complemento; es decir, su nombre de archivo de página principal. Esta acción adjuntará las herramientas F12 al proceso y abrirá la interfaz de usuario principal de F12.

4. Abra la pestaña Depurador.

5. En la parte superior izquierda de la pestaña, justo debajo de la cinta de herramientas del depurador, hay un pequeño icono de carpeta. Seleccione esta opción para abrir una lista desplegable de los archivos del complemento. A continuación se muestra un ejemplo.

   

6. Seleccione el archivo que desea depurar y se abre en el panel script (izquierda) de la pestaña Depurador . Si usa un transpilador, bundler o minifier que cambia el nombre del archivo, tendrá el nombre final que se carga realmente, no el nombre del archivo de origen original.

7. Desplácese hasta una línea donde desee establecer un punto de interrupción y haga clic en el margen situado a la izquierda del número de línea. Verá un punto rojo a la izquierda de la línea y aparecerá una línea correspondiente en la pestaña Puntos de interrupción del panel inferior derecho. La captura de pantalla siguiente es un ejemplo.

   

8. Según lo necesite, ejecute funciones en el complemento para activar el punto de interrupción. Cuando se alcanza el punto de interrupción, aparece una flecha que apunta a la derecha en el punto rojo del punto de interrupción. La captura de pantalla siguiente es un ejemplo.

   

Sugerencia

Para obtener más información sobre el uso de las herramientas F12, vea Inspeccionar la ejecución de JavaScript con el depurador.

Complemento de ejemplo para probar las herramientas F12

En este ejemplo se usa Word y un complemento gratuito de AppSource.

1. Abra Word y seleccione un documento en blanco.
2. SeleccioneComplementos de inicio> y, a continuación, seleccione Obtener complementos.
3. En el cuadro de diálogo Complementos de Office , seleccione la pestaña STORE .
4. Seleccione el complemento QR4Office . Se abre en un panel de tareas.
5. Inicie las herramientas de desarrollo de F12 que corresponden a su versión de Office, como se describe en la sección anterior.
6. En la ventana F12, seleccione Home.html.
7. En la pestaña Depurador , abra el archivo Home.js como se describe en la sección anterior.
8. Establezca los puntos de interrupción en las líneas 310 y 312.
9. En el complemento, seleccione el botón Insertar . Se alcanza uno o el otro punto de interrupción.

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 es el nombre de archivo del archivo 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 las herramientas F12.

Cambiar a la vista web tridente

Hay dos maneras de cambiar la vista web trident. Puede ejecutar un comando simple en un símbolo del sistema o puede instalar una versión de Office que use Trident 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>
   

   Estos son algunos ejemplos.

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

   npx office-addin-dev-settings webview manifest.json edge-legacy
   

   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 Internet Explorer

Use el procedimiento siguiente para instalar una versión de Office (descargada desde una suscripción de Microsoft 365) que use la vista web heredada de Microsoft Edge (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, deshabilitar actualizaciones. 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.

Ver también

• Inspeccionar el JavaScript que se está ejecutando con el depurador
• Usar las herramientas de desarrollo F12