Configurer des espaces de travail pour enregistrer les modifications apportées aux fichiers sources

Kayce Basques

Sofia Emelianova

Enregistrez les modifications que vous apportez dans les outils de développement dans les fichiers sources de votre ordinateur en configurant un espace de travail. Vous pouvez connecter automatiquement un dossier d'espace de travail aux outils de développement en diffusant un fichier de configuration, ou ajouter manuellement un emplacement d'espace de travail dans le panneau Sources.

Présentation

Une connexion automatique (ou manuelle) à un dossier de l'espace de travail vous permet d'enregistrer une modification que vous apportez dans les outils de développement dans une copie locale du même fichier sur votre ordinateur. Par exemple, supposons que :

• Vous disposez du code source de votre site sur votre ordinateur.
• Vous exécutez un serveur Web local à partir du répertoire du code source, de sorte que le site est accessible à l'adresse localhost:PORT et qu'il diffuse également un fichier JSON simple contenant des métadonnées (décrit plus loin).
• Vous avez ouvert localhost:PORT dans Google Chrome et vous utilisez les outils de développement pour modifier le CSS du site.

Une fois qu'un dossier d'espace de travail est connecté, les modifications que vous apportez aux fichiers CSS, HTML et JavaScript dans le panneau Sources sont enregistrées dans le code source sur votre ordinateur. Toutefois, les outils de développement n'enregistrent pas les modifications apportées au DOM dans le panneau Éléments.

De plus, les Outils de développement sont généralement capables de mapper le code optimisé au code source d'origine à l'aide de mappages source.

Générer des métadonnées pour une connexion

Pour permettre à DevTools de découvrir automatiquement votre dossier d'espace de travail, générez un UUID version 4 aléatoire et placez-le dans le fichier JSON suivant :

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

Placez ensuite le fichier JSON dans path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.

Enfin, exécutez votre serveur HTTP local et assurez-vous de diffuser également le fichier JSON.

Vous pouvez également ignorer cette étape et configurer manuellement une connexion de dossier.

Connecter un dossier d'espace de travail

Remarque : Cette étape et la suivante utilisent la démo des dossiers d'espace de travail automatiques pour présenter la fonctionnalité.

Pour connecter un dossier :

1. Dans Chrome, accédez à votre page hébergée localement (dans cet exemple, à l'adresse localhost:8000) et ouvrez DevTools.

2. Dans Sources > Workspace, cliquez sur Connecter à côté de votre dossier.

   

3. Lorsque vous y êtes invité, cliquez sur Modifier les fichiers pour autoriser les Outils de développement à accéder à votre dossier.

   

4. Une fois connecté, vous pouvez ouvrir le dossier dans l'onglet Espaces de travail.

   

L'onglet Workspace (Espace de travail) affiche un point vert à côté des fichiers HTML, CSS et JavaScript. 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 du dossier.

Enregistrer une modification dans le dossier source

Vous pouvez enregistrer les modifications apportées aux fichiers CSS, HTML et JavaScript dans le dossier de l'espace de travail connecté.

Enregistrer les modifications apportées au CSS

Conseil : Avec un dossier d'espace de travail connecté, le panneau Assistance IA peut enregistrer automatiquement les modifications CSS dans vos sources.

Pour enregistrer les modifications apportées au CSS :

1. Ouvrez un fichier CSS à partir du dossier de votre espace de travail connecté dans Sources > Espaces de travail.

2. Modifiez votre CSS.

   Remarque : Une modification s'applique à la page en ligne, mais pas encore à la source.

3. Enregistrez la modification, par exemple en appuyant sur Ctrl/Cmd+S, et observez la modification appliquée dans votre fichier source. Le panneau Sources affiche un point vert à côté du nom du fichier.

   Remarque : Vous n'avez pas besoin d'actualiser la page pour appliquer et enregistrer les modifications CSS.

Pour découvrir le workflow, regardez la vidéo :

Enregistrer les modifications apportées au code HTML

Pour enregistrer les modifications apportées au code HTML :

1. Ouvrez un fichier HTML à partir du dossier de votre espace de travail connecté dans Sources > Espaces de travail.

2. Modifiez votre code HTML.

   Remarque : Une modification ne s'applique pas encore à la page en ligne ni à la source.

3. Enregistrez la modification, par exemple en appuyant sur Ctrl/Cmd+S, et observez la modification appliquée dans votre fichier source. Le panneau Sources affiche un point vert à côté du nom du fichier.

4. Actualisez la page pour que la modification prenne effet.

Pour découvrir le workflow, regardez la vidéo :

Remarque : Vous pouvez appliquer et enregistrer une modification HTML à partir du panneau Sources, mais pas du panneau Éléments.

Pourquoi ne pouvez-vous pas modifier le code HTML à partir du panneau Éléments ?

• L'arborescence de nœuds que vous voyez 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 peut ajouter, supprimer ou modifier des nœuds DOM. Le CSS peut également modifier le DOM, avec la propriété content.
• Le navigateur utilise ensuite le DOM pour déterminer le contenu à présenter aux utilisateurs du navigateur.
• 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 les outils de développement 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 bref, l'arborescence DOM !== HTML.

Enregistrer les modifications apportées au code JavaScript

Pour enregistrer les modifications apportées au code JavaScript :

1. Ouvrez un fichier JavaScript à partir du dossier de votre espace de travail connecté dans Sources > Espaces de travail.

2. Modifiez votre code JavaScript.

   Remarque : Une modification ne s'applique pas encore à la page en ligne ni à la source.

3. Enregistrez la modification, par exemple en appuyant sur Ctrl/Cmd+S, et observez la modification appliquée dans votre fichier source. Le panneau Sources affiche un point vert à côté du nom du fichier.

4. Si votre serveur HTTP local écoute les modifications apportées aux fichiers sources en direct et actualise automatiquement la page, les modifications s'appliqueront une fois que vous les aurez enregistrées dans les outils de développement. Sinon, redéployez votre serveur local.

Pour découvrir le workflow, regardez la vidéo :

Astuce : Lorsque vous modifiez du code JavaScript, vous devez parfois accéder à d'autres panneaux, tels que le panneau Éléments ou la Console. Pour ce faire, vous pouvez utiliser le panneau latéral et réorganiser les panneaux.

Supprimer une connexion à un dossier d'espace de travail

Pour supprimer une connexion à un dossier de l'espace de travail, accédez à Sources > Espace de travail, effectuez un clic droit sur le dossier, sélectionnez Supprimer de l'espace de travail dans le menu déroulant, puis cliquez sur Supprimer.

Remarque : Modifier ou supprimer l'UUID du dossier dans le fichier de métadonnées JSON déconnecte également le dossier.

Connecter manuellement un dossier d'espace de travail

1. Ouvrez les outils de développement sur votre page hébergée localement.

2. Dans Sources > Espace de travail, cliquez sur Ajouter un dossier manuellement. Sélectionnez ensuite un dossier contenant vos fichiers sources.

   

   Remarque : Vous pouvez également faire glisser le dossier dans le panneau Sources.

3. Suivez ensuite les étapes 3 et 4 de la section Connecter un dossier d'espace de travail.

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. Une connexion à un dossier d'espace de travail est généralement capable de mapper le code optimisé à votre code source d'origine à l'aide de mappages sources.

La communauté DevTools s'efforce de prendre en charge les fonctionnalités fournies par les mappages sources dans divers 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.

Étapes suivantes

Vous pouvez gérer tous les dossiers déjà configurés sous Paramètres > Espace de travail.

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

Voir aussi

Les remplacements locaux sont une autre fonctionnalité des outils de développement, quelque peu similaire, qui vous permet de simuler du contenu Web ou des en-têtes de requête. Vous pouvez ainsi tester librement les modifications apportées à une page sans attendre que le backend rattrape son retard. Avec les remplacements locaux, les modifications persistent d'un chargement de page à l'autre, mais ne sont pas mappées au code source de votre page.