Complément Microsoft Office Extension de débogueur pour Visual Studio Code

  • Article

Les compléments Office exécutés sur Windows peuvent utiliser l’extension de débogueur de complément Office dans Visual Studio Code pour déboguer sur Version antérieure de Microsoft Edge avec le runtime WebView (EdgeHTML) d’origine.

Importante

Cet article s’applique uniquement quand Office exécute des compléments dans le runtime WebView (EdgeHTML) d’origine, comme expliqué dans Navigateurs et contrôles d’affichage web utilisés par les compléments Office. Pour obtenir des instructions sur le débogage dans Visual Studio Code sur Microsoft Edge WebView2 (basé sur Chromium), consultez Extension du débogueur de complément Microsoft Office pour Visual Studio Code.

Conseil

Si vous ne le pouvez pas ou si vous ne le souhaitez pas, déboguez à l’aide des outils intégrés à Visual Studio Code ; ou si vous rencontrez un problème qui se produit uniquement lorsque le complément est exécuté en dehors de Visual Studio Code, vous pouvez déboguer le runtime Edge Hérité (EdgeHTML) à l’aide des outils de développement hérités Edge, comme décrit dans Déboguer des compléments à l’aide d’outils de développement dans Version antérieure de Microsoft Edge.

Ce mode de débogage est dynamique et vous permet de définir des points d'arrêt pendant l'exécution du code. Vous pouvez voir les modifications apportées à votre code immédiatement pendant que le débogueur est attaché, le tout sans perdre votre session de débogage. Vos modifications de code sont également persistantes, ce qui vous permet de voir les résultats de plusieurs modifications apportées à votre code. L’image suivante illustre cette extension en action.

Office extension déboguer une section de Excel de débogage.

Conditions préalables

Installer et utiliser le débogueur

Ces instructions supposent que vous avez une expérience de l’utilisation de la ligne de commande, que vous comprenez JavaScript de base et que vous avez créé un projet de complément Office avant d’utiliser le générateur Yeoman pour les compléments Office. Si vous ne l’avez pas fait auparavant, consultez l’un de nos tutoriels, comme ce didacticiel sur les compléments Excel Office.

  1. La première étape dépend du projet et de la façon dont il a été créé.

    • Si vous souhaitez créer un projet pour tester le débogage dans Visual Studio Code, utilisez le générateur Yeoman pour les compléments Office. Pour ce faire, utilisez l’un de nos guides de démarrage rapide, comme le guide de démarrage rapide du complément Outlook.
    • Si vous souhaitez déboguer un projet existant créé avec Yo Office, passez à l’étape suivante.
    • Si vous souhaitez déboguer un projet existant qui n’a pas été créé avec Yo Office, effectuez la procédure dans l’annexe , puis revenez à l’étape suivante de cette procédure.

  2. Ouvrez VS Code et ouvrez votre projet dans celui-ci.

  3. Dans VS Code, sélectionnez Ctrl + Shift + X pour ouvrir la barre Extensions. Recherchez l’extension « Débogueur de complément Microsoft Office » et installez-la.

  4. Choisissez Afficher>l’exécution ou entrez Ctrl+Maj+D pour basculer vers l’affichage de débogage.

  5. Dans les options EXÉCUTER ET DÉBOGUER , choisissez l’option Edge Héritée pour votre application hôte, telle qu’Outlook Desktop (Edge Legacy) . Sélectionnez F5 ou choisissez Exécuter>Démarrer le débogage dans le menu pour commencer le débogage. Cette action lance automatiquement un serveur local dans une fenêtre Node pour héberger votre complément, puis ouvre automatiquement l’application hôte, telle qu’Excel ou Word. Cela peut prendre plusieurs heures.

  6. Dans l’application hôte, votre complément est désormais prêt à être utilisé. Sélectionnez Afficher le volet de tâches ou exécutez toute autre commande de complément. Une boîte de dialogue s’affiche comme suit :

    Arrêter sur chargement WebView. Pour déboguer webView, attachez VS Code à l’instance WebView à l’aide de l’extension Microsoft Débogueur pour Edge, puis cliquez sur OK pour continuer. Pour empêcher cette boîte de dialogue d’apparaître à l’avenir, cliquez sur Annuler.

    Sélectionnez OK.

    Remarque

    Si vous sélectionnez Annuler, la boîte de dialogue ne s’affiche plus lors de l’exécution de cette instance du complément. Toutefois, si vous redémarrez votre complément, la boîte de dialogue s’affichera à nouveau.

  7. Définissez un point d’arrêt dans le fichier du volet Office de votre projet. Pour définir des points d'arrêt dans Visual Studio Code, passez la souris à côté d'une ligne de code et sélectionnez le cercle rouge qui apparaît.

    Un cercle rouge apparaît sur une ligne de code Visual Studio Code.

  8. Exécutez la fonctionnalité dans votre add-in qui appelle les lignes avec des points d'arrêt. Vous verrez que les points d’arrêt ont été atteints et que vous pouvez inspecter les variables locales.

    Remarque

    Les points d’arrêt dans les appels de Office.initialize ou de Office.onReady sont ignorés. Pour plus d’informations sur ces méthodes, consultez Initialiser votre complément Office.

Importante

La meilleure façon d’arrêter une session de débogage consiste à sélectionner Maj+F5 ou à choisir Exécuter>Arrêter le débogage dans le menu. Cette action doit fermer la fenêtre du serveur Node et tenter de fermer l’application hôte, mais une invite s’affiche sur l’application hôte vous demandant s’il faut enregistrer le document ou non. Faites un choix approprié et laissez l’application hôte se fermer. Évitez de fermer manuellement la fenêtre Node ou l’application hôte. Cela peut entraîner des bogues en particulier lorsque vous arrêtez et démarrez des sessions de débogage à plusieurs reprises.

Si le débogage cesse de fonctionner ; par exemple, si les points d’arrêt sont ignorés ; arrêter le débogage. Ensuite, si nécessaire, fermez toutes les fenêtres d’application hôte et la fenêtre Nœud. Enfin, fermez Visual Studio Code et rouvrez-le.

Annexe

Si votre projet n’a pas été créé avec Yo Office, vous devez créer une configuration de débogage pour Visual Studio Code.

  1. Créez un fichier nommé launch.json dans le dossier du projet \.vscode s'il n'y en a pas déjà un.

  2. Assurez-vous que le fichier possède un configurations tableau. Voici un exemple simple d’un launch.json.

    {
  // Other properties may be here.

  "configurations": [

    // Configuration objects may be here.

  ]

  // Other properties may be here.
}

  3. Ajoutez l’objet suivant au configurations tableau.

    {
  "name": "HOST Desktop (Edge Legacy)",
  "type": "office-addin",
  "request": "attach",
  "url": "https://localhost:3000/taskpane.html?_host_Info=HOST$Win32$16.01$en-US$$$$0",
  "port": 9222,
  "timeout": 600000,
  "webRoot": "${workspaceRoot}",
  "preLaunchTask": "Debug: HOST Desktop",
  "postDebugTask": "Stop Debug"
}

  4. Remplacez l’espace réservé HOST aux trois emplacements par le nom de l’application Office dans laquelle le complément s’exécute ; par exemple, Outlook ou Word.

  5. Enregistrez et fermez le fichier.

Voir aussi