Débogage des compléments avec les outils de développement F12 sur Windows 10

Office and SharePoint Add-ins

La dernière version de ce complément Office est disponible dans le référentiel GitHub des compléments.


Utilisez le débogueur des outils de développement F12 de Windows 10 pour déboguer les compléments Office.

S’applique à :apps for Office | Office Add-ins

Les outils de développement F12 vous aident à déboguer, tester et accélérer vos pages web. Vous pouvez aussi les utiliser avec les compléments Office. Les outils F12 sont disponibles avec Windows 10.

Les outils de développement F12 peuvent vous aider à développer et déboguer votre complément Office si vous n’utilisez pas un IDE comme Visual Studio ou si vous devez examiner un problème pendant l’exécution de votre complément hors de l’IDE. Vous pouvez lancer les outils de développement F12 après l’exécution de votre complément.

Dans cet article, vous découvrirez comment utiliser le débogueur des outils de développement F12 de Windows 10 pour tester votre complément Office. Vous pouvez tester les compléments du Store et tous les compléments de votre compte. Les outils F12 s’ouvrent dans leur propre fenêtre et n’utilisent pas Visual Studio.

Remarque Remarque

Le débogueur fait partie des outils de développement F12 de Windows 10 et d’Internet Explorer. Il ne fait pas partie des versions antérieures de Windows.

Conditions préalables

Les logiciels suivants doivent être installés :

  • Les outils de développement F12, inclus dans Windows 10.

  • L’application cliente Office qui héberge votre complément.

  • Votre complément.

Cet exemple utilise Word et un complément gratuit de l’Office Store.

Utilisation du débogueur

  1. Ouvrez l’application cliente Office sur votre ordinateur.

    Ouvrez un document vierge dans Word.

  2. Dans l’onglet Insertion du ruban, cliquez sur Mes compléments et choisissez un complément du Store ou de votre catalogue de compléments.

    Pour cet exemple, cliquez sur le bouton Store et sélectionnez le complément QR4Office.

  3. Ouvrez les outils de développement F12 correspondants à votre version d’Office :

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

    • Pour la version 64 bit, utilisez C:\Windows\SysWOW64\F12\F12Chooser.exe

    Lorsque vous cliquez sur F12Chooser, une autre fenêtre (intitulée « Choisir la cible à déboguer ») affiche les applications possibles pour effectuer le débogage. Sélectionnez l’application de votre choix. Si vous rédigez votre propre complément, sélectionnez le site web où le complément est déployé. Il peut s’agir d’une URL localhost.

    Par exemple, sélectionnez home.html.

    Écran du sélecteur F12, pointe vers un complément de type « bulles »
  4. Dans la fenêtre F12, sélectionnez le fichier à déboguer.

    Pour sélectionner le fichier, cliquez sur l’icône du dossier situé au-dessus du volet (gauche) du script. La liste déroulante affiche les fichiers disponibles. Sélectionnez home.js.

  5. Définissez le point d’arrêt.

    Pour définir le point d’arrêt dans home.js, choisissez la ligne 144 située dans la fonction textChanged. Vous verrez un point rouge à gauche de la ligne et une ligne correspondante dans le volet Pile d’appels et Points d’arrêt (en bas à droite). Pour connaître d’autres façons de définir un point d’arrêt, consultez la rubrique Inspecter le code JavaScript en cours d’exécution avec le débogueur.

    Débogueur avec le point d’arrêt dans le fichier home.js
  6. Exécutez votre complément pour déclencher le point d’arrêt.

    Cliquez sur la zone de texte URL dans la partie supérieure du volet QR4Office pour modifier le texte. Dans le débogueur, dans le volet Pile d’appels et Points d’arrêt, vous verrez que le point d’arrêt s’est déclenché et affiche différentes informations. Vous devrez peut-être actualiser l’outil F12 pour afficher les résultats.

    Débogueur avec les résultats du point d’arrêt déclenché
Afficher: