Exemple de code pour DevTools

Utilisez le référentiel Demos pour découvrir comment utiliser Microsoft Edge pour développer des pages web et des applications web. Il existe différentes façons d’afficher, télécharger et modifier ces pages web de démonstration, notamment :

  • DevTools dans Microsoft Edge.
  • Visual Studio Code, avec DevTools en option.
  • Visual Studio, avec DevTools en option.

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 Demo . La page en direct 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 des exemples DevTools

Voir :

Certains des exemples sont présentés ci-dessous.

Démo To Do

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

To Do demo and DevTools avec l’outil Sources sélectionné

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

Cette page Web de démonstration de refuge pour animaux est utile pour explorer diverses fonctionnalités de DevTools, y compris les fonctionnalités de test d’accessibilité.

  1. Ouvrez la page web de démonstration avec les 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 à côté de la page Web de démonstration.

La « 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 / Démos devtools-a11y-testing : contient des > fichiers tels que :

    • index.html - La page Web de démonstration, y compris les sections de page et les formulaires de saisie qui envoient des buttons.js données au 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.css, et 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. Ouvrir la page web de démonstration Commencer à déboguer 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 à côté de la page Web de démonstration.

La page web de démonstration « Démarrage du débogage de JavaScript avec DevTools »

Articles

Ces articles ou sections d’articles vous guident à l’aide de cette page web de démonstration :

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

  • Commencer à déboguer JavaScript : une procédure pas à pas plus approfondie de l’utilisation de la page web de démonstration avec le débogueur, la démonstration de diverses fonctionnalités du débogueur et 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 tutoriel approfondi sur l’utilisation de la page Web de démonstration.

    • index.html - La page Web avec un formulaire de saisie qui envoie des données au fichier JavaScript et qui affiche le résultat du JavaScript.

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

Clonez le référentiel « MicrosoftEdge/Demos » sur votre lecteur

Le référentiel Microsoft Edge / Demos est utile pour suivre la documentation des différents DevTools. Vous pouvez cloner le dépôt, 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.

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

Pour cloner le référentiel MicrosoftEdge/Demos sur votre lecteur local :

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

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

  3. Accédez au référentiel MicrosoftEdge/Demos 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 référentiel, et sauter l’étape d’invite de commande ci-dessous.

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

  6. Clonez le référentiel sur votre disque local, en entrant la chaîne d’URL que vous avez copiée à partir du référentiel 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 :

Passez à la section suivante.

Clonez le référentiel « MicrosoftEdge/Demos » sur votre lecteur à l’aide de VS Code

Pour cloner le référentiel MicrosoftEdge/Demos sur votre lecteur local :

  1. Accédez au référentiel MicrosoftEdge/Demos 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 instance de Visual Studio installée. Cette option s’affiche uniquement si vous êtes connecté.

    Clonage du référentiel MicrosoftEdge/Demos

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

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

  5. Naviguez jusqu’au chemin souhaité, tel que C:\Users\localAccount\Documents\GitHub ou Users/username/GitHub, puis cliquez sur le bouton Sélectionner l’emplacement du référentiel .

  6. Le message Cloning git repository s’affiche, puis vous êtes invité à ouvrir le dépôt cloné. Cliquez sur le bouton Ouvrir :

    Invite à ouvrir le référentiel cloné

  7. Si vous y êtes invité Faites-vous confiance..., cliquez sur le bouton Oui . Ou bien, cliquez sur le bouton Non et continuez avec la plupart des parties de cette procédure pas à pas.

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

Voir aussi :

Outils qui prennent en charge le clonage d’un référentiel et les opérations git commit/pull/push

Le clonage d’un référentiel permet de mettre à jour votre copie locale lors de la mise à jour du dépôt. De nombreux outils prennent en charge le clonage et la synchronisation avec un référentiel GitHub, tels que :

  • commandes git à une invite de commande telle que l’interpréteur de commandes « git bash ». C’est la principale façon dont cela est documenté ici.

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

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

  • Onglet Modifications Git Visual Studio > en regard de l’onglet de l’Explorateur de solutions dans le coin inférieur droit.

  • Version « clé point » 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 le point (.). Dans la barre d’activité de gauche, cliquez sur :

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

Télécharger le référentiel Demos

Le clonage du référentiel est recommandé plutôt que le téléchargement du dépôt, afin que vous puissiez extraire les mises à jour du dépôt 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 référentiel MicrosoftEdge/Demos .

  2. Cliquez sur le bouton déroulant Code , puis sur Télécharger 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 seul répertoire du référentiel Demos :

  1. Accédez à l’URL https://download-directory.github.io/https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do, puis collez-la .

    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 :

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

Pour utiliser cette section, effectuez d’abord les étapes décrites dans Cloner le référentiel « MicrosoftEdge/Démos » sur votre lecteur, ci-dessus.

Voir aussi :

Après avoir cloné (ou téléchargé) le référentiel Edge 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 Commande+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. Dans l’onglet Sources , à 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 (bouton Plus d’onglets).

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

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

    Sélection du répertoire démo-to-do

  7. Au-dessus de DevTools, l’invite « DevTools demande l’accès complet à (répertoire) » s’affiche. Cliquez sur le bouton Autoriser :

    DevTools demande l’accès pour ajouter un dossier à l’espace de travail

Démarrez 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 alors de toutes les fonctionnalités nécessaires à l’utilisation de DevTools en tant qu’IDE, pour cette démo 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’accès à localhost:8080:

Serveur démarré à partir du répertoire \Demos\demo-to-do

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

Si vous démarrez le serveur localhost à partir de l’ensemble \Demos\ du dossier, puis que vous 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 alors de toutes les fonctionnalités nécessaires pour 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’accès à localhost:8080:

Serveur démarré à partir du répertoire /demos/ au lieu d’un sous-répertoire demo spécifique

Ouverture d’un fichier HTML local à partir de l’Explorateur de fichiers et modification 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 dans l’outil Sources, ci-dessus.

  1. Dans l’Explorateur de fichiers sur Windows ou le Finder sur macOS, sélectionnez un fichier HTML à partir de la copie locale du référentiel Demos, par C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.htmlexemple .

    Le .html fichier est ouvert et affiché 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 l’onglet Page ou l’onglet Espace de travail .

Voir aussi :

Ouverture d’un fichier HTML local à partir de la boîte de dialogue Ouvrir du fichier du navigateur et le modifier 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 Commande+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 référentiel Demos , par C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.htmlexemple . Le .html fichier est ouvert et affiché 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 Commande+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 Plus d’onglets).

  5. Dans DevTools, à gauche, sélectionnez l’onglet Page, puis sélectionnez le fichier HTML, tel que index.html ou (index).

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

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

  8. Au milieu, volet Éditeur de l’outil Sources , modifiez le .html fichier. Par exemple, dans demo-to-do/index.html un 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 suivant les étapes décrites dans Ouvrir un dossier de démonstration à partir de l’onglet Espace de travail dans l’outil Sources ci-dessus.

    La modification s’affiche dans l’outil Modifications du panneau Aperçu rapide et un astérisque est ajouté au nom du fichier dans 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 Commande+S (macOS) pour enregistrer la modification. L’astérisque est supprimé de l’onglet index.html dans l’outil Sources .

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

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

Ouvrir un dossier de démonstration dans Visual Studio Code

Après avoir cloné (ou téléchargé) le référentiel Edge Demos :

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

  2. Dans le volet de l’Explorateur, cliquez sur le bouton Ouvrir le dossier. La boîte de dialogue Ouvrir un dossier s’ouvre. Accédez au demo-to-do dossier du référentiel 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’Explorer de Visual Studio Code :

    A ouvert initialement le dossier demo-to-do

Vous pouvez également ouvrir le dossier racine du référentiel Demos pour explorer tous les dossiers de démonstration dans le volet Explorer.

Voir aussi :

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

La plupart des fichiers Lisez-moi dans le référentiel 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 vous devez à la place dériver l’URL du serveur github.io pour afficher le fichier rendu, plutôt que d’afficher la liste de code du .html code source dans le répertoire GitHub.

Pour convertir de l’URL du répertoire de code source à GitHub.com à 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 au GitHub.com soit :

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

Les principaux composants 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 renseigner ce modèle d’URL GitHub.io, dans cet exemple :

  • [org] est MicrosoftEdge.
  • [repo] est Demos.
  • [path] is demo-to-do.

Par conséquent, l’URL du serveur GitHub.io qui en résulte 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 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’adresse du navigateur.

Voir également

Ouverture et modification de fichiers :

Téléchargement et clonage :

Exécution d’un serveur web local :

  • Dernière mise à jour :