Didacticiel de travail (outil Sources Onglet Espace de travail)

Pour utiliser DevTools en tant qu’IDE, procédez comme suit : apportez des modifications à la page web dans l’onglet Espace de travail de l’outil Sources, puis enregistrez les modifications apportées aux fichiers sources sur le disque.

Vous pouvez lire ou suivre ces étapes qui montrent comment configurer et utiliser un espace de travail dans DevTools. Une fois l’espace de travail configuré, les modifications que vous apportez aux fichiers dans l’espace de travail à l’aide de DevTools sont enregistrées sur votre ordinateur local.

Étape 1 : Clonez le dépôt de démonstrations Edge sur votre lecteur local

Tout d’abord, vous configurez un répertoire local qui contient les fichiers sources de la page web, comme la page web de démonstration des espaces de travail.

Clonez le référentiel MicrosoftEdge/Demos sur votre lecteur local, y compris le dossier demo /workspaces/ , comme suit :

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

2. Accédez au référentiel MicrosoftEdge/Demos dans une nouvelle fenêtre ou un nouvel onglet.

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

   Vous pouvez également utiliser le volet Contrôle de code source de Visual Studio Code pour cloner le référentiel et ignorer l’étape d’invite de commande ci-dessous.

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

5. 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 l’invite de commande git bash :

   # Example location where the repo directory will be added:
   cd ~/GitHub
   git clone https://github.com/MicrosoftEdge/Demos.git
   

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

• Clonage d’un référentiel - Documents GitHub.

Passez à la section suivante.

Étape 2 : Démarrer le serveur localhost dans le répertoire des fichiers source de la page web

1. Si ce n’est déjà fait, installez une version à jour de Node.js et npm à partir de Node.js.

   Voir aussi :

   • Installez Node.js et Node Gestionnaire de package (npm) dans Installation de l’extension DevTools pour Visual Studio Code.

2. Accédez à une invite de commandes, telle que l’interpréteur de commandes git bash ou le volet Terminal dans Microsoft Visual Studio Code.

3. Modifiez le Demos répertoire du workspaces référentiel :

   cd ~/GitHub/Demos/workspaces
   pwd
   

   Un répertoire à utiliser avec l’onglet Espace de travail de l’outil Sources peut avoir n’importe quel nom. Ce répertoire de démonstration est nommé /workspaces/.

4. Créez une branche fonctionnelle nommée « test » et basculez vers celle-ci (pour éviter d’altérer les fichiers de démonstration dans la branche « principale ») :

   git checkout -b test
   

   Cela équivaut à :

   git branch test
   git switch test
   

5. Exécutez l’une des commandes suivantes pour démarrer le serveur web :

   # Node.js option
   npx http-server
   

   Pour plus d’informations et d’options, consultez Démarrage du serveur (serveur http npx) dans Installation de l’extension DevTools pour Visual Studio Code.

   # Python 2 option
   cd ~/GitHub/demos/workspaces
   python -m SimpleHTTPServer
   

   # Python 3 option
   cd ~/GitHub/demos/workspaces
   python -m http.server
   

6. Ouvrez un onglet dans Microsoft Edge et accédez à la version hébergée localement du site. Vous y accédez généralement en accédant à :localhost:8080

   

   Une autre URL équivalente courante est http://0.0.0.0:8080. Le numéro de port par défaut de l’option de serveur Python est 8000. Le numéro de port exact peut être différent.

   La page Web de démonstration DevTools Workspaces s’ouvre .

   (Le lien dans la dernière démo peut indiquer « Modifier le fichier avec des espaces de travail » ou « Modifier et enregistrer des fichiers dans un espace de travail (onglet Espace de travail de l’outil Sources) ».)

Voir aussi :

• Exécution d’un serveur HTTP local simple dans Comment configurer un serveur de test local ? sur MDN : affiche Python.

Passez à la section suivante.

Étape 3 : Ajouter un dossier d’espace de travail dans l’outil Sources

Ensuite, définissez un espace de travail dans DevTools :

1. Cliquez avec le bouton droit sur la page Web de démonstration des espaces de travail DevTools hébergée localement, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+J (Windows, Linux) ou Commande+Option+J (macOS).

   DevTools s’ouvre.

2. Cliquez sur l’onglet Sources ().

3. Dans le volet Navigateur (à gauche), cliquez sur l’onglet Espace de travail (qui est regroupé avec l’onglet Page ) :

   

4. Cliquez sur le bouton Ajouter un dossier .

   La boîte de dialogue Sélectionner un dossier s’ouvre.

5. Accédez au répertoire cloné /Demos/workspace/ que vous avez créé. Par exemple, dans la zone de texte Dossier : , entrez le chemin d’accès ( C:\Users\localAccount\GitHub\Demos\workspaces\.

6. Cliquez sur le bouton Sélectionner un dossier .

   DevTools vous invite à accorder à DevTools l’accès complet à votre /workspaces/ répertoire.

7. Cliquez sur le bouton Autoriser pour accorder à DevTools la permission de lire et d’écrire dans le répertoire.

   Dans l’onglet Espace de travail se trouvent les icônes de page avec un point vert « mappé », pour index.html, script.jset styles.css. Le point vert « mappé » indique que DevTools a établi un mappage entre une ressource réseau de la page reçue du serveur web et le fichier source local dans votre /Demos/workspace/ répertoire :

   

Passez à la section suivante.

Étape 4 : Enregistrer une modification CSS sur le disque (via l’onglet Styles de l’outil Éléments)

Ensuite, vous modifiez CSS et enregistrez les modifications apportées au fichier source. Nous utilisons ici l’onglet Styles de l’outil Éléments, assisté par ses contrôles d’interface utilisateur, bien que nous puissions modifier directement le fichier CSS dans l’éditeur de fichier de l’onglet Espace de travail de l’outil Sources.

Pour apporter une modification au fichier CSS et l’enregistrer sur le disque à l’aide de l’onglet Styles de l’outil Éléments :

1. Dans l’outil Sources , dans l’onglet Espace de travail (regroupé avec l’onglet Page ), sélectionnez styles.css pour l’ouvrir dans le volet éditeur. La color propriété de l’élément h1 est définie sur fuchsia:

   

2. Sélectionnez l’outil Éléments () ; puis, dans l’arborescence DOM, développez l’élément <body> , puis sélectionnez l’élément <h1> .

   Le volet Styles affiche les règles CSS appliquées à l’élément <h1> . L’icône du fichier mappé () à côté de styles.css:1 se trouve une page avec un point vert « mappé ». Le point vert « mappé » signifie que toutes les modifications que vous apportez à cette règle CSS sont mappées styles.css dans votre /Demos/workspace/ répertoire :

   

3. Remplacez la valeur de la propriété de l’élément color<h1> par orange. Pour ce faire, sélectionnez l’élément <h1> dans l’arborescence DOM. Dans la règle CSS pour h1, cliquez sur fuchsia, commencez à taper orange, puis sélectionnez orange dans la liste des couleurs :

   

4. Sélectionnez l’outil Sources , cliquez styles.cssavec le bouton droit, puis sélectionnez Ouvrir dans le dossier conteneur.

   L’explorateur de fichiers ou le Finder s’ouvre.

5. Ouvrez la copie de ce qui se trouve dans votre /Demos/workspace/ répertoire dans un éditeur de styles.css texte, tel que Visual Studio Code. La color propriété est maintenant définie sur la nouvelle couleur, qui est orange dans cet exemple. La modification n’a pas seulement été effectuée dans la copie du fichier renvoyée par le serveur Web ; La modification a également été effectuée dans votre fichier mappé dans le répertoire de votre /Demos/workspace/ espace de travail.

6. Actualisez la page.

La couleur de l’élément <h1> est toujours définie sur la nouvelle couleur. La modification reste sur une actualisation, car lorsque vous avez apporté la modification, DevTools l’a enregistrée sur le disque. Lorsque vous avez actualisé la page, votre serveur local a fourni la copie modifiée du fichier à partir du disque.

Conseil : Vous pouvez également modifier la couleur en cliquant sur l’échantillon de couleur fucshia pour ouvrir le sélecteur de couleurs et choisir une nouvelle couleur. La valeur HEX de la couleur que vous choisissez est le nom de la couleur.

Passez à la section suivante.

Étape 5 : Enregistrer une modification HTML sur le disque (via l’onglet Espace de travail de l’outil Sources)

Ensuite, modifiez le code HTML et enregistrez les modifications apportées au fichier source. Pour enregistrer les modifications apportées au fichier HTML de la page web, ajoutez le dossier de code source dans l’onglet Espace de travail de l’outil Sources, puis modifiez le code HTML dans l’outil Sources. (Les modifications ne sont pas apportées au fichier source en modifiant simplement le HTML dans l’arborescence DOM de l’outil Elements .)

L’onglet Espace de travail DevTools est similaire à l’utilisation d’un éditeur pour modifier le fichier source HTML, mais permet de modifier le fichier source HTML directement dans DevTools.

1. En continuant ci-dessus, dans DevTools, cliquez sur l’onglet Sources ().

2. Dans le volet Navigateur de gauche, dans l’onglet Espace de travail (regroupé avec l’onglet Page ), sélectionnez index.html.

   L’ongletindex.html s’ouvre dans l’outil Sources.

3. Dans la <h1> balise, remplacez « DevTools Workspaces Demo » par « I Love Cake ».

   Un astérisque apparaît en regard de index.html.

4. Appuyez sur Ctrl+S (Windows, Linux) ou Cmd+S (macOS).

   Votre modification est enregistrée et l’astérisque disparaît.

   Vous avez apporté la modification dans la liste des fichiers, plutôt que dans l’arborescence DOM de l’outil Elements .

5. Actualisez la page. Le titre de la page rendue devient « I Love Cake », car cette chaîne a été enregistrée dans index.html votre répertoire mappé /Demos/workspace/ :

   

6. Dans l’outil Sources , cliquez avec le bouton droit de index.htmlla souris, puis sélectionnez Ouvrir dans le dossier conteneur.

   L’explorateur de fichiers ou le Finder s’ouvre.

7. Ouvrez la copie de ce qui se trouve dans votre /Demos/workspace/ répertoire dans un éditeur de index.html texte, tel que Visual Studio Code.

   L’élément <h1> contient le nouveau texte « I Love Cake », car vous avez apporté la modification à l’aide de l’éditeur de l’outil Sources pour modifier index.html puis enregistrer la modification, et ce fichier a été mappé dans un espace de travail (l’onglet Espace de travail ), indiqué par un point vert « mappé » sur l’icône du fichier.

   De nombreux développeurs n’écrivent pas directement du code HTML, mais utilisent plutôt des approches telles que :

   • Un langage côté serveur, tel que Java, Python ou PHP.
   • Un générateur de site, tel que Eleventy.
   • Infrastructure côté client qui utilise du code JavaScript.
   • Un langage de balisage autre que HTML, tel que Markdown.

   Cela signifie qu’en pratique, peu de développeurs modifient les fichiers HTML dans l’onglet Espace de travail. La plupart des développeurs produisent des fichiers HTML en utilisant un autre type de fichier source, tel qu’un fichier source JS du composant React, puis reconstruisent et rechargent (ce qui peut se produire automatiquement).

8. Cliquez avec le bouton droit sur Actualiser dans Microsoft Edge, puis sélectionnez Actualiser (Ctrl+Maj+R).

   Dans l’onglet Espace de travail , des points verts « mappés » apparaissent sur tous les fichiers HTML, CSS et JS.

Passez à la section suivante.

Étape 6 : enregistrer une modification JavaScript sur le disque

Dans la continuité ci-dessus, vous allez ensuite modifier le fichier JavaScript de la démo Workspace et enregistrer les modifications apportées au fichier source. Pour enregistrer les modifications dans un fichier source JavaScript, vous pouvez utiliser DevTools comme un IDE, après avoir ajouté le dossier de code source dans l’onglet Espace de travail de l’outil Sources . Vous pouvez ensuite modifier et enregistrer le fichier JavaScript dans l’éditeur de l’outil Sources .

Dans la page web de démonstration rendue, pour styliser le lien hypertexte Modifier et enregistrer des fichiers dans un espace de travail (onglet Espace de travail de l’outil Sources) en italique :

1. Dans DevTools, sélectionnez l’outil Sources , puis l’onglet Espace de travail , qui est regroupé avec l’onglet Page .

2. Dans l’onglet Espace de travail , sélectionnez script.js.

   script.js s’ouvre dans un onglet du volet Éditeur de l’outil Sources .

3. Dans le volet de l’éditeur, ajoutez le code suivant en bas de script.js:

   document.querySelector('a').style = 'font-style:italic';
   

   Un astérisque s’affiche sur l’onglet script.js .

4. Appuyez sur Ctrl+S (Windows, Linux) ou Cmd+S (macOS).

   script.js est enregistré et l’astérisque est supprimé de l’onglet script.js .

5. Actualisez la page.

6. S’il n’y a plus de point vert « mappé » sur le fichier HTML, JS ou CSS, cliquez longuement ou avec le bouton droit sur le bouton Actualiser dans Microsoft Edge, puis sélectionnez Actualiser dur (Ctrl+Maj+R).

   Le lien hypertexte Modifier des fichiers avec des espaces de travail (ou Modifier et enregistrer des fichiers dans un espace de travail (onglet Espace de travail de l’outil Sources)) de la page est désormais en italique :

   

Passez à la section suivante.

Étape 7 : Ajouter un fichier .js à l’aide de DevTools

1. Dans l’outil Sources , dans l’onglet Espace de travail , cliquez avec le bouton droit sur le /workspaces/ dossier, puis sélectionnez l’élément de menu Nouveau fichier .

   Un fichier nommé NewFile est ajouté :

   

2. Cliquez avec le bouton droit dans l’onglet Espace deNewFile travail, puis sélectionnez Renommer.

3. Renommez le fichier en test.js.

4. Dans test.js, ajoutez la ligne : console.log('hello from test.js');

5. Dans l’outil Sources , dans l’onglet Espace de travail , sélectionnez index.html.

6. Dans index.html, sous la ligne <script src="./script.js" defer></script>, ajoutez la ligne : <script src="./test.js" defer></script>

7. Appuyez sur Ctrl+S (Windows, Linux) ou Cmd+S (macOS).

   index.html est enregistrée.

8. Cliquez avec le bouton droit sur Actualiser dans Microsoft Edge, puis sélectionnez Actualiser (Ctrl+Maj+R).

   Dans l’onglet Espace de travail , des points verts « mappés » apparaissent sur tous les fichiers HTML, CSS et JS :

   

Ceci termine le tutoriel.

Si vous souhaitez annuler les modifications dans votre /workspace/ dossier, vous pouvez utiliser les commandes git à une invite de commande, ou utiliser GitHub Desktop, pour annuler les modifications dans la branche actuelle, telles que « main » ou « test ».

Voir aussi

• Modifier et enregistrer des fichiers dans un espace de travail (onglet Espace de travail de l’outil Sources)
• Commencer à afficher et modifier les CSS
• Commencer à déboguer JavaScript

Ce travail est sous licence Creative Commons Attribution 4.0 International.