Modifier et enregistrer des fichiers dans un espace de travail

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Ce tutoriel vous permet de vous entraîner en configurant un espace de travail que vous pouvez utiliser dans vos propres projets. L'espace de travail vous permet d'enregistrer les modifications que vous apportez dans les outils de développement dans le code source stocké sur votre ordinateur.

Présentation

Workspace vous permet d'enregistrer une modification que vous apportez dans DevTools dans une copie locale du même fichier sur votre ordinateur. Par exemple, supposons les éléments suivants :

  • Le code source de votre site se trouve sur votre ordinateur.
  • Vous exécutez un serveur Web local à partir du répertoire du code source, afin que le site soit accessible à l'adresse localhost:8080.
  • Vous avez ouvert localhost:8080 dans Google Chrome et vous utilisez les outils pour les développeurs pour modifier le CSS du site.

Lorsque l'espace de travail est activé, les modifications CSS que vous apportez dans DevTools sont enregistrées dans le code source sur votre ordinateur.

Limites

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 le plus rapidement possible. Workspace est généralement en mesure de mapper le code optimisé avec votre code source d'origine à l'aide de cartes sources.

La communauté des outils de développement s'efforce de prendre en charge les fonctionnalités fournies par les cartes sources pour différents frameworks et outils. Si vous rencontrez des problèmes lors de l'utilisation d'un espace de travail avec le framework de votre choix, ou si vous parvenez à le faire fonctionner après une configuration personnalisée, lancez un fil de discussion dans la liste de diffusion ou posez une question sur Stack Overflow pour partager vos connaissances avec le reste de la communauté DevTools.

Fonctionnalité associée : Remplacements locaux

Les remplacements locaux sont une autre fonctionnalité des outils de développement semblable à celle de Workspace. Utilisez des forçages locaux pour simuler du contenu Web ou des en-têtes de requête sans attendre les modifications du backend ou lorsque vous souhaitez tester des modifications apportées à une page, et que vous avez besoin de voir ces modifications sur plusieurs chargements de page, mais que vous ne souhaitez pas mettre en correspondance vos modifications avec le code source de la page.

Étape 1: Configuration

Suivez ce tutoriel pour vous familiariser avec un espace de travail.

Configurer la démonstration

  1. Clonez ce dépôt de démonstration dans un répertoire de votre ordinateur. Par exemple, ~/Desktop.

  2. Démarrez un serveur Web local dans ~/Desktop/devtools-workspace-demo. Vous trouverez ci-dessous un exemple de code permettant de démarrer SimpleHTTPServer, mais vous pouvez utiliser le serveur de votre choix.

    cd ~/Desktop/devtools-workspace-demo
# If your Python version is 3.X
# On Windows, try "python -m http.server" or "py -3 -m http.server"
python3 -m http.server
# If your Python version is 2.X
python -m SimpleHTTPServer

    Pour la suite de ce tutoriel, ce répertoire sera appelé /devtools-workspace-demo.

  3. Ouvrez un onglet dans Google Chrome et accédez à la version hébergée localement du site. Vous devriez pouvoir y accéder via une URL comme localhost:8000. Le numéro de port exact peut être différent.

    La page de démonstration hébergée localement s'est ouverte dans Chrome.

Configurer les outils de développement

  1. Ouvrez les outils de développement sur la page de démonstration hébergée en local.

  2. Accédez à Sources > Espace de travail et configurez un espace de travail dans le dossier devtools-workspace-demo que vous avez cloné. Pour ce faire, plusieurs possibilités s'offrent à vous:

    • Glissez-déposez le dossier dans l'éditeur, sous Sources.
    • Cliquez sur le lien Select folder (Sélectionner un dossier), puis sélectionnez le dossier.
    • Cliquez sur Ajouter Ajouter un dossier, puis sélectionnez le dossier. Onglet "Sources", puis vers "Espace de travail"

  3. Dans l'invite en haut de l'écran, cliquez sur Allow (Autoriser) pour autoriser les outils de développement à lire et écrire dans le répertoire.

    Bouton "Autoriser" dans l'invite.

Dans l'onglet Espace de travail, un point vert s'affiche désormais à côté de index.html, script.js et styles.css. Ces points verts signifient que les outils de développement ont établi un mappage entre les ressources réseau de la page et les fichiers de devtools-workspace-demo.

L'onglet "Espace de travail" affiche désormais un mappage entre les fichiers locaux et les fichiers réseau.

Étape 2 : Enregistrez une modification CSS sur le disque

  1. Ouvrez /devtools-workspace-demo/styles.css dans un éditeur de texte. Notez que la propriété color des éléments h1 est définie sur fuchsia.

    Affichage de styles.css dans un éditeur de texte.

  2. Fermez l'éditeur de texte.

  3. De retour dans les outils de développement, cliquez sur l'onglet Éléments.

  4. Remplacez la valeur de la propriété color de l'élément <h1> par la couleur de votre choix. Procédez comme suit :

    1. Cliquez sur l'élément <h1> dans l'arborescence DOM.
    2. Dans le volet Styles, recherchez la règle CSS h1 { color: fuchsia } et remplacez la couleur par votre couleur préférée. Dans cet exemple, la couleur est définie sur vert.

    Définir la propriété de couleur de l&#39;élément h1 sur vert.

    Le point vert Le point vert. à côté de styles.css:1 dans le volet Styles signifie que toute modification apportée est mappée à /devtools-workspace-demo/styles.css.

  5. Ouvrez à nouveau /devtools-workspace-demo/styles.css dans un éditeur de texte. La propriété color est maintenant définie sur votre couleur préférée.

  6. Actualisez la page. Actualisez la page. La couleur de l'élément <h1> est toujours définie sur votre couleur préférée. Cela fonctionne, car lorsque vous avez effectué la modification, DevTools l'a enregistrée sur le disque. Lorsque vous avez actualisé la page, votre serveur local a diffusé la copie modifiée du fichier à partir du disque.

Étape 3: Enregistrez une modification HTML sur le disque

Essayer de modifier le code HTML à partir du panneau "Éléments"

  1. Ouvrez l'onglet Éléments.

  2. Double-cliquez sur le contenu textuel de l'élément h1, qui indique Workspaces Demo, et remplacez-le par I ❤️ Cake.

    Tentative de modification du code HTML à partir de l&#39;arborescence DOM du panneau &quot;Éléments&quot;.

  3. Ouvrez /devtools-workspace-demo/index.html dans un éditeur de texte. La modification que vous venez d'apporter n'est pas là.

  4. Actualisez la page. Actualisez la page. Le titre d'origine de la page est alors rétabli.

Facultatif : Pourquoi cela ne fonctionne-t-il pas ?

  • L'arborescence des nœuds que vous voyez dans le panneau Éléments représente le DOM de la page.
  • Pour afficher une page, un navigateur extrait le code HTML sur le réseau, l'analyse, puis le convertit en arborescence de nœuds DOM.
  • Si la page comporte du code JavaScript, celui-ci peut ajouter, supprimer ou modifier des nœuds DOM. Le CSS peut également modifier le DOM via la propriété content.
  • À terme, le navigateur utilise le DOM pour déterminer le contenu qu'il doit présenter aux utilisateurs.
  • Par conséquent, l'état final de la page que les utilisateurs voient peut être très différent du code HTML récupéré par le navigateur.
  • Il est donc difficile pour DevTools de déterminer où enregistrer une modification apportée dans le panneau Éléments, car le DOM est affecté par HTML, JavaScript et CSS.

En résumé, l'!== HTML de l'arborescence DOM.

Modifier le code HTML à partir du panneau "Sources"

Si vous souhaitez enregistrer une modification apportée au code HTML de la page, faites-le dans le panneau Sources.

  1. Accédez à Sources > Page.
  2. Cliquez sur (index). Le code HTML de la page s'affiche.
  3. Remplacez <h1>Workspaces Demo</h1> par <h1>I ❤️ Cake</h1>.
  4. Appuyez sur Commande+S (Mac) ou Ctrl+S (Windows, Linux, ChromeOS) pour enregistrer la modification.

  5. Actualisez la page. Actualisez la page. L'élément <h1> affiche toujours le nouveau texte.

    Modification du code HTML depuis le panneau &quot;Sources&quot;.

  6. Ouvrez /devtools-workspace-demo/index.html. L'élément <h1> contient le nouveau texte.

Étape 4 : Enregistrez une modification JavaScript sur le disque

Le panneau Sources vous permet également d'apporter des modifications à JavaScript. Toutefois, vous devez parfois accéder à d'autres panneaux, tels que le panneau Éléments ou le panneau Console, lorsque vous modifiez votre site. Vous pouvez ouvrir le panneau Sources à côté d'autres panneaux.

  1. Ouvrez l'onglet Éléments.
  2. Appuyez sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS). Le menu Command (Commande) s'ouvre.

  3. Saisissez QS, puis sélectionnez Show Quick Source (Afficher la source rapide). Un onglet Quick Source (Source rapide) s'affiche maintenant en bas de la fenêtre "DevTools" (Outils de développement).

    Ouverture de l&#39;onglet &quot;Source rapide&quot; via le menu &quot;Commande&quot;.

    L'onglet affiche le contenu de index.html, qui correspond au dernier fichier que vous avez modifié dans le panneau Sources. L'onglet Quick Source vous donne accès à l'éditeur depuis le panneau Sources. Vous pouvez ainsi modifier des fichiers tout en ouvrant d'autres panneaux.

  4. Appuyez sur Commande+P (Mac) ou Ctrl+P (Windows, Linux, ChromeOS) pour ouvrir la boîte de dialogue Ouvrir un fichier.

  5. Saisissez script, puis sélectionnez devtools-workspace-demo/script.js.

    Ouverture du script via la boîte de dialogue &quot;Ouvrir un fichier&quot;.

  6. Notez le lien Edit and save files in a workspace dans la démonstration. Elle est régulièrement mise en forme.

  7. Ajoutez le code suivant au bas de script.js dans l'onglet Source rapide.

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

  8. Appuyez sur Commande+S (Mac) ou Ctrl+S (Windows, Linux, ChromeOS) pour enregistrer la modification.

  9. Actualisez la page. Actualisez la page. Le lien de la page est désormais en italique.

Le lien de la page est désormais en italique.

Étapes suivantes

Vous pouvez configurer plusieurs dossiers dans un espace de travail. Tous ces dossiers sont répertoriés dans Paramètres > Espace de travail.

Apprenez ensuite à utiliser les outils de développement pour modifier le code CSS et déboguer JavaScript.