Déboguer des compléments à l’aide d’outils de développement dans Internet Explorer

Cet article explique comment déboguer le code côté client (JavaScript ou TypeScript) de votre complément lorsque les conditions suivantes sont remplies.

• Vous ne pouvez pas ou ne souhaitez pas déboguer à l’aide d’outils intégrés à votre IDE . ou vous rencontrez un problème qui se produit uniquement lorsque le complément est exécuté en dehors de l’IDE.
• Votre ordinateur utilise une combinaison de versions de Windows et d’Office qui utilisent le contrôle Internet Explorer webview, Trident.

Pour déterminer quel navigateur ou vue web est utilisé sur votre ordinateur, voir Navigateurs et contrôles d’affichage web utilisés par les compléments Office.

Conseil

Dans les versions récentes d’Office, l’une des façons d’identifier le contrôle webview utilisé par Office consiste à utiliser le menu personnalité de n’importe quel complément où il est disponible. (Le menu personnalité n’est pas pris en charge dans Outlook.) Ouvrez le menu et sélectionnez Informations de sécurité. Dans la boîte de dialogue Informations de sécurité sur Windows, le runtime signale Microsoft Edge, Version antérieure de Microsoft Edge ou Internet Explorer. Le runtime n’est pas inclus dans la boîte de dialogue dans les versions antérieures d’Office.

Remarque

Pour installer une version d’Office qui utilise Trident ou pour forcer votre version actuelle à utiliser Trident, voir Basculer vers la vue web Trident.

Déboguer un complément du volet Office à l’aide des outils F12

Windows 10 et 11 incluent un outil de développement web appelé « F12 », car il a été lancé à l’origine en appuyant sur F12 dans Internet Explorer. F12 est désormais une application indépendante utilisée pour déboguer votre complément lorsqu’il s’exécute dans le contrôle Internet Explorer webview, Trident. L’application n’est pas disponible dans les versions antérieures de Windows.

Remarque

Si votre complément dispose d’une commande de complément qui exécute une fonction, la fonction s’exécute dans un processus d’exécution de navigateur masqué que les outils F12 ne peuvent pas détecter ou auquel il n’est pas possible d’attacher. La technique décrite dans cet article ne peut donc pas être utilisée pour déboguer du code dans la fonction.

Les étapes suivantes sont les instructions pour le débogage de votre complément. Si vous souhaitez simplement tester les outils F12 eux-mêmes, consultez Exemple de complément pour tester les outils F12.

1. Charger une version test et exécuter le complément.

2. Lancez les outils de développement F12 qui correspondent à votre version d’Office.

   • Pour la version 32 bits, utilisez C:\Windows\System32\F12\IEChooser.exe
   • Pour la version 64 bits, utilisez C:\Windows\SysWOW64\F12\IEChooser.exe

   IEChooser s’ouvre avec une fenêtre nommée Choisir la cible à déboguer. Votre complément s’affiche dans la fenêtre nommée par le nom de fichier de la page d’accueil du complément. Dans la capture d’écran suivante, il s’agit Home.htmlde . Seuls les processus en cours d’exécution dans Internet Explorer, ou Trident, s’affichent. L’outil ne peut pas s’attacher à des processus qui s’exécutent dans d’autres navigateurs ou vues web, y compris Microsoft Edge.

   

3. Sélectionnez le processus de votre complément ; autrement dit, son nom de fichier de page d’accueil. Cette action attache les outils F12 au processus et ouvre l’interface utilisateur main F12.

4. Ouvrez l’onglet Débogueur.

5. En haut à gauche de l’onglet, juste sous le ruban de l’outil débogueur, se trouve une petite icône de dossier. Sélectionnez cette option pour ouvrir une liste déroulante des fichiers dans le complément. Voici un exemple.

   

6. Sélectionnez le fichier que vous souhaitez déboguer et il s’ouvre dans le volet script (gauche) de l’onglet Débogueur . Si vous utilisez un transpileur, un bundler ou un minifier, qui modifie le nom du fichier, il aura le nom final qui est réellement chargé, et non le nom du fichier source d’origine.

7. Faites défiler jusqu’à une ligne dans laquelle vous souhaitez définir un point d’arrêt, puis cliquez dans la marge à gauche du numéro de ligne. Vous verrez un point rouge à gauche de la ligne et une ligne correspondante s’affiche sous l’onglet Points d’arrêt du volet inférieur droit. La capture d'écran suivante présente un exemple :

   

8. Exécutez les fonctions dans le complément, si nécessaire, afin de déclencher le point d’arrêt. Lorsque le point d’arrêt est atteint, une flèche pointant vers la droite s’affiche sur le point rouge du point d’arrêt. La capture d'écran suivante présente un exemple :

   

Conseil

Pour plus d’informations sur l’utilisation des outils F12, consultez Inspecter l’exécution de JavaScript avec le débogueur.

Exemple de complément pour tester les outils F12

Cet exemple utilise Word et un complément gratuit d’AppSource.

1. Ouvrez un document vierge dans Word.
2. Sélectionnez Compléments d’accueil>, puis Obtenir des compléments.
3. Dans la boîte de dialogue Compléments Office , sélectionnez l’onglet STORE .
4. Sélectionnez le complément QR4Office . Il s’ouvre dans un volet Office.
5. Lancez les outils de développement F12 qui correspondent à votre version d’Office, comme décrit dans la section précédente.
6. Dans la fenêtre F12, sélectionnez Home.html.
7. Sous l’onglet Débogueur , ouvrez le fichier Home.js comme décrit dans la section précédente.
8. Définissez les points d’arrêt sur les lignes 310 et 312.
9. Dans le complément, sélectionnez le bouton Insérer . L’un ou l’autre point d’arrêt est atteint.

Déboguer une boîte de dialogue dans un complément

Si votre complément utilise l’API boîte de dialogue Office, le dialogue s’exécute dans un processus distinct du volet Office (le cas échéant) et les outils doivent être attachés à ce processus. Procédez comme suit.

1. Exécutez le complément et les outils.
2. Ouvrez la boîte de dialogue, puis sélectionnez le bouton Actualiser dans les outils. Le processus de boîte de dialogue s’affiche. Son nom est le nom du fichier ouvert dans la boîte de dialogue.
3. Sélectionnez le processus pour l’ouvrir et déboguer comme décrit dans la section Déboguer un complément du volet Office à l’aide des outils F12.

Basculer vers la vue web Trident

Il existe deux façons de basculer la vue web Trident. Vous pouvez exécuter une commande simple dans une invite de commandes, ou vous pouvez installer une version d’Office qui utilise Trident par défaut. Nous vous recommandons la première méthode. Mais vous devez utiliser la seconde dans les scénarios suivants.

• Votre projet a été développé avec Visual Studio et IIS. Il n’est pas basé Node.js.
• Vous voulez être absolument robuste dans vos tests.
• Si, pour une raison quelconque, l’outil en ligne de commande ne fonctionne pas.

Basculer via la ligne de commande

Si votre projet est basé sur Node.js (c’est-à-dire qu’il n’est pas développé avec Visual Studio et Internet Information Server (IIS), vous pouvez forcer Office sur Windows à utiliser le contrôle de vue web EdgeHTML fourni par Edge Hérité ou le contrôle Webview Trident fourni par Internet Explorer pour exécuter des compléments, même si vous avez une combinaison de versions Windows et Office qui utiliseraient normalement une vue web plus récente. Pour plus d’informations sur les navigateurs et les vues web utilisés par différentes combinaisons de versions Windows et Office, voir Navigateurs et contrôles d’affichage web utilisés par les compléments Office.

Remarque

L’outil utilisé pour forcer la modification dans l’affichage web est pris en charge uniquement dans le canal d’abonnement bêta de Microsoft 365. Rejoignez le programme Microsoft 365 Insider et sélectionnez l’option Canal bêta pour accéder aux builds bêta d’Office. Voir aussi À propos d’Office : quelle version d’Office est-ce que j’utilise ?.

Strictement, c’est le webview commutateur de cet outil (voir l’étape 2) qui nécessite le canal bêta. L’outil a d’autres commutateurs qui n’ont pas cette exigence.

1. Si votre projet n’a pas été créé avec l’outil Yeoman generator for Office Add-ins , vous devez installer l’outil office-addin-dev-settings. Exécutez la commande suivante dans une invite de commandes.

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

   Importante

   L’outil office-addin-dev-settings n’est pas pris en charge sur Mac.

2. Spécifiez la vue web que vous souhaitez qu’Office utilise avec la commande suivante dans une invite de commandes à la racine du projet. Remplacez par <path-to-manifest> le chemin d’accès relatif, qui est simplement le nom de fichier du manifeste s’il se trouve à la racine du projet. ie Remplacez par <webview> ou edge-legacy. Notez que les options sont nommées d’après les navigateurs dans lesquels les vues web proviennent. L’option ie signifie « Trident » et l’option edge-legacy « EdgeHTML ».

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

   Voici un exemple.

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

   Vous devez voir un message dans la ligne de commande indiquant que le type d’affichage web est désormais défini sur IE (ou Edge Legacy).

3. Lorsque vous avez terminé, définissez Office pour qu’il reprenne l’utilisation de la vue web par défaut pour votre combinaison de versions Windows et Office avec la commande suivante.

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

Installer une version d’Office qui utilise Internet Explorer

Utilisez la procédure suivante pour installer une version d’Office (téléchargée à partir d’un abonnement Microsoft 365) qui utilise l’Version antérieure de Microsoft Edge webview (EdgeHTML) pour exécuter des compléments ou une version qui utilise internet Explorer (Trident).

1. Dans n’importe quelle application Office, ouvrez l’onglet Fichier du ruban, puis sélectionnez Compte Office ou Compte. Sélectionnez le bouton À propos du nom d’hôte (par exemple, À propos de Word).

2. Dans la boîte de dialogue qui s’ouvre, recherchez le numéro de build xx.x.xxxxx.xxxxx complet et effectuez-en une copie quelque part.

3. Télécharger l’outil Déploiement d’Office.

4. Exécutez le fichier téléchargé pour extraire l’outil. Vous êtes invité à choisir l’emplacement d’installation de l’outil.

5. Dans le dossier où vous avez installé l’outil (où se trouve le setup.exe fichier), créez un fichier texte avec le nom config.xml et ajoutez le contenu suivant.

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

6. Modifiez la Version valeur.

   • Pour installer une version qui utilise EdgeHTML, remplacez-la par 16.0.11929.20946.
   • Pour installer une version qui utilise Trident, remplacez-la par 16.0.10730.20348.

7. Si vous le souhaitez, modifiez la valeur de OfficeClientEdition pour "32" installer Office 32 bits, puis modifiez la Language ID valeur en fonction des besoins pour installer Office dans une autre langue.

8. Ouvrez une invite de commandes en tant qu’administrateur.

9. Accédez au dossier contenant les setup.exe fichiers et config.xml .

10. Exécutez la commande suivante :

    setup.exe /configure config.xml
    

    Cette commande installe Office. Le processus peut prendre plusieurs minutes.

11. Effacez le cache Office.

Importante

Après l’installation, veillez à désactiver la mise à jour automatique d’Office afin qu’Office ne soit pas mis à jour vers une version qui n’utilise pas la vue web avec laquelle vous souhaitez travailler avant d’avoir terminé son utilisation. Cela peut se produire dans les minutes qui suivent l’installation. Procédez comme suit.

1. Démarrez une application Office et ouvrez un nouveau document.
2. Ouvrez l’onglet Fichier dans le ruban, puis sélectionnez Compte Office ou Compte.
3. Dans la colonne Informations sur le produit, sélectionnez Options de mise à jour, puis désactiver Mises à jour. Si cette option n’est pas disponible, Office est déjà configuré pour ne pas se mettre à jour automatiquement.

Lorsque vous avez terminé d’utiliser l’ancienne version d’Office, réinstallez votre version la plus récente en modifiant le config.xml fichier et en remplaçant par Version le numéro de build que vous avez copié précédemment. Répétez ensuite la setup.exe /configure config.xml commande dans une invite de commandes administrateur. Si vous le souhaitez, réactivez les mises à jour automatiques.

Voir aussi

• Inspecter le code JavaScript en cours d’exécution avec le débogueur
• Utilisation des outils de développement F12