Déboguer des compléments à l’aide d’outils de développement dans Version antérieure de Microsoft Edge

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 d’affichage web Edge d’origine, EdgeHTML.

Conseil

Pour plus d’informations sur le débogage avec Edge hérité dans Visual Studio Code, consultez Extension du débogueur de complément Microsoft Office pour Visual Studio Code.

Pour déterminer le navigateur ou la vue web que vous utilisez, 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 la vue web héritée d’Edge ou pour forcer votre version actuelle d’Office à utiliser Edge Hérité, voir Basculer vers la vue web héritée Edge.

Déboguer un complément du volet Office à l’aide de Microsoft Edge DevTools Preview

1. Installez la préversion de Microsoft Edge DevTools. (Le mot « Aperçu » est dans le nom pour des raisons historiques. Il n’existe pas de version plus récente.)

   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 Microsoft Edge DevTools ne peut pas détecter ou auquel il ne peut pas s’attacher. La technique décrite dans cet article ne peut donc pas être utilisée pour déboguer du code dans la fonction.

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

3. Exécutez Microsoft Edge DevTools.

4. Dans les outils, ouvrez l’onglet Local. Votre complément est répertorié par son nom. (Seuls les processus en cours d’exécution dans EdgeHTML apparaissent sous l’onglet . L’outil ne peut pas s’attacher à des processus qui s’exécutent dans d’autres navigateurs ou vues web, notamment Microsoft Edge (WebView2) et Internet Explorer (Trident).)

   

5. Sélectionnez le nom du complément pour l’ouvrir dans les outils.

6. Ouvrez l’onglet Débogueur.

7. Ouvrez le fichier que vous souhaitez déboguer en procédant comme suit.

   1. Dans la barre des tâches du débogueur, sélectionnez Afficher la recherche dans les fichiers. Une fenêtre de recherche s’ouvre.
   2. Entrez une ligne de code à partir du fichier que vous souhaitez déboguer dans la zone de recherche. Il doit s’agir d’un élément qui n’est pas susceptible de se trouver dans un autre fichier.
   3. Sélectionnez le bouton Actualiser.
   4. Dans les résultats de la recherche, sélectionnez la ligne pour ouvrir le fichier de code dans le volet au-dessus des résultats de la recherche.

   

8. Pour définir un point d’arrêt, sélectionnez la ligne dans le fichier de code. Le point d’arrêt est inscrit dans le volet Pile des appels (en bas à droite). Il peut également y avoir un point rouge par la ligne dans le fichier de code, mais cela n’apparaît pas de manière fiable.

9. Exécutez les fonctions dans le complément, si nécessaire, afin de déclencher le point d’arrêt.

Conseil

Pour plus d’informations sur l’utilisation des outils, consultez Outils de développement Microsoft Edge (EdgeHTML).

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 provient de l’élément <title> dans le fichier HTML qui est 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 de Microsoft Edge DevTools Preview.

   

Basculer vers la vue web héritée Edge

Il existe deux façons de basculer la vue web héritée Edge. Vous pouvez exécuter une commande simple dans une invite de commandes, ou vous pouvez installer une version d’Office qui utilise Edge Hérité 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 Edge Hérité

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.