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 vous pouvez l'utiliser dans vos propres projets. Workspace vous permet d'enregistrer les modifications apportées dans les outils de développement au code source stocké sur votre ordinateur.

Présentation

Workspace vous permet d'enregistrer une modification apportée dans les outils de développement dans une copie locale du même fichier votre ordinateur. Par exemple, supposons que:

  • 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 à localhost:8080.
  • localhost:8080 est ouvert dans Google Chrome, et vous utilisez les outils de développement pour modifier le CSS

Lorsque Workspace est activé, les modifications CSS que vous apportez dans les outils de développement sont enregistrées dans le code source sur votre ordinateur.

Limites

Si vous utilisez un framework moderne, il transforme probablement votre code source dans un format à gérer dans un format optimisé pour une diffusion aussi rapide que possible. L'espace de travail est capable de mapper le code optimisé avec votre code source d'origine à l'aide de source Google Maps.

La communauté des outils de développement s'efforce de prendre en charge les fonctionnalités fournies par les cartes sources sur 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 le faites fonctionner Après avoir effectué une configuration personnalisée, démarrez 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é des outils de développement.

Fonctionnalité associée: Remplacements locaux

Les remplacements locaux sont une autre fonctionnalité des outils de développement semblable à Workspace. Utilisez des forçages locaux pour simuler du contenu Web ou des en-têtes de requêtes sans attendre les modifications du backend ou lorsque vous souhaitez tester des modifications sur une page et que vous avez besoin de les observer sur l'ensemble de la page mais vous ne vous souciez pas de 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. Voici un exemple de code pour 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 du site hébergée en local. Vous devriez être en mesure de y accéder via une URL telle que localhost:8000. Le numéro de port exact peut être différent.

    Page de démonstration hébergée en local 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-en un 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 Sélectionner un dossier et 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 de h1 est défini sur fuchsia.

    Affichage du fichier 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 Elements.

  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 celle de votre choix. 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 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 et que les outils de développement l'ont enregistrée sur le disque. Ensuite, quand vous avez rechargé la page, votre serveur local a servi la copie modifiée du fichier à partir du disque.

Étape 3: Enregistrez une modification HTML sur le disque

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

  1. Ouvrez l'onglet Elements.

  2. Double-cliquez sur le contenu textuel de l'élément h1, qui indique Workspaces Demo, puis remplacez-le avec 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 ne fonctionne-t-il pas ?

  • L'arborescence de nœuds que vous voyez dans le panneau Elements représente le DOM de la page.
  • Pour afficher une page, un navigateur extrait le code HTML sur le réseau, analyse le code HTML, puis le convertit dans une arborescence de nœuds DOM.
  • Si la page comporte du code JavaScript, celui-ci peut ajouter, supprimer ou modifier des nœuds DOM. Les CSS peuvent modifiez également 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 affiché navigateur récupéré.
  • Il est donc difficile pour les outils de développement de résoudre les problèmes liés à une modification apportée dans le panneau Elements. doit être enregistré, car le DOM est affecté par HTML, JavaScript et CSS.

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

Modifier le code HTML à partir du panneau "Sources"

Si vous souhaitez enregistrer une modification apportée au code HTML de la page, utilisez 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 à partir du 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. Mais parfois, vous devez accéder à d'autres panneaux, tels que les panneaux Elements ou Elements, tout en y apportant des modifications ; sur votre site. Il est possible d'ouvrir le panneau Sources en même temps que d'autres panneaux.

  1. Ouvrez l'onglet Elements.
  2. Appuyez sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS). Le menu de commandes s'ouvre.

  3. Saisissez QS, puis sélectionnez Show Quick Source (Afficher la source rapide). En bas de la fenêtre "DevTools", vous trouverez dans l'onglet Source rapide.

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

    L'onglet affiche le contenu de index.html, qui est le dernier que vous avez modifié dans le panneau Sources. L'onglet Quick Source vous donne accès à l'éditeur le panneau Sources, qui vous permet de 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 par le biais de la boîte de dialogue &quot;Ouvrir un fichier&quot;.

  6. Remarquez le lien Edit and save files in a workspace dans la démonstration. Il est régulièrement stylisé.

  7. Ajoutez le code suivant en bas du fichier script.js dans l'onglet Quick Source (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 sur la page est maintenant en italique.

Le lien sur la page est maintenant en italique.

Étapes suivantes

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

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