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 afin de pouvoir l'utiliser dans vos propres projets. Workspace vous permet d'enregistrer les modifications que vous apportez dans DevTools 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:

  • Vous disposez du code source de votre site sur votre ordinateur.
  • Vous exécutez un serveur Web local à partir du répertoire de 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 peut généralement mapper le code optimisé sur votre code source d'origine à l'aide de mapages source.

La communauté DevTools s'efforce de prendre en charge les fonctionnalités fournies par les cartes sources dans un large éventail de frameworks et d'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 forcements locaux sont une autre fonctionnalité DevTools semblable à l'espace de travail. Utilisez des forçages locaux pour simuler du contenu Web ou des en-têtes de requête sans attendre de modifications du backend ou lorsque vous souhaitez tester des modifications apportées à une page et que vous devez voir ces modifications lors des chargements de la page, mais que vous ne vous souciez pas de mapper vos modifications sur le code source de la page.

Étape 1: Configuration

Suivez ce tutoriel pour découvrir comment utiliser 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 le reste 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 pour les développeurs sur la page de démonstration hébergée localement.

  2. Accédez à Sources > Espace de travail, puis configurez un espace de travail dans le dossier devtools-workspace-demo que vous avez cloné. Pour ce faire, vous pouvez procéder de différentes manières:

    • Faites glisser-déposer 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. Sources, puis onglet Workspace.

  3. Dans l'invite en haut de l'écran, cliquez sur Autoriser pour autoriser DevTools à lire et écrire dans le répertoire.

    Bouton "Allow" (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 DevTools a é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 une mise en correspondance 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 DevTools, 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 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 que vous apportez est mappée sur /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 appliquée.

  4. Actualisez la page. Actualisez la page. Le titre d'origine de la page est 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 contient du code JavaScript, il peut ajouter, supprimer ou modifier des nœuds DOM. Le CSS peut également modifier le DOM via la propriété content.
  • Le navigateur utilise finalement 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 extrait 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 le code HTML, JavaScript et CSS.

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

Modifier le code HTML depuis le 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 permet également de modifier le code 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 Afficher la source rapide. Un onglet Source rapide s'affiche désormais en bas de la fenêtre des 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 est le dernier fichier que vous avez modifié dans le panneau Sources. L'onglet Source rapide vous permet d'accéder à l'éditeur du panneau Sources afin de modifier des fichiers tout en laissant d'autres panneaux ouverts.

  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 listés dans Settings > Workspace (Paramètres > Espace de travail).

Découvrez ensuite comment utiliser les outils pour les développeurs pour modifier le CSS et déboguer JavaScript.