Partager via


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

Cet article explique comment déboguer le code côté client (JavaScript ou TypeScript) de votre complément en dehors de votre IDE actuel.

Déboguer un complément du volet Office à l’aide des outils de développement Microsoft Edge

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é à partir duquel les outils de développement Microsoft Edge 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 à 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 (ou sélectionnez de façon longue) sur le volet Office pour ouvrir le menu contextuel et sélectionnez Inspecter, ou ouvrez le menu de 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 ne prend pas en charge le menu contextuel ou le raccourci clavier pour 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.

  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.

    Onglet source des outils de développement Edge 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 à l’aide de l’une des méthodes suivantes :

    • Appuyez sur Ctrl+Maj+I ou F12.
    • Cliquez avec le bouton droit (ou sélectionnez et maintenez la touche) 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 plus haut dans cet article.

Ouvrir automatiquement les outils de développement Microsoft Edge pour déboguer l’initialisation

Pour déboguer la séquence d’initialisation de votre complément, configurez votre environnement afin que les outils de développement Microsoft WebView2 s’ouvrent automatiquement au lancement du complément.

  1. Fermez l’application Office dans laquelle vous prévoyez de déboguer le complément.
  2. Définissez la WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS variable d’environnement pour inclure la valeur --auto-open-devtools-for-tabs.
  3. Ouvrez l’application Office.
  4. Exécutez le complément.
  5. Les outils de développement Microsoft Edge doivent s’ouvrir automatiquement. Utilisez l’outil comme vous le feriez lors du débogage d’un volet Office, comme spécifié dans Déboguer un complément de volet Office à l’aide des outils de développement Microsoft Edge.

Remarque

Vous pouvez voir d’autres instances de l’outil de développement Microsoft Edge s’ouvrir automatiquement, car cette variable d’environnement affecte toutes les instances WebView2 de votre système.