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

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 sur votre ordinateur. Par exemple, supposons que:

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

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 d'un format facile à gérer en un format optimisé pour s'exécuter le plus rapidement possible. Workspace est généralement capable de mapper le code optimisé à 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 dans 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 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 à celle de l'espace de travail. Utilisez des remplacements 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 sur une page. Vous devez voir ces modifications lors des chargements de page, mais vous ne vous souciez pas de mapper vos modifications avec le code source de la page.

Étape 1: Configuration

Suivez ce tutoriel pour acquérir une expérience pratique avec un espace de travail.

Configurer la démo

  1. Clonez ce dépôt de démonstration vers 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 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 pouvoir 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, puis configurez un espace de travail dans le dossier devtools-workspace-demo que vous avez cloné. Vous pouvez le faire de différentes manières:

    • Glissez-déposez le dossier dans l'éditeur de la section Sources.
    • Cliquez sur le lien select folder (sélectionner un dossier), puis sélectionnez le dossier souhaité.
    • Cliquez sur Ajouter Ajouter un dossier, puis sélectionnez le dossier. Dans l'onglet "Sources", puis vers l'espace de travail

  3. Dans l'invite en haut de la page, cliquez sur Allow (Autoriser) pour autoriser les outils de développement à accéder en lecture et en écriture au 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 dans 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 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 Éléments.

  4. Remplacez la valeur de la propriété color de l'élément <h1> par votre couleur préférée. 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 choisissez la couleur 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 effectué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 et que les outils de développement l'ont enregistrée sur le disque. Ensuite, 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

Essayez 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;Elements&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. La page retrouve son titre d'origine.

Facultatif: Pourquoi cela ne fonctionne pas ?

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

En bref, l'arborescence DOM !== HTML.

Modifier le code HTML à partir du panneau "Sources"

Si vous souhaitez enregistrer une modification du 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 Cmd+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 des sources.

  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 permet également d'apporter des modifications à JavaScript. Toutefois, vous avez parfois besoin d'accéder à d'autres panneaux, tels que le panneau Éléments ou Console, lorsque vous apportez des modifications à votre site. Il est possible d'ouvrir le panneau Sources à côté d'autres panneaux.

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

  3. Saisissez QS, puis sélectionnez Afficher la source rapide. Au bas de la fenêtre "Outils de développement", un onglet Source rapide s'affiche.

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

    L'onglet affiche le contenu de index.html, qui est le dernier fichier que vous avez modifié dans le panneau Sources (Sources). L'onglet Quick Source (Source rapide) vous permet d'accéder à l'éditeur depuis le panneau Sources (Sources), ce qui vous permet de modifier des fichiers tout en ayant d'autres panneaux ouverts.

  4. Appuyez sur Cmd+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émo. Il est régulièrement stylisé.

  7. Ajoutez le code suivant en bas du fichier script.js dans l'onglet Source rapide.

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

  8. Appuyez sur Cmd+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 listés dans Paramètres > Espace de travail.

Ensuite, découvrez comment utiliser les outils de développement pour modifier le CSS et déboguer JavaScript.