Tutoriel sur l’espace de travail (onglet Espace de travail de l’outil Sources)

Utilisez les étapes suivantes pour utiliser DevTools en tant qu’IDE, par exemple en apportant des modifications à la page web sous l’onglet Espace de travail de l’outil Sources, en enregistrant 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 que vous avez configuré un espace de travail, les modifications que vous apportez aux fichiers de l’espace de travail, à l’aide de DevTools, sont enregistrées sur votre ordinateur local.

Étape 1 : Cloner 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 Espaces de travail.

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

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

2. Accédez à MicrosoftEdge / Démonstrations 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 dépôt, puis ignorez l’étape d’invite de commandes ci-dessous.

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

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

5. 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 l’invite de commandes 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 dépôt - Documentation GitHub.

Passez à la section suivante.

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

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

   Voir aussi :

   • Installez Node.js et Node Package Manager (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. Accédez au Demos répertoire du répertoire du workspaces dépôt :

   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 de travail nommée « test » et basculez vers celle-ci (pour éviter de modifier les fichiers de la démonstration dans la branche « main ») :

   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émarrer le serveur (npx http-server) 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 pour l’option de serveur Python est 8000. Le numéro de port exact peut être différent.

   La page web De démonstration des espaces de travail DevTools s’ouvre.

   (Le lien de la dernière démonstration peut indiquer « Modifier un 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 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é localement, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+J (Windows, Linux) ou Cmd+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, par C:\Users\localAccount\GitHub\Demos\workspaces\exemple .

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

   DevTools vous invite à accorder à DevTools un accès complet à votre /workspaces/ annuaire.

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

   Dans l’onglet Espace de travail se trouvent des icônes de page qui ont un point vert « mappé », pour index.html, script.jset styles.css. Le point « mappé » vert 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é de 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 , sous l’onglet Espace de travail (regroupé avec l’onglet Page ), sélectionnez styles.css pour l’ouvrir dans le volet de l’éditeur. La color propriété de l’élément h1 est définie sur fuchsia:

   

2. Sélectionnez l’outil Éléments () ; ensuite, 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 de fichier mappé () en regard de styles.css:1 est une page avec un point « mappé » vert. Le point « mappé » vert 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 color propriété de l’élément par <h1> 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 de couleurs :

   

4. Sélectionnez l’outil Sources , cliquez avec le bouton droit sur styles.css, puis sélectionnez Ouvrir dans le dossier contenant.

   Explorateur de fichiers ou le Finder s’ouvre.

5. Ouvrez la copie de styles.css qui se trouve dans votre /Demos/workspace/ répertoire dans un éditeur de texte, par exemple 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é apportée dans la copie du fichier retourné par le serveur web ; La modification a également été apporté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 dans une actualisation, car lorsque vous avez effectué la modification, DevTools a enregistré la modification sur le disque. Lorsque vous avez actualisé la page, votre serveur local a fourni la copie modifiée du fichier à partir du disque.

Pointe: Vous pouvez également modifier la couleur en cliquant sur l’échantillon de couleur fucshia pour ouvrir le sélecteur de couleurs afin de 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 du code source sous 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 code HTML dans l’arborescence DOM de l’outil Éléments .)

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. Pour continuer à partir de ci-dessus, dans DevTools, cliquez sur l’onglet Sources (

2. Dans le volet Navigateur à gauche, sous 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 Demos » 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 Éléments .

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 sur index.html, puis sélectionnez Ouvrir dans le dossier contenant.

   Explorateur de fichiers ou le Finder s’ouvre.

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

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

   De nombreux développeurs n’écrivent pas de code HTML directement, 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.
   • Langage de balisage autre que HTML, tel que Markdown.

   Cela signifie qu’en pratique, peu de développeurs modifient les fichiers HTML sous l’onglet Espace de travail. La plupart des développeurs produisent des fichiers HTML à l’aide d’un autre type de fichier source, tel qu’un fichier source JS de composant React, puis régénérez et rechargez (ce qui peut se produire automatiquement).

8. Cliquez longuement ou cliquez avec le bouton droit sur le bouton Actualiser dans Microsoft Edge, puis sélectionnez Actualisation en dur (Ctrl+Maj+R).

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

Passez à la section suivante.

Étape 6 : Enregistrer une modification JavaScript sur le disque

Suite à ce qui précède, vous allez ensuite modifier le fichier JavaScript de la démonstration de l’espace de travail 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 sous 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 appliquer un style au 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 sélectionnez l’onglet Espace de travail , qui est regroupé avec l’onglet Page .

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

   script.js s’ouvre dans un onglet dans le volet éditeur de l’outil Sources .

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

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

   Un astérisque apparaît sous 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’existe plus de point vert « mappé » sur le fichier HTML, JS ou CSS, cliquez longuement ou cliquez avec le bouton droit sur le bouton Actualiser dans Microsoft Edge, puis sélectionnez Actualisation en dur (Ctrl+Maj+R).

   Le lien hypertexte Modifier les 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)) sur la page est maintenant en italique :

   

Passez à la section suivante.

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

1. Dans l’outil Sources , sous 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 NewFile droit dans l’onglet Espace de 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 , sous 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é.

8. Cliquez longuement ou cliquez avec le bouton droit sur le bouton Actualiser dans Microsoft Edge, puis sélectionnez Actualisation en dur (Ctrl+Maj+R).

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

   

Cette opération termine le tutoriel.

Si vous souhaitez annuler les modifications dans votre /workspace/ dossier, vous pouvez utiliser les commandes git à l’invite de commandes 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)
• Prise en main de l’affichage et de la modification de CSS
• Prise en main du débogage de JavaScript

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.