Débogage de solutions d’infrastructure SharePoint dans Visual Studio Code

Visual Studio Code est un éditeur de code populaire fréquemment utilisé pour créer des solutions SharePoint Framework. La configuration du débogage de votre solution SharePoint Framework dans Visual Studio Code vous permet de parcourir plus efficacement votre code et d’y corriger des erreurs.

Vous pouvez également afficher les étapes nécessaires pour activer le débogage dans Visual Studio Code dans cette vidéo sur la chaîne YouTube de Microsoft 365 Platform Community (PnP) :

Conditions requises

Le moyen le plus simple de configurer Visual Studio Code (VS Code) pour déboguer SharePoint Framework solutions consiste à utiliser le débogueur JavaScript inclus dans VS Code pour déboguer Chrome & Edge.

Vous avez également besoin de Google Chrome ou Microsoft Edge.

Configurations de débogage

Vous pouvez trouver les configurations de débogage dans le fichier ./vscode/launch.json sous le dossier de l’espace de travail Visual Studio Code.

Configuration d’un point d’arrêt

Dans Visual Studio Code, ouvrez le fichier source du composant WebPart principal et ajoutez un point d’arrêt sur la première ligne de la méthode render(), soit en sélectionnant la marge à gauche du numéro de ligne, soit en mettant en surbrillance la ligne de code dans l’éditeur et en sélectionnant la touche F9.
Dans Visual Studio Code, sélectionnez l’option Terminal intégré dans le menu Afficher ou sélectionnez les touches Ctrl+` du clavier.
Dans le terminal, exécutez la commande suivante :
```
gulp serve --nobrowser
```
L’exécution de cette commande génère votre solution SharePoint Framework et démarre le serveur web local pour traiter les fichiers de sortie. Étant donné que le débogueur démarre sa propre instance du navigateur, vous utilisez l’argument --nobrowser pour empêcher la tâche de service d’ouvrir une fenêtre de navigateur.

Démarrage du débogage dans Visual Studio Code

Une fois la tâche Gulp terminée, déplacez le focus sur la zone de code dans Visual Studio Code et sélectionnez F5 (ou l’option Démarrer le débogage dans le menu Déboguer).

Le mode de débogage dans Visual Studio Code démarre, changeant la couleur de la barre d'état en orange et ouvrant une nouvelle fenêtre de Google Chrome montrant le SharePoint Workbench.

Remarque

À ce stade, le point d’arrêt est désactivé, car le code du composant WebPart n’a pas encore été chargé. SharePoint Framework charge des composants WebPart à la demande uniquement après qu’ils ont été ajoutés à la page.

Visual Studio Code en mode débogage affiché à côté de Google Chrome montrant l'atelier SharePoint

Ajout d’un composant WebPart au canevas

Pour vérifier que le débogage fonctionne, ajoutez votre composant WebPart au canevas dans Workbench.

Boîte à outils de composant WebPart dans SharePoint Workbench

Quand le code est chargé sur la page, l’indicateur de point d’arrêt devient actif.

Point d’arrêt actif une fois le composant WebPart ajouté au canevas

Si vous rechargez la page maintenant, votre point d’arrêt dans Visual Studio Code est atteint, et vous pouvez inspecter toutes les propriétés et parcourir le code.

Point d’arrêt atteint dans Visual Studio Code

Débogage d’une solution à l’aide de Workbench hébergé

Quand vous générez des solutions SharePoint Framework qui communiquent avec SharePoint, vous pouvez avoir besoin de vérifier l’interaction entre vos solutions dans SharePoint. Pour cela, vous pouvez utiliser la version hébergée de SharePoint Workbench, qui est disponible dans chaque client Microsoft 365 à une adresse de type : https://yourtenant.sharepoint.com/_layouts/workbench.aspx.

Quand vous générez des solutions SharePoint Framework, effectuez régulièrement des tests similaires. Vous pouvez également créer une configuration de débogage distincte pour la version hébergée de SharePoint Workbench.

Débogage d’une solution WebPart à l’aide de Workbench hébergé

Ouvrez le fichier .vscode/launch.json et mettez à jour la propriété url sous la configuration Workbench hébergé avec votre URL de site SharePoint.
```
"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
```
Dans Visual Studio Code, activez le volet Déboguer et sélectionnez la nouvelle configuration ajoutée Workbench hébergé dans la liste Configurations.
Démarrez le débogage en sélectionnant F5 ou l’option Démarrer le débogage dans le menu Déboguer. Visual Studio Code passe en mode de débogage (barre d’état orange) et l’extension Débogueur pour Chrome ouvre la page de connexion à Microsoft 365 dans une nouvelle instance de Google Chrome.
Une fois connecté, ajoutez le composant WebPart au canevas et actualisez le plan de travail. Vous verrez le point d'arrêt dans Visual Studio Code être atteint, et vous pourrez inspecter les variables et parcourir le code.

Débogage d’une solution d’extension à l’aide de Workbench hébergé

La procédure pour déboguer une extension dans Workbench hébergé est semblable aux étapes à suivre pour un composant WebPart, avec quelques différences importantes.

Ouvrez le fichier .vscode/launch.json et mettez à jour la propriété url sous la configuration Workbench hébergé avec votre URL de site SharePoint.
```
"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
```
Dans Visual Studio Code, activez le volet Déboguer et sélectionnez la nouvelle configuration ajoutée Workbench hébergé dans la liste Configurations.
Après avoir lancé le traitement du Gulp dans le terminal, démarrez le débogage en sélectionnant F5 ou l’option Démarrer le débogage dans le menu Déboguer. Visual Studio Code passe en mode de débogage (barre d’état orange) et l’extension Débogueur pour Chrome ouvre la page de connexion à Microsoft 365 dans une nouvelle instance de Google Chrome.
Dans l’onglet Workbench ouvert dans votre navigateur, accédez à une page SharePoint Online où vous souhaitez tester votre extension.
Ajoutez les paramètres de chaîne de requête suivants à l’URL. Notez que vous devez mettre à jour l’ID pour le faire correspondre à votre propre identificateur d’extension. Cette option est disponible dans le fichier HelloWorldApplicationCustomizer.manifest.json.

Attention

La mise en retrait des sauts & de ligne a été ajoutée à l’extrait de code suivant pour plus de lisibilité. Le texte suivant doit se trouver sur une seule ligne sans espace vide.
```
?loadSPFX=true
&debugManifestsFile=https://localhost:4321/temp/manifests.js
&customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{
    "location":"ClientSideExtension.ApplicationCustomizer",
    "properties":{
      "testMessage":"Hello as property!"
    }
}}
```
Plus de détails sur les paramètres d’URL :
- loadSPFX=true : garantit que SharePoint Framework est chargé sur la page. Pour des raisons de performances, l’infrastructure ne se charge pas à moins d’avoir au moins une extension enregistrée. Comme aucun composant n’est enregistré, vous devez charger explicitement l’infrastructure.
- debugManifestsFile : spécifie que vous souhaitez charger les composants SPFx qui sont distribués localement. Le chargeur recherche uniquement les composants dans le catalogue d’applications (pour votre solution déployée) et le serveur de manifeste SharePoint (pour les bibliothèques système).
- customActions : simule une action personnalisée. Lorsque vous déployez et enregistrez ce composant dans un site, vous devez créer cet objet CustomAction et décrire toutes les différentes propriétés que vous pouvez définir sur ce dernier.
  - Clé : utilisez le GUID de l’extension comme clé à associer à l’action personnalisée. Cela doit correspondre à la valeur d’ID de votre extension qui est disponible dans le fichier manifest.json de l’extension.
  - Emplacement : type d’action personnalisée. Utilisez ClientSideExtension.ApplicationCustomizer pour l’extension du personnalisateur d’application.
  - Propriétés : objet JSON facultatif contenant les propriétés disponibles via le membre this.properties. Dans cet exemple HelloWorld, une propriété testMessage a été définie.
L’URL complète doit ressembler à ce qui suit :

Attention

La mise en retrait des sauts & de ligne a été ajoutée à l’extrait de code suivant pour plus de lisibilité. Le texte suivant doit se trouver sur une seule ligne sans espace vide.
```
https://contoso.sharepoint.com/Lists/Contoso/AllItems.aspx
    ?loadSPFX=true
    &debugManifestsFile=https://localhost:4321/temp/manifests.js
    &customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{
        "location":"ClientSideExtension.ApplicationCustomizer",
        "properties":{
          "testMessage":"Hello as property!"
        }
    }}
```
Sélectionnez Charger les scripts de débogage pour continuer à charger les scripts depuis votre hôte local.

Lorsque la page se charge, vous devriez maintenant être en mesure d’afficher l’extension sur votre page (dans ce cas, une extension de commande d’affichage de liste) :

De plus, vous pouvez désormais activer/désactiver les points d’arrêt et naviguer dans le code :

Débogage avec Microsoft Edge ou des projets plus anciens

Si vous utilisez une version plus ancienne du générateur Yeoman pour SharePoint Framework ou que vous souhaitez effectuer un débogage avec Microsoft Edge, suivez ces étapes pour créer le fichier launch.json manuellement.

Remarque

Pour déboguer avec Microsoft Edge, vous devrez installer la Mise à jour Windows du 10 avril 2018 qui inclut le protocole Microsoft Edge DevTools.

Création de la configuration de débogage pour Workbench hébergé

Dans Visual Studio Code, ouvrez le fichier .vscode/launch.json.

Pour Edge, copiez la configuration de débogage existante et utilisez l’URL de Workbench hébergé :

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Hosted workbench",
      "type": "msedge",
      "request": "launch",
      "url": "https://contoso.sharepoint.com/_layouts/workbench.aspx",
      "webRoot": "${workspaceRoot}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///.././src/*": "${webRoot}/src/*",
        "webpack:///../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../../src/*": "${webRoot}/src/*"
      }
    }
  ]
}

Pour Chrome, copiez la configuration de débogage existante et utilisez l’URL de Workbench hébergé :

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Hosted workbench",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "https://contoso.sharepoint.com/_layouts/workbench.aspx",
      "webRoot": "${workspaceRoot}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///.././src/*": "${webRoot}/src/*",
        "webpack:///../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../../src/*": "${webRoot}/src/*"
      },
      "runtimeArgs": [
        "--remote-debugging-port=9222",
        "-incognito"
      ]
    }
  ]
}

Voir aussi

Last updated on 2023-03-21