Partager via

Exemple de code pour DevTools

  • Article

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 devTools facultatif.
  • 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.

Nom de la démonstration Description Répertoire du référentiel Page de démonstration en direct
Mappages sources de mise en miroir CSS Utilisé pour mettre à jour .css fichiers à partir de l’onglet Styles (modification en miroir CSS) pour l’extension DevTools pour Visual Studio Code. /css-mirroring-sourcemaps-demo/ s/o
Application TODO Application Simple To Do avec JavaScript à la vanille. Utilisé pour les captures d’écran de la documentation Microsoft Edge DevTools et pour l’ouverture de DevTools et du navigateur DevTools pour l’extension DevTools pour Visual Studio Code. /demo-to-do/ Mes tâches
Éléments détachés Démonstration de type chat. Utilisé pour déboguer les fuites de mémoire DOM avec l’outil Éléments détachés. /detached-elements/ Simuler le trafic
Vue 3D Utilisé pour Parcourir les couches de page web, z-index et DOM à l’aide de l’outil Vue 3D. /devtools-3d/ Démonstration de l’outil Vue 3D de Microsoft Edge DevTools
Test d’accessibilité Utilisé pour les fonctionnalités de test d’accessibilité. /devtools-a11y-testing/ Refuge pour animaux
Problème DevTools : animation d’une propriété CSS qui nécessite une disposition Illustre l’avertissement des outils Problèmes et éléments lorsque les propriétés CSS qui nécessitent une disposition sont animées. /devtools-animated-property-issue/ Démonstration de propriété CSS animée
Pages de démonstration du panneau de console Utilisé pour la vue d’ensemble de la console, journaliser les messages dans l’outil Console et Corriger les erreurs JavaScript signalées dans la console. /devtools-console/ Pages de démonstration du panneau console DevTools
Interaction DOM à partir de la page de démonstration de la console Utilisé pour interagir avec le DOM à l’aide de la console. /devtools-console-dom-interactions/ Démonstration des interactions DOM de l’outil console DevTools
Correctif de bogue de contraste Utilisé pour améliorer le contraste dans Microsoft Edge DevTools : étude de cas de correction de bogues. /devtools-contrast-bugfix/ Test de tous les badges dans DevTools pour les problèmes de contraste
Exemples CSS Utilisé pour la prise en main de l’affichage et de la modification de CSS. /devtools-css-get-started/ Exemples CSS
Exemples DOM Utilisé pour la prise en main de l’affichage et de la modification du DOM. /devtools-dom-get-started/ Exemples DOM
Expliquer les erreurs et avertissements de la console dans Copilot dans Edge Génère des erreurs dans la console qui peuvent ensuite être expliquées à l’aide de Copilot dans Edge. /devtools-explain-error/ Démonstration expliquant les erreurs de la console
Outil Inspecter Utilisé pour Analyser les pages à l’aide de l’outil Inspecter. /devtools-inspect/ Inspecter la démonstration
Débogage de JavaScript qui ajoute deux nombres Utilisé pour bien démarrer le débogage de JavaScript. /devtools-js-get-started/ Démonstration : Débogage de JavaScript avec Microsoft Edge DevTools
Capture instantanée du tas de mémoire Utilisé pour enregistrer des instantanés de tas à l’aide de l’outil Mémoire. /devtools-memory-heap-snapshot/ s/o
Onglets Activité des performances Utilisé pour afficher les activités d’une table, à propos des onglets Bottom-Up, Call Tree et Event Log de l’outil Performance. /devtools-performance-activitytabs/ Démonstration des onglets d’activité
Animation lente Utilisé pour présentation de l’outil Performance. /devtools-performance-get-started/ Animation lente
postMessage Trace Events Teste postMessage les événements de trace dans l’outil Performance . Utilisé pour afficher des messages entre des fenêtres, des iframes et des workers dédiés dans Référence des fonctionnalités de performances. /devtools-postmessage-perf-timeline/ démonstration des événements de suivi postMessage
CSS : pseudo-classe cible Utilisé pour le support forçant l’état CSS :target. /devtools-target-pseudo/ CSS :démonstration de pseudo-classe cible
Visualiseur d’instantané de tas Code source de l’extension Visualiseur d’instantané de tas pour DevTools. /heap-snapshot-visualizer/ s/o
Données factices JSON Fichiers JSON simples. Utilisé pour afficher le format JSON. /json-dummy-data/ Données factices JSON
Inspecter l’activité réseau Utilisé pour Inspecter l’activité réseau. /network-tutorial/ Inspecter la démonstration de l’activité réseau
Galerie de photos Utilisé pour la vérité sur les performances du sélecteur CSS. /photo-gallery/ Galerie de photos
Calendrier lent Application de démonstration de calendrier simple pour tester diverses fonctionnalités DevTools, telles que la prise en charge de l’outil Performance et de la carte source. /slow-calendar/ Calendrier lent
Espaces de travail Utilisez pour Modifier des fichiers avec des espaces de travail (onglet Système de fichiers) dans l’outil Sources . /workspaces/ Démonstration des espaces de travail 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 :

Pour effectuer une démonstration et DevTools avec l’outil Sources sélectionné

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.

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

Articles

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

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.

Page web de démonstration « Prise en main du débogage de JavaScript avec DevTools »

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.

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

Le dépôt Demos est utile pour suivre les différentes documentations DevTools.

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

Pour télécharger le dépôt Demos :

  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 :

Cloner le dépôt Demos

Le clonage d’un référentiel permet de mettre à jour votre copie locale lorsque le dépôt est mis à jour. L’interface utilisateur GitHub et divers outils prennent en charge le clonage. Nous allons montrer le clonage à l’aide de Visual Studio Code, mais vous pouvez utiliser de nombreux autres outils de codage, tels que GitHub Desktop, Visual Studio ou Git Bash Shell.

Pour cloner le référentiel :

  1. Dans une nouvelle fenêtre ou un nouvel onglet, 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émonstrationsMicrosoft Edge / en haut à gauche pour accéder à la page principale du dépôt.

  3. Cliquez sur le bouton déroulant Code , puis sur le bouton Copier en regard de l’URL https://github.com/MicrosoftEdge/Demos.git. Vous pouvez ensuite coller l’URL dans git bash ou une boîte de dialogue Visual Studio Code, par exemple.

    Sinon, cliquez sur le bouton de liste déroulante 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 instance Visual Studio installée. Cette option s’affiche uniquement si vous êtes connecté.

    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 de l’Explorateur répertorie de nombreuses démonstrations, y compris la démonstration à faire.

Voir aussi :

Ouvrir un dossier de démonstration dans l’outil Sources et modifier un fichier

Pour utiliser cette section, commencez par télécharger ou cloner le dépôt Demos.

Pour modifier des fichiers locaux dans l’outil Sources , vous devrez peut-être d’abord cliquer sur le bouton Autoriser pour accorder l’accès en lecture/écriture. Pour ce faire, suivez les étapes décrites dans Ouverture d’un dossier à partir de l’onglet Système de fichiers (espace de travail) de l’outil Sources ci-dessous.

Voir aussi :

  • Approches comparées dans l’extension Microsoft Edge DevTools pour Visual Studio Code. Résume et compare plusieurs options de modification des fichiers web.

Ouverture d’un dossier à partir de l’onglet Système de fichiers (espace de travail) dans l’outil Sources

Après avoir téléchargé ou cloné le dépôt Demos :

  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 (icône Autres onglets).

  4. Sous l’onglet Sources , sur la gauche, sélectionnez l’onglet Système de fichiers, qui est regroupé avec l’onglet Page . Si l’onglet Système de fichiers n’est pas affiché, cliquez sur le bouton Plus d’onglets (autres 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 :

    Sélection du répertoire demo-to-do

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

    DevTools demande l’accès pour ajouter un dossier à un espace de travail sous l’onglet Système de fichiers

Pour modifier les fichiers, consultez les étapes de modification de la section suivante.

Voir aussi :

Ouverture d’un fichier HTML local à partir de la boîte de dialogue Ouvrir le fichier du navigateur et modification de celui-ci à partir de l’onglet Page de l’outil Sources

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 Ouverture d’un dossier à partir de l’onglet Système de fichiers (espace de travail) de l’outil Sources ci-dessus.

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\username\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 (icône Autres 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 (icône 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 à partir de l’onglet Système de fichiers (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 :

    Page de démonstration à faire modifiée avant d’enregistrer les modifications

  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 :

    Page de démonstration à faire modifiée après l’enregistrement des modifications et l’actualisation

Ouverture d’un fichier HTML local à partir de l’Explorateur de fichiers et modification dans le navigateur

  1. Dans l’Explorateur de fichiers sur Windows ou le Finder sur macOS, sélectionnez un fichier HTML à partir de la copie locale du dépôt Demos , par C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.htmlexemple . Le .html fichier est ouvert et rendu dans Microsoft Edge.

  2. Suivez les étapes décrites dans les sections ci-dessus.

Ouvrir un dossier de démonstration dans Visual Studio Code

Après avoir téléchargé ou cloné le dépôt Demos :

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

  2. Dans le volet Explorateur , 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 l’Explorateur de Visual Studio Code :

    Ouverture initiale du dossier demo-to-do

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

Voir aussi :

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.

Voir aussi

Ouverture et modification de fichiers :

Téléchargement et clonage :

Exécution d’un serveur web local :