Partager via

Installation de l’extension DevTools pour Visual Studio Code

  • Article

Cet article vous guide tout au long de la configuration initiale de l’extension DevTools. Après avoir installé DevTools, vous serez prêt à suivre les étapes décrites dans Prise en main de l’extension DevTools pour Visual Studio Code.

Cet article vous aide à :

  • Installez l’extension DevTools.

  • Clonez le dépôt Demos, qui inclut l’application web de démonstration à faire .

  • Démarrez un serveur web pour pouvoir utiliser des URL localhost dans l’extension DevTools dans Visual Studio Code.

Étape 1 : Installer Visual Studio Code

  1. Si ce n’est pas déjà fait, dans une fenêtre ou un onglet distinct, accédez à Télécharger Visual Studio Code et téléchargez et installez Visual Studio Code.

Étape 2 : Installer Microsoft Edge

Microsoft Edge est requis pour l’extension DevTools pour Visual Studio Code.

Sur Windows, Microsoft Edge est installé. Sur macOS ou Linux, installez Microsoft Edge comme suit :

  1. Accédez à la page Edge à Microsoft.com.

Étape 3 : Installer l’extension Microsoft Edge DevTools

Installez l’extension Microsoft Edge DevTools pour Visual Studio Code, comme suit :

  1. Ouvrez Visual Studio Code.

  2. Dans la barre d’activité à gauche, cliquez sur le bouton Extensions (icône Extensions). Vous pouvez également appuyer sur Ctrl+Maj+X sur Windows/Linux ou Sur Cmd+Maj+X sur macOS. Le volet Extensions Marketplace s’ouvre.

  3. Dans la zone de texte Rechercher des extensions dans la Place de marché , entrez Outils Microsoft Edge pour VS Code.

  4. Sélectionnez Microsoft Edge Tools pour VS Code, puis cliquez sur le bouton Installer :

    Installation de l’extension Microsoft Edge DevTools pour Visual Studio Code

En guise d’approche alternative, vous pouvez utiliser le navigateur pour télécharger l’extension Microsoft Edge DevTools à partir du site web visual Studio Marketplace. Accédez à Outils de développement Microsoft Edge pour Visual Studio Code.

Étape 4 : Installer Node.js et node Package Manager (npm)

Pour obtenir une analyse en direct (en temps réel) de votre code afin d’indiquer des problèmes, tels que des soulignements ondulés, et de proposer des correctifs rapides, vous devez installer Node.js et Node Package Manager (npm).

L’extension DevTools affiche une suggestion contextuelle pour installer Node.js et npm. Le texte de la suggestion est similaire à : « Installer Node.js & npm ? (suggéré, car vous avez installé cette extension) ».

  1. Cliquez sur le lien dans la fenêtre contextuelle, s’il s’ouvre.

  2. Installez Node.js et npm à partir deNode.js> Téléchargements > LTS (stable à long terme) (ou Actuel).

    Sur Windows, un .msi fichier est téléchargé, par exemple : node-v18.17.1-x64.msi

  3. Dans le volet Téléchargements du navigateur, cliquez sur Afficher dans le dossier, puis exécutez le fichier téléchargé. L’Assistant Installation Node.js s’ouvre. Cliquez sur le bouton Suivant , puis suivez les invites. Vous pouvez utiliser les options par défaut.

  4. Vérifiez que Node.js et npm sont installés, comme suit : dans Visual Studio Code, sélectionnez Afficher le>terminal. Vous pouvez également exécuter l’application git bash.

  5. À l’invite de commandes, entrez npm version. Les numéros de version sont affichés pour npm et pour node, ce qui indique que Node Package Manager et Node.js sont installés pour prendre en charge l’analyse des problèmes en ligne et en direct. Par exemple :

    $ npm version
{
   npm: '9.6.7',
   node: '18.17.1',
   ...
}

Voir aussi :

Étape 5 : Cloner le dépôt Demos

Le clonage du dépôt Demos est facultatif. Le dépôt Demos est utile pour suivre les différentes documentations DevTools. Si vous le souhaitez, au lieu de cloner le dépôt, vous pouvez ouvrir un répertoire de projet existant si vous en avez un.

En guise d’alternative, au lieu de cloner l’ensemble du répertoire, vous pouvez télécharger uniquement le répertoire de démonstration à faire . Par exemple, accédez à https://download-directory.github.io/ , puis collez l’URL https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do. Le .zip fichier est placé dans votre répertoire de téléchargement. Décompressez ces fichiers sources de page web dans un emplacement approprié. Le didacticiel Prise en main de l’extension DevTools pour Visual Studio Code utilise l’exemple d’emplacement :

C:\Users\username\Documents\GitHub\Demos\demo-to-do\

Pour cloner le dépôt Demos afin d’utiliser l’exemple de démonstration à faire pour ce tutoriel :

  1. Accédez au dépôt MicrosoftEdge/Demos.

  2. Si le bouton vert Code n’est pas affiché, cliquez sur Démonstrations dans le chemind’accès DémonstrationsMicrosoft Edge / en haut à gauche pour accéder à la page main du dépôt.

  3. Cliquez sur le bouton vert Code , puis sélectionnez le bouton Copier . Cet article suppose que vous utilisez les fonctionnalités de contrôle de code source dans Visual Studio Code. Vous pouvez également utiliser l’une des autres méthodes fournies, si vous savez que vous souhaitez utiliser cette approche à la place :

    • Ouvrir avec GitHub Desktop
    • Ouvrir avec Visual Studio
    • Télécharger ZIP

    Clonage du référentiel MicrosoftEdge/Demos

  4. Dans Visual Studio Code, dans la barre d’activité, cliquez sur le bouton Contrôle de code source (icône Contrôle de code source), puis sur le bouton Cloner le référentiel .

  5. Dans la zone de texte Fournir l’URL du référentiel , collez l’URL copiée, https://github.com/MicrosoftEdge/Demos.git puis appuyez sur Entrée. Une boîte de dialogue de sélection de dossier s’ouvre.

    Bouton Cloner le référentiel dans Visual Studio Code

  6. Accédez au chemin d’accès souhaité, par C:\Users\username\Documents\GitHub exemple ou Users/username/GitHub, puis cliquez sur le bouton Sélectionner l’emplacement du référentiel .

  7. Le message Clonage du dépôt Git s’affiche, puis vous êtes invité à ouvrir le dépôt cloné. Cliquez sur le bouton Ouvrir :

    Invité à ouvrir le référentiel cloné

  8. Si vous êtes invité à faire confiance..., cliquez sur le bouton Oui . Vous pouvez également cliquer sur le bouton Non et continuer avec la plupart des parties de cette procédure pas à pas.

    L’arborescence Explorer répertorie de nombreuses démonstrations, y compris la démonstration à faire.

  9. Dans Visual Studio Code, sélectionnez Fichier>Fermer le dossier.

  10. Dans la barre d’activités, cliquez sur le bouton Outils Microsoft Edge (icône Outils Microsoft Edge). Le volet Outils Microsoft Edge s’ouvre.

  11. Dans le voletCiblesdes outils> Microsoft Edge, cliquez sur le bouton Ouvrir le dossier. La boîte de dialogue Ouvrir le dossier s’ouvre. Accédez au demo-to-do dossier dans le dépôt de démonstration que vous avez cloné, sélectionnez le dossier ou accédez-y, puis cliquez sur le bouton Sélectionner un dossier :

    Sélection du dossier demo-to-do

    Un exemple d’emplacement de dépôt où le dépôt Demos a été cloné est illustré ci-dessus. Le demo-to-do dossier du dépôt Demos cloné s’ouvre dans le Explorer de Visual Studio Code, et aucun fichier n’existe launch.json encore :

    Ouverture initiale du dossier demo-to-do

Étape 6 : Configurer un serveur localhost

Si vous avez installé Node.js et npm, comme décrit ci-dessus, npx http-server est un moyen simple de démarrer un serveur web local. Vous pouvez passer directement aux étapes ci-dessous ou lire d’abord ces informations générales.

Dans de nombreux cas, vous n’avez pas besoin d’entrer une URL ou d’exécuter un serveur localhost. Par exemple, vous pouvez :

  • Ouvrez un dossier qui contient les fichiers sources de la page web, puis cliquez avec le bouton droit sur un .html fichier.
  • Entrez un chemin d’accès de fichier local dans la barre d’adresses, par C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html exemple (par défaut, page Réussite).
  • Entrez une URL de serveur distant dans la barre d’adresse de l’onglet Edge DevTools : Browser , par https://microsoftedge.github.io/Demos/demo-to-do/exemple .

Si votre page web utilise certaines API qui nécessitent l’exécution de la page web sur un serveur web, pour utiliser DevTools, vous devez démarrer un serveur web local à des fins de test. Si vous ne traitez pas votre projet sur un serveur web, mais seulement à la place, vous utilisez des fichiers locaux, vous pouvez toujours utiliser DevTools, avec la possibilité de débogage, en cliquant avec le bouton droit sur un fichier local .html . Les fonctionnalités de votre application qui nécessitent spécifiquement que votre application se trouve sur un serveur ne fonctionnent pas, et DevTools aura un utilitaire limité.

Pour plus d’informations sur http-server, consultez http-server : un serveur HTTP statique simple.

Configurer http-server

  1. Dans Visual Studio Code, sélectionnez Fichier>Ouvrir le dossier> , ouvrez le répertoire qui contient les .htmlfichiers , .csset .js pour une page web, telle que C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

    Dans l’exemple de chemin d’accès ci-dessus :

    • \Documents\GitHub\ est l’emplacement où le Demos référentiel a été cloné.
    • \Demos\ est le référentiel GitHub utilisé pour obtenir des exemples dans la documentation du développeur Microsoft Edge.
    • \demo-to-do\ est l’un des exemples de répertoires dans le référentiel.

  2. Dans Visual Studio Code, sélectionnez Afficher le>terminal. Ou, pour maintenir le serveur web en cours d’exécution quel que soit l’état de Visual Studio, ouvrez une invite de commandes en dehors de Visual Studio Code, par git bashexemple .

  3. cd dans le dossier que vous souhaitez traiter via http.

    Dans l’interpréteur de commandes git bash, utilisez des barres obliques, telles que :

    cd C:/Users/username/Documents/GitHub/Demos/demo-to-do/

    Ou, si vous utilisez une autre invite de commandes sur Windows, utilisez des barres obliques inverses, telles que :

    cd C:\Users\username\Documents\GitHub\Demos\demo-to-do\

Continuez ci-dessous.

Démarrer le serveur (npx http-server)

Ces étapes démarrent le serveur pour la première fois.

  1. Entrez la commande npx http-server:

    npx http-server

    Un serveur web local démarre sur le port 8080.

    Vous pouvez recevoir un message comme suit :

    Need to install the following packages:
  http-server@14.1.1
Ok to proceed? (y)

    Ou, si vous n’obtenez aucun fichier ou répertoire de ce type, vous pouvez exécuter : npm install --global http-server puis exécuter : http-server

  2. Entrez y.

    Windows demande s’il faut autoriser Node à communiquer sur le réseau :

    Autoriser Node à communiquer sur le réseau

  3. Cochez la case Réseaux privés , puis cliquez sur le bouton Autoriser l’accès .

    Des informations sur le serveur et l’URL localhost sont affichées, telles que :

    Starting up http-server, serving ./

Available on:
http://10.0.1.8:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server

    Les URL affichées sont généralement équivalentes à l’URL standard commune, http://localhost:8080.

    Démarrage du serveur

Ensuite, consultez Prise en main de l’extension DevTools pour Visual Studio Code.

Voir aussi