Exemple de code pour DevTools

Utilisez le dépôt Demos pour apprendre à utiliser Microsoft Edge pour développer des pages web et des applications web. Il existe différentes façons d’afficher, de télécharger et de modifier ces pages web de démonstration, notamment :

• DevTools dans Microsoft Edge.
• Visual Studio Code, avec des DevTools facultatifs.
• Visual Studio, avec devTools facultatif.

Pour afficher le code source d’une page web de démonstration rendue dans DevTools dans Microsoft Edge :

1. Dans une page Lisez-moi, cliquez sur le lien Démonstration . La page dynamique s’ouvre dans Microsoft Edge.

2. Cliquez avec le bouton droit sur la page web de démonstration, puis sélectionnez Inspecter pour ouvrir DevTools.

Liste d’exemples DevTools

Les démonstrations suivantes illustrent les fonctionnalités DevTools.

Quelques-uns de ces exemples sont présentés ci-dessous.

Démonstration To Do

Cette page web de liste des tâches simple est utilisée pour illustrer diverses fonctionnalités DevTools. Il contient un .html fichier, un .js fichier et .css des fichiers :

• Page rendue : application TODO

• Code source : demo-to-do

Page web de démonstration avec des problèmes d’accessibilité

Cette page web de démonstration d’Animal Shelter est utile pour explorer diverses fonctionnalités DevTools, notamment les fonctionnalités de test d’accessibilité.

1. Ouvrez la page web de démonstration avec des problèmes d’accessibilité dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit n’importe où dans la page web rendue, puis sélectionnez Inspecter. DevTools s’ouvre en regard de la page web de démonstration.

Articles

Ces articles vous guident dans l’utilisation de cette page web de démonstration :

• Utilisez l’outil Inspecter pour détecter les problèmes d’accessibilité en pointant sur la page web : un des articles courts dérivés des sections de l’article ci-dessus.

• Fonctionnalités de test d’accessibilité : liste des fonctionnalités de test d’accessibilité de DevTools, avec des liens vers plusieurs articles qui utilisent la « Page web de démonstration avec des problèmes d’accessibilité ».

Référentiel de code source

Il s’agit du référentiel de code source et de son répertoire qui stocke les fichiers de cette page web de démonstration :

• MicrosoftEdge/Demos > devtools-a11y-testing - Contient des fichiers, notamment :

  • index.html - La page web de démonstration, y compris les sections de page et les formulaires d’entrée qui envoient des données au buttons.js fichier JavaScript. Pour afficher la page web rendue, utilisez le lien de la page web de démonstration ci-dessus.

  • buttons.js - Contient le code JavaScript utilisé par la page web de démonstration.

  • styles.css, light-theme.csset dark-theme.css - Fichiers CSS qui contrôlent la présentation de la page web de démonstration.

  • Fichiers image utilisés dans la page web de démonstration.

Page web de démonstration : Débogage de JavaScript avec DevTools

Cette page web de démonstration est utile pour explorer l’outil Sources , en particulier le débogueur JavaScript.

1. Ouvrez la page web de démonstration Prise en main du débogage de JavaScript avec DevTools dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit n’importe où dans la page web rendue, puis sélectionnez Inspecter. DevTools s’ouvre en regard de la page web de démonstration.

Articles

Ces articles ou sections d’articles vous guident tout au long de l’utilisation de cette page web de démonstration :

• L’approche de base de l’utilisation d’un débogueur dans vue d’ensemble de l’outil Sources. Cette section d’article vous guide brièvement dans les étapes d’utilisation du débogueur JavaScript dans l’outil Sources , afin de trouver le bogue dans la page web de démonstration. Pour corriger le bogue, vous convertissez les chaînes d’entrée en nombres avant de les ajouter.

• Prise en main du débogage de JavaScript : procédure pas à pas plus détaillée de l’utilisation de la page web de démonstration avec le débogueur, de la démonstration des différentes fonctionnalités du débogueur et de la définition de différents types de points d’arrêt.

Référentiel de code source

Il s’agit du référentiel de code source et de son répertoire qui stocke les fichiers de cette page web de démonstration :

• MicrosoftEdge/Demos > devtools-js-get-started - Contient les fichiers :

  • README.md - Contient des liens vers la page web de démonstration rendue et l’article détaillé du tutoriel sur l’utilisation de la page web de démonstration.

  • index.html - Page web avec un formulaire d’entrée qui envoie des données au fichier JavaScript et qui affiche le résultat du code JavaScript.

  • get-started.js - Fichier JavaScript utilisé par le formulaire dans la page web de démonstration.

Cloner le dépôt Demos Edge sur votre lecteur

Le référentiel Microsoft Edge/Demos est utile pour suivre les différentes documentations DevTools. Vous pouvez cloner le référentiel, démarrer un serveur web localhost dans un dossier du référentiel cloné, puis modifier les fichiers de démonstration directement dans DevTools ou dans un éditeur tel que VS Code.

Il est recommandé de cloner le référentiel plutôt que de le télécharger, afin que vous puissiez extraire les mises à jour du référentiel et participer pleinement au dépôt.

Pour cloner le dépôt MicrosoftEdge/Demos sur votre lecteur local :

1. Dans une invite de commandes, entrez git pour case activée si git est installé.

2. Si ce n’est pas déjà fait, téléchargez git et installez-le.

3. Accédez à MicrosoftEdge / Démonstrations dans une nouvelle fenêtre ou un nouvel onglet.

4. Cliquez sur le bouton déroulant Code , puis sur le bouton Copier l’URL dans le Presse-papiers .

   L’URL est copiée dans le Presse-papiers : https://github.com/MicrosoftEdge/Demos.git

   Ou, si GitHub Desktop est installé, cliquez sur Ouvrir avec GitHub Desktop pour cloner le dépôt, puis ignorez l’étape d’invite de commandes ci-dessous.

5. Ouvrez une invite de commandes, telle que git bash.

6. Clonez le référentiel sur votre lecteur local, en entrant la chaîne d’URL que vous avez copiée à partir du dépôt GitHub. Si vous utilisez une invite de commandes :

   # example location where the repo directory will be added:
   cd ~/GitHub
   cd c:/users/localAccount/GitHub/  # alt format
   git clone https://github.com/MicrosoftEdge/Demos.git
   

Pour plus d’informations sur le clonage d’un dépôt, consultez :

• Clonage d’un dépôt - Documentation GitHub.

Passez à la section suivante.

Cloner le dépôt Demos Edge sur votre lecteur à l’aide de VS Code

Pour cloner le dépôt MicrosoftEdge/Demos sur votre lecteur local :

1. Accédez à MicrosoftEdge / Démonstrations dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez sur le bouton déroulant Code , puis cliquez sur Ouvrir avec Visual Studio s’il apparaît. Une liste d’éléments de sélecteur de gestionnaire est proposée, un par Visual Studio instance installé. Cette option s’affiche uniquement si vous êtes connecté.

   

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

4. 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.

   

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

6. 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 :

   

7. 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.

Voir aussi :

• Clonage d’un dépôt - Documentation GitHub.
• Clonez le référentiel WebView2Samples dans Configurer votre environnement de développement pour WebView2.

Outils qui prennent en charge le clonage d’un dépôt et les opérations git commit/pull/push

Le clonage d’un référentiel permet de mettre à jour votre copie locale lorsque le dépôt est mis à jour. De nombreux outils prennent en charge le clonage et la synchronisation avec un dépôt GitHub, par exemple :

• Commandes git à une invite de commandes telle que l’interpréteur de commandes « git bash ». C’est la méthode principale qui est documentée ici.

• GitHub Desktop. S’intègre bien aux dépôts GitHub et aux demandes de tirage, ainsi qu’à VS Code.

• Visual Studio Code. Dans la barre d’activité à gauche, cliquez sur Contrôle de code source.

• Onglet Modifications git de Visual Studio > en regard de l’onglet Explorateur de solutions en bas à droite.

• Version « dot key » de VS Code dans le navigateur Edge. Au Github.com, lors de l’affichage d’une branche ou d’une demande de tirage (PR), appuyez sur la touche point (.). Dans la barre d’activité à gauche, cliquez sur :

  • Contrôle de code source
  • Demandes de tirage GitHub
  • Demande de tirage GitHub

Télécharger le dépôt Demos

Il est recommandé de cloner le référentiel plutôt que de le télécharger, afin que vous puissiez extraire les mises à jour du référentiel et participer pleinement au dépôt.

Si vous souhaitez simplement télécharger le dépôt Demos au lieu de le cloner :

1. Dans une nouvelle fenêtre ou un nouvel onglet, accédez au dépôt MicrosoftEdge/Demos .

2. Cliquez sur le bouton déroulant Code , puis cliquez sur Télécharger le fichier ZIP.

   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é.

Pour télécharger un répertoire unique du dépôt Demos :

1. 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é.

Voir aussi :

• Téléchargez le référentiel WebView2Samples dans Configurer votre environnement de développement pour WebView2.

Ouvrir un dossier de démonstration à partir de l’onglet Espace de travail de l’outil Sources

Pour utiliser cette section, commencez par cloner le dépôt de démonstrations Edge sur votre lecteur, ci-dessus.

Voir aussi :

• Tutoriel sur l’espace de travail (onglet Espace de travail de l’outil Sources)
• Approches comparées dans l’extension Microsoft Edge DevTools pour Visual Studio Code. Résume et compare plusieurs options de modification des fichiers web.

Après le clonage (ou le téléchargement) du dépôt de démonstrations Edge :

1. Dans Microsoft Edge, ouvrez un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

3. Dans DevTools, dans la barre d’outils principale, sélectionnez l’onglet Sources . Si cet onglet n’est pas visible, cliquez sur le bouton Plus d’onglets ().

4. Sous l’onglet Sources , sur la gauche, sélectionnez l’onglet Espace de travail , qui est regroupé avec l’onglet Page . Si l’onglet Espace de travail n’est pas affiché, cliquez sur le bouton Plus d’onglets ().

5. Cliquez sur + Ajouter un dossier à l’espace de travail. Une boîte de dialogue de sélection de dossier s’ouvre.

6. Sélectionnez un dossier spécifique, par exemple demo-to-do, ou sélectionnez le dossier racine Demos :

   

7. Au-dessus de DevTools, vous êtes invité à « DevTools demande un accès complet à (répertoire) ». Cliquez sur le bouton Autoriser :

   

Démarrer le serveur localhost

Si vous démarrez le serveur localhost à partir d’un dossier de démonstration spécifique, tel que \Demos\demo-to-do, puis accédez à localhost:8080 (ou ouvrez simplement le fichier local comme C:\Users\localAccount\GitHub\Demos\demo-to-do\index.html dans Microsoft Edge), la démonstration spécifique s’affiche immédiatement dans le navigateur. Vous pouvez ensuite ajouter uniquement le répertoire de démonstration spécifique, tel que C:\Users\localAccount\GitHub\Demos\demo-to-do\, à l’onglet Espace de travail de l’outil Sources . Vous disposez ensuite de toutes les fonctionnalités permettant d’utiliser DevTools en tant qu’IDE, pour cette démonstration spécifique.

Démarrage du serveur à partir d’un répertoire de démonstration spécifique :

$ cd ~/GitHub/Demos/demo-to-do
$ npx http-server

Exemple de répertoire à ajouter à l’onglet Espace de travail de l’outil Sources : C:\Users\localAccount\GitHub\Demos\demo-to-do

Résultat de l’utilisation de localhost:8080:

Démarrage du serveur localhost à partir du répertoire Demos

Si vous démarrez le serveur localhost à partir du dossier entier \Demos\ , puis accédez à localhost:8080, vous pouvez accéder à chaque démonstration à partir du navigateur. Vous pouvez ajouter l’intégralité du dossier cloné /Demos/ à l’onglet Espace de travail de l’outil Sources . Vous disposez ensuite de toutes les fonctionnalités permettant d’utiliser DevTools en tant qu’IDE.

Démarrage du serveur à partir de l’ensemble \Demos\ du répertoire :

$ cd ~/GitHub/Demos
$ cd "C:\Users\localAccount\GitHub\Demos"  # alt syntax
$ npx http-server

Exemple de répertoire à ajouter à l’onglet Espace de travail de l’outil Sources : C:\Users\localAccount\GitHub\Demos

Résultat de l’utilisation de localhost:8080:

Ouverture d’un fichier HTML local à partir de Explorateur de fichiers et modification de celui-ci dans DevTools

Pour modifier des fichiers dans l’outil Sources , avant d’effectuer les étapes de cette section, vous devrez peut-être cliquer sur le bouton Autoriser pour accorder l’accès en lecture/écriture en suivant les étapes décrites dans Ouvrir un dossier de démonstration à partir de l’onglet Espace de travail de l’outil Sources, ci-dessus.

1. Dans Explorateur de fichiers sur Windows ou finder sur macOS, sélectionnez un fichier HTML à partir de la copie locale du dépôt Demos, par exemple C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html.

   Le .html fichier est ouvert et rendu dans Microsoft Edge.

   La barre d’adresse affiche : Fichier | C :/Users/localAccount/GitHub/Demos/demo-to-do/index.html

   La sélection de l’URL dans la barre d’adresse affiche le format de l’URL : file:///C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

2. Cliquez avec le bouton droit sur la page web rendue, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Sélectionnez l’outil Sources , puis sélectionnez l’onglet Page ou l’onglet Espace de travail .

Voir aussi :

• Modifier et enregistrer des fichiers dans un espace de travail (onglet Espace de travail de l’outil Sources) pour ouvrir un dossier local dans l’outil Sources de DevTools dans le navigateur.

Ouverture d’un fichier HTML local à partir de la boîte de dialogue Ouvrir un fichier du navigateur et modification de celui-ci dans DevTools

Pour ouvrir un .html fichier et le modifier :

1. Dans Microsoft Edge, ouvrez un nouvel onglet, puis appuyez sur Ctrl+O (Windows/Linux) ou Cmd+O (macOS). Une boîte de dialogue de sélection de fichier s’ouvre.

2. Sélectionnez un fichier HTML à partir de la copie locale du dépôt Demos , par C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.htmlexemple . Le .html fichier est ouvert et rendu dans Microsoft Edge.

3. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

4. Dans DevTools, dans la barre d’outils principale, sélectionnez l’onglet Sources . Si cet onglet n’est pas visible, cliquez sur le bouton Plus d’onglets ().

5. Dans DevTools, sur la gauche, sélectionnez l’onglet Page, puis sélectionnez le fichier HTML, par index.html exemple ou (index).

6. Appuyez sur Échap pour ouvrir le panneau Affichage rapide en bas de DevTools.

7. Dans la barre d’outils Affichage rapide , cliquez sur le bouton Autres outils (), puis sélectionnez l’outil Modifications .

8. Au milieu, volet éditeur de l’outil Sources , modifiez le .html fichier. Par exemple, dans le demo-to-do/index.html dossier, dans la ligne de <h1> titre, remplacez Mes tâches par Mes tâches modifiées :

   <h1>📋 My modified tasks</h1>
   

   Si la modification n’est pas activée, cliquez sur le bouton Autoriser pour accorder l’accès en lecture/écriture au dossier en effectuant les étapes décrites dans Ouvrir un dossier de démonstration à partir de l’onglet Espace de travail de l’outil Sources ci-dessus.

   La modification est affichée dans l’outil Modifications du panneau Affichage rapide , et un astérisque est ajouté au nom de fichier sous l’onglet index.html de l’outil Sources :

   

9. Appuyez sur Ctrl+S (Windows, Linux) ou Cmd+S (macOS) pour enregistrer la modification. L’astérisque est supprimé de l’onglet index.html de l’outil Sources .

10. Actualisez la page. La modification est affichée dans la page web rendue ; par exemple, le mot modifié est ajouté au titre :

    

Ouvrir un dossier de démonstration dans Visual Studio Code

Après le clonage (ou le téléchargement) du dépôt de démonstrations Edge :

1. Dans Visual Studio Code, dans la barre d’activité, cliquez sur le bouton Explorer (). Le volet Explorer s’ouvre.

2. Dans le volet Explorer, 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 :

   

   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 :

   

Vous pouvez également ouvrir le dossier racine du dépôt Demos pour explorer tous les dossiers de démonstration dans le volet Explorer.

Voir aussi :

• Extension Microsoft Edge DevTools pour Visual Studio Code : pour ouvrir un dossier local dans Visual Studio Code et utiliser DevTools dans Visual Studio Code.

Modèles d’URL pour les pages web de démonstration rendues et le code source

La plupart des fichiers Lisez-moi dans le dépôt Demos ont un lien qui ouvre le fichier rendu .html à partir du serveur GitHub.io. Parfois, vous avez une URL pour un fichier source HTML à GitHub.com, mais à la place, vous devez dériver l’URL du serveur github.io pour afficher le fichier rendu, au lieu d’afficher la liste de code du .html code source dans le répertoire GitHub.

Pour effectuer une conversion à partir de l’URL du répertoire de code source à GitHub.com vers l’URL d’une page web de démonstration rendue à GitHub.io, le modèle est le suivant.

Supposons que l’URL du code source de la page web à GitHub.com soit :

• https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do/

Les composants clés de cette URL GitHub.com sont les suivants :

• https://github.com/[org]/[repo]/tree/main/[path]

En revanche, le modèle d’URL GitHub.io souhaité est le suivant :

• https://[org].github.io/[repo]/[path]

Pour remplir ce modèle d’URL GitHub.io, dans cet exemple :

• [org] est MicrosoftEdge.
• [référentiel] est Demos.
• [path] est demo-to-do.

Par conséquent, l’URL de serveur GitHub.io obtenue pour la page web de démonstration rendue est la suivante :

• https://MicrosoftEdge.github.io/Demos/demo-to-do/

Ces URL ne respectent pas la casse.

Lorsque vous exécutez un serveur localhost et que vous le démarrez dans un dossier de dépôt cloné, tel que C:\Users\localAccount\GitHub\Demos\workspaces, vous voyez localhost:8080 généralement dans la barre d’adresses du navigateur.

Voir également

Ouverture et modification de fichiers :

• Modifier et enregistrer des fichiers dans un espace de travail (onglet Espace de travail de l’outil Sources) : utilisez DevTools comme environnement de développement intégré (IDE) dans le navigateur.
• Ajoutez un dossier local à l’espace de travail pour utiliser DevTools pour modifier des fichiers et enregistrer les modifications sur le disque dans Vue d’ensemble de l’outil Sources.
• Approches comparées dans l’extension Microsoft Edge DevTools pour Visual Studio Code. Résume et compare plusieurs options de modification des fichiers web.
• Intégration de l’IDE Microsoft Edge : développement d’applications web à l’aide de Visual Studio Code ou Visual Studio, y compris Microsoft Edge DevTools.

Téléchargement et clonage :

• Étape 5 : Clonez le dépôt Demos dans Installation de l’extension DevTools pour Visual Studio Code.
• Clonage d’un dépôt - Documentation GitHub.

Exécution d’un serveur web local :

• Étape 6 : Configurer un serveur localhost dans Installation de l’extension DevTools pour Visual Studio Code.