Modifier des fichiers avec l’espace de travail (onglet Système de fichiers)

Utilisez l’onglet Système de fichiers de l’outil Sources pour définir un espace de travail afin d’enregistrer les modifications DevTools dans vos fichiers de code source plutôt que dans une copie temporaire des fichiers retournés par le serveur web.

Ce tutoriel fournit des pratiques pratiques sur la configuration et l’utilisation d’un espace de travail dans DevTools. Après avoir ajouté des fichiers à un espace de travail, les modifications que vous apportez dans votre code source à l’aide de DevTools sont enregistrées sur votre ordinateur local. Ces modifications sont conservées dans les actualisations de page.

Pour actualiser vos connaissances sur les technologies utilisées, consultez les articles suivants :

• Utilisez HTML, CSS et JavaScript pour créer une page web. Voir Prise en main du web

• Utilisez DevTools pour apporter des modifications de base à CSS. Consultez Prise en main de l’affichage et de la modification de CSS

• Exécutez un serveur web HTTP local. Voir :

  • Utilisation de Node.js (utilisée pour ce didacticiel) : configurez un serveur localhost dans Installation de l’extension DevTools pour Visual Studio Code.

  • Utilisation de Python : exécution d’un serveur HTTP local simple dans Comment configurer un serveur de test local ?

Introduction

Un espace de travail DevTools vous permet d’enregistrer les modifications que vous apportez à une copie locale du code source dans le même fichier sur votre ordinateur, afin que les modifications soient conservées entre les actualisations de la page. Voici un scénario classique pour l’utilisation d’un espace de travail :

• Vous disposez du code source du site web de démonstration sur votre bureau.

• Vous exécutez un serveur web local à partir du répertoire de code source, afin que le site soit accessible à l’adresse localhost:8080. Remarque : si vous utilisez l’option de serveur Python, le numéro de port par défaut est 8000.

• Vous avez ouvert localhost:8080 dans Microsoft Edge et vous utilisez DevTools pour modifier le code source du site web qui inclut les fichiers CSS, HTML et JavaScript.

Les étapes du didacticiel ci-dessous vous guident tout au long de la configuration de cet environnement.

Limitations

Si vous utilisez un framework moderne, il transforme probablement votre code source d’un format facile à gérer en un format optimisé pour s’exécuter aussi rapidement que possible. Un espace de travail est généralement en mesure de mapper le code optimisé au code source d’origine, à l’aide de mappages de sources pour JavaScript et CSS. Toutefois, il existe de nombreuses variations dans la façon dont chaque infrastructure utilise les mappages sources.

DevTools ne prend pas en charge toutes les variantes de framework ; Par exemple, la fonctionnalité Espaces de travail (onglet Système de fichiers) ne fonctionne pas avec l’infrastructure Créer une application React.

Si vous rencontrez des problèmes lors de l’utilisation d’espaces de travail avec l’infrastructure de votre choix, ou si vous identifiez les étapes spécifiques à l’infrastructure nécessaires, démarrez un thread dans la liste de diffusion Chrome DevTools ou posez une question sur Stack Overflow pour échanger des informations avec le reste de la communauté DevTools.

Fonctionnalité associée : Remplacements

Overrides est une fonctionnalité DevTools similaire à un espace de travail. Vous pouvez utiliser un remplacement lorsque vous souhaitez tester les modifications apportées à une page web et que vous devez afficher les modifications entre les chargements de pages web, mais vous ne vous souciez pas du mappage de vos modifications au code source de la page web. Toutefois, vos modifications ne sont pas enregistrées lorsque vous actualisez la page web.

La fonctionnalité Remplacements vous permet de stocker une copie locale des fichiers de page web sur le serveur. Lorsque vous actualisez la page, Microsoft Edge charge la copie locale des fichiers au lieu des fichiers sur le serveur. Pour en savoir plus sur les remplacements, consultez Remplacer les ressources de page web avec des copies locales (onglet Remplacements).

Créer le répertoire des fichiers sources

Nous allons configurer les fichiers de démonstration, puis configurer DevTools.

1. Dans une autre fenêtre ou un autre onglet, accédez au code source de démonstration espaces de travail.

2. Créez un app répertoire, tel que ~/Desktop/app ou C:\Users\myusername\app\. Copiez index.html, ../shared/img/logo.png, README.md, script.jset styles.css à partir du code source de démonstration dans votre app répertoire. Pour le reste du tutoriel, ce répertoire est appelé ou C:\Users\myusername\app\, bien que ~/Desktop/app vous puissiez utiliser un autre chemin.

3. Si vous ne l’avez pas déjà fait, installez Node.js et npm. Pour plus d’informations, consultez Installer Node.js et Node Package Manager (npm) dans Installation de l’extension DevTools pour Visual Studio Code.

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

5. Accédez au app répertoire que vous avez créé, par ~/Desktop/app exemple ou C:/Users/myusername/app. Si vous utilisez l’interpréteur de commandes git bash, il s’agit d’un interpréteur de commandes UNIX. Par conséquent, même sur Windows, vous devez encapsuler un chemin d’accès de répertoire comportant des barres obliques inverses entre guillemets, ou utiliser des barres obliques vers l’avant plutôt que des barres obliques inverses.

6. Exécutez l’une des commandes suivantes pour démarrer le serveur web :
   Node.js option :

   # Node.js option
   cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
   npx http-server  # Node.js
   

   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 ~/Desktop/app  # or:  cd C:/Users/myusername/app
   python -m SimpleHTTPServer  # Python 2
   

   # Python 3 option
   cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
   python -m http.server  # Python 3
   

7. Ouvrez un onglet dans Microsoft Edge et accédez à la version hébergée localement du site. Vous devez pouvoir y accéder à l’aide de 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.

Définir un espace de travail dans DevTools

1. Appuyez sur Ctrl+Maj+J (Windows, Linux) ou Cmd+Option+J (macOS) pour ouvrir la console DevTools :

   

2. Cliquez sur l’onglet Sources ().

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

   

4. Cliquez sur Ajouter un dossier à l’espace de travail. Explorateur de fichiers ou le Finder s’ouvre.

5. Accédez au /app/ répertoire que vous avez créé. Par exemple, dans la zone de texte Dossier : , entrez le chemin d’accès, tel que ~/Desktop/app ou C:\Users\myusername\app\. Cliquez ensuite sur le bouton Sélectionner un dossier .

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

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

   Dans l’onglet Système de fichiers se trouvent des icônes de page qui ont un point vert, pour index.html, script.jset styles.css. Le point 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 app répertoire :

   

Modifier css et enregistrer les modifications apportées au fichier source

Pour apporter une modification au fichier CSS et l’enregistrer sur le disque :

1. Dans l’outil Sources , sous l’onglet Système de fichiers (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 (), 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 de fichier mappé () en regard de styles.css:1 est une page avec un point vert. Le point vert signifie que toutes les modifications que vous apportez à cette règle CSS sont mappées dans styles.css votre app 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. Ouvrez la copie de styles.css qui se trouve dans votre app répertoire dans un éditeur de 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é 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 app espace de travail.

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

Modifier le code HTML et enregistrer les modifications apportées au fichier source

Dans l’outil Éléments , il est possible de modifier le balisage HTML dans une copie du fichier retourné par le serveur. Toutefois, pour enregistrer vos modifications dans un fichier source local, vous devez utiliser l’outil Sources au lieu de l’outil Éléments .

La modification de l’arborescence DOM dans l’outil Éléments n’enregistre pas les modifications

Vous pouvez apporter des modifications au contenu HTML à l’aide de l’arborescence DOM de l’outil Éléments , mais vos modifications apportées à l’arborescence DOM ne sont pas enregistrées sur le disque et affectent uniquement la session de navigateur active.

Les étapes suivantes montrent que les modifications de l’arborescence DOM ne sont pas conservées dans les actualisations de page :

1. Pour continuer à partir de ci-dessus, sélectionnez l’outil Éléments .

2. Dans l’arborescence DOM, dans l’élément <h1> , sélectionnez la chaîne DevTools Workspaces Demode texte , supprimez-la, tapez la chaîne I Love Cakede texte , puis appuyez sur Entrée. La page web affichée affiche le texte du nouveau titre :

   

3. Ouvrez le index.html fichier qui se trouve dans votre app répertoire dans un éditeur de texte, tel que Visual Studio Code. La modification que vous venez d’effectuer n’apparaît pas ; le titre indique toujours « DevTools Workspaces Demos ».

4. Dans le navigateur, actualisez la page de démonstration. La page revient au titre d’origine, « DevTools Workspaces Demos », car l’arborescence DOM avec votre modification a été ignorée et le DOM a été recréé à partir du fichier inchangé index.html dans le répertoire de votre app espace de travail.

La modification du code HTML à partir de l’outil Sources enregistre les modifications

Si vous souhaitez enregistrer une modification dans le code HTML de la page web, modifiez le code HTML dans l’outil Sources avec un espace de travail défini (sous l’onglet Système de fichiers), au lieu de modifier le code HTML dans l’arborescence DOM de l’outil Éléments .

1. Pour continuer à partir de ci-dessus, cliquez sur l’onglet Sources ().

2. Dans le volet Navigateur à gauche, sélectionnez index.html. Le code HTML de la page s’ouvre.

3. Remplacez par <h1>DevTools Workspaces Demo</h1> , dans la liste des fichiers (par opposition à l’arborescence DOM de l’outil Éléments).<h1>I Love Cake</h1>

4. Appuyez sur Ctrl+S (Windows, Linux) ou Cmd+S (macOS) pour enregistrer la modification.

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é app :

   

6. Ouvrez la copie de index.html qui se trouve dans votre app répertoire dans un éditeur de texte, tel que Visual Studio Code.

   L’élément <h1> contient le nouveau texte, car vous avez apporté 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 Système de fichiers), indiqué par un point vert sur l’icône du fichier.

Modifier JavaScript et enregistrer les modifications apportées au fichier source

L’outil Sources est le main lieu d’utilisation de l’éditeur de code de DevTools. Mais parfois, vous devez accéder à d’autres outils, tels que l’outil Éléments ou la console, lors de la modification de fichiers. L’outil Source rapide vous donne uniquement l’éditeur de l’outil Sources , tandis que n’importe quel outil est ouvert.

Pour ouvrir l’éditeur de code DevTools avec d’autres outils :

1. Continuez à partir de ci-dessus, sélectionnez l’outil Éléments ().

2. Appuyez sur Ctrl+Maj+P (Windows, Linux) ou Cmd+Maj+P (macOS) pour ouvrir le menu Commandes.

3. À l’invite Exécuter , commencez à taper rapide, puis sélectionnez Afficher la source rapide :

   

   En bas de la fenêtre DevTools, l’outil Source rapide s’ouvre, affichant le contenu de index.html, car il s’agit du dernier fichier que vous avez modifié dans l’outil Sources . Si nécessaire, cliquez sur Développer l’affichage rapide et vérifiez que l’outil Éléments est sélectionné.

4. Appuyez sur Ctrl+P (Windows, Linux) ou Cmd+P (macOS) pour afficher l’invite Ouvrir un fichier du menu Commandes :

   

5. Commencez à taper le script, puis sélectionnez script.js qui se trouve dans l’application/ répertoire.

   La liste des fichiers s’affiche dans l’outil Source rapide . Dans la page web de démonstration rendue, le lien hypertexte Modifier les fichiers avec des espaces de travail n’est pas en italique.

6. Utilisez l’outil Source rapide pour ajouter le code suivant au bas de script.js:

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

7. Appuyez sur Ctrl+S (Windows, Linux) ou Cmd+S (macOS) pour enregistrer la modification.

8. Actualisez la page. Si nécessaire, cliquez longuement sur le bouton Actualiser , puis sélectionnez Actualiser en dur. Le lien hypertexte Modifier les fichiers avec espaces de travail sur la page est maintenant en italique :

   

Voir également

• Ouvrez un dossier de démonstration dans l’outil Sources et modifiez un fichier dans Exemple de code pour DevTools.

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page d’origine se trouve ici et est créée par Kayce Basques (Rédacteur technique, Chrome DevTools & Lighthouse).

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