Déboguer des compléments à l’aide des Outils de développement dans Microsoft Edge (basés sur Chromium)

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 (basé sur Chromium), WebView2.

Conseil

Pour plus d’informations sur le débogage avec Edge WebView2 (basé sur Chromium) dans Visual Studio Code, consultez Déboguer des compléments sur Windows à l’aide de Visual Studio Code et Microsoft Edge WebView2 (basé sur Chromium).

Pour déterminer 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.

Déboguer un complément du volet Office à l’aide des outils de développement Microsoft Edge (basés sur Chromium)

Remarque

Si votre complément a une commande de complément qui exécute une fonction, la fonction s’exécute dans un processus d’exécution de navigateur masqué à partir duquel les outils de développement Microsoft Edge (basés sur Chromium) ne peuvent pas être lancés. La technique décrite dans cet article ne peut donc pas être utilisée pour déboguer du code dans la fonction.

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

    Remarque

    Pour charger une version test d’un complément dans Outlook, consultez Charger une version test des compléments Outlook.

  2. Exécutez les outils de développement Microsoft Edge (basés sur Chromium) à l’aide de l’une des méthodes suivantes :

    • Assurez-vous que le volet Office du complément est activé et appuyez sur Ctrl+Maj+I.
    • Cliquez avec le bouton droit sur le volet Office pour ouvrir le menu contextuel et sélectionnez Inspecter, ou ouvrez le menu personnalité et sélectionnez Attacher le débogueur. (Le menu personnalité n’est pas pris en charge dans Outlook.)

    Remarque

    Le nouveau client de bureau Outlook sur Windows (préversion) ne prend pas en charge le menu contextuel ou le raccourci clavier permettant d’accéder aux outils de développement Microsoft Edge. Au lieu de cela, vous devez exécuter olk.exe --devtools à partir d’une invite de commandes. Pour plus d’informations, consultez la section « Déboguer votre complément » de Développer des compléments Outlook pour le nouvel Outlook sur Windows (préversion) .

  3. Ouvrez l’onglet Sources .

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

    1. À l’extrême droite de la barre de menus supérieure de l’outil, sélectionnez le bouton ... , puis sélectionnez Rechercher.
    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.

    Edge Chromium onglet source des outils de développement avec 4 parties étiquetées de A à D.

  5. Pour définir un point d’arrêt, sélectionnez le numéro de ligne de la ligne dans le fichier de code. Un point rouge apparaît par la ligne dans le fichier de code. Dans la fenêtre du débogueur à droite, le point d’arrêt est inscrit dans la liste déroulante Points d’arrêt .

  6. 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 Vue d’ensemble des outils de développement Microsoft Edge.

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

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

  1. Exécutez le complément.

  2. Ouvrez la boîte de dialogue et assurez-vous qu’elle a le focus.

  3. Ouvrez les outils de développement Microsoft Edge (basés sur Chromium) à l’aide de l’une des méthodes suivantes :

    • Appuyez sur Ctrl+Maj+I ou F12.
    • Cliquez avec le bouton droit sur la boîte de dialogue pour ouvrir le menu contextuel, puis sélectionnez Inspecter.
  4. Utilisez l’outil comme vous le feriez pour le code dans un volet Office. Consultez Déboguer un complément du volet Office à l’aide des outils de développement Microsoft Edge (basés sur Chromium) plus haut dans cet article.