Partager via

Modifier et enregistrer des fichiers dans un espace de travail (onglet Espace de travail de l’outil Sources)

Vous pouvez utiliser DevTools en tant qu’environnement de développement intégré (IDE) dans le navigateur. Pour enregistrer les modifications dans les fichiers sources de la page web, ajoutez le dossier de code source de la page web sous l’onglet Espace de travail de l’outil Sources . Vous pouvez ensuite modifier et enregistrer des fichiers HTML, CSS et JS dans l’éditeur de l’outil Sources (ou dans l’outil Source rapide dans le panneau Affichage rapide en bas de DevTools).

Vous pouvez créer, copier, renommer et supprimer des fichiers sources à partir de l’onglet Espace de travail .

Utilisez l’onglet Espace de travail de l’outil Sources pour afficher et modifier le contenu d’un dossier sur votre ordinateur à partir de l’outil Sources . Les modifications que vous apportez aux fichiers d’un espace de travail sont enregistrées sur votre ordinateur.

La façon classique de configurer un espace de travail consiste à le configurer pour afficher les fichiers sources du code front-end de votre site web. De cette façon, vous utilisez DevTools à la fois pour inspecter votre site web et pour apporter des modifications à ses fichiers sources. De cette façon, les modifications que vous apportez sont enregistrées sur votre ordinateur, plutôt que perdues lorsque vous actualisez la page.

Voir aussi :

Vue d’ensemble de la fonctionnalité d’espace de travail DevTools

Un espace de travail DevTools vous permet d’afficher le code source de votre site web qui se trouve sur votre ordinateur et d’y apporter des modifications à partir de l’outil Sources , afin que les modifications soient conservées dans les actualisations de la page.

Voici un scénario classique pour l’utilisation d’un espace de travail :

  1. Disposer du code source de votre site web sur votre ordinateur.

  2. Exécutez un serveur web local (tel que npx http-server) à partir du répertoire de code source, afin que le site soit accessible à une URL de développement locale telle que http://localhost:8080.

  3. Ouvrez http://localhost:8080 dans Microsoft Edge.

  4. Utilisez l’onglet Espace de travail de l’outil Sources dans DevTools pour modifier le code source de votre site web, y compris les fichiers CSS, HTML et JavaScript.

  5. Rechargez votre page web pour voir les modifications.

Votre site web peut utiliser un système de génération que vous devez exécuter avant de voir les modifications. Les développeurs web utilisent souvent un système de génération qui surveille les modifications enregistrées dans les fichiers de code source. Lorsque vous enregistrez une modification dans un fichier de code source, le système de génération génère ces modifications, puis actualise automatiquement la page dans le navigateur.

Si vous utilisez un tel système de génération automatisé, lorsque vous apportez une modification à un fichier source dans l’outil Sources et que vous l’enregistrez, ces modifications s’appliquent automatiquement à la page web rendue.

Limitations de la fonctionnalité d’espace de travail avec code source transformé

Si vous utilisez un framework moderne, il peut transformer votre code source d’un format facile à gérer en un format optimisé pour s’exécuter aussi rapidement que possible. L’onglet Espace de travail de l’outil Sources est généralement en mesure de mapper le code optimisé au code source d’origine, en utilisant des mappages de sources pour JavaScript et CSS. Toutefois, il existe de nombreuses variations dans la façon dont chaque infrastructure utilise les mappages sources.

DevTools ne prend pas en charge toutes les variantes de framework. Si vous rencontrez des problèmes lors de l’utilisation d’espaces de travail avec l’infrastructure de votre choix, ou si vous identifiez des étapes spécifiques à l’infrastructure qui sont nécessaires, contactez-nous pour l’utiliser en ouvrant un problème sur le référentiel MicrosoftEdge/DevTools .

Modification de CSS à l’aide de l’onglet Styles de l’outil Éléments, lors de l’utilisation de l’onglet Espace de travail de l’outil Sources

Si vous utilisez un espace de travail, dans certains cas, vous pouvez modifier css sous l’onglet Styles de l’outil Éléments et enregistrer les modifications dans le fichier mappé sur le disque :

  • Les modifications que vous apportez sous l’onglet Styles de l’outil Élémentssont enregistrées dans le fichier CSS sur le disque, si DevTools a mappé une feuille de style sur la page web et le fichier dans l’espace de travail, par exemple par une carte source ou par le contenu correspondant.

    Si vous utilisez une infrastructure de système de génération automatique, les modifications sont enregistrées dans votre fichier source si DevTools a pu mapper la feuille de style au fichier d’espace de travail, à l’aide d’une carte source.

    En fonction du système de génération automatisé ou de l’infrastructure que vous utilisez, DevTools peut être en mesure d’enregistrer les modifications sur le disque, s’il n’y a pas d’étape de génération ou s’il existe une étape de génération et une carte source. L’onglet Styles étant mappé au fichier CSS sur le disque, les modifications de l’onglet Styles sont enregistrées sur le disque.

  • Les modifications que vous apportez sous l’onglet Styles de l’outil Élémentsne sont pas enregistrées dans le fichier CSS sur le disque, si la feuille de style n’est pas mappée à un fichier d’espace de travail. La modification de CSS sous l’onglet Styles de l’outil Éléments perdra les modifications ; les modifications ne sont pas enregistrées sur le disque.

Si vous utilisez un espace de travail, modifiez le css dans l’outil Sources (et non dans l’outil Éléments ), car les fichiers sources que vous modifiez peuvent être générés ou compilés par un script de build avant d’être servis par votre serveur local. Lorsque vous modifiez dans l’outil Éléments , vous modifiez peut-être la version compilée et générée du fichier, et non le fichier source.

Lorsque vous utilisez un espace de travail :

  1. Modifiez le fichier dans l’outil Sources .
  2. Enregistrez la modification.
  3. Générez à nouveau. Certains systèmes de build le font automatiquement lorsqu’ils détectent une modification.
  4. Rechargez la page. Certains serveurs le font automatiquement lorsqu’ils détectent une modification.

Limitations de l’onglet Styles de l’outil Éléments

L’utilisation de l’onglet Styles de l’outil Éléments peut ne pas toujours fonctionner pour tous les scénarios. Supposons que votre projet utilise une infrastructure ou un préprocesseur pour écrire css, où vous n’écrivez pas directement css, mais que vous écrivez l’équivalent de CSS à l’aide d’un langage différent et d’une structure de fichiers différente. Un tel projet peut utiliser un système de génération qui traduit, compile et combine le code de type CSS en quelque chose que le navigateur peut comprendre.

Un tel projet peut générer des mappages de sources, de sorte que DevTools vous permet de voir et de modifier vos fichiers sources dans l’onglet Styles de l’outil Éléments. Mais dans certains cas, cela peut ne pas fonctionner ou le projet peut ne pas utiliser de mappages sources.

Lorsque cela se produit, les modifications que vous apportez dans l’onglet Styles de l’outil Éléments ne sont pas enregistrées dans les fichiers de l’espace de travail. Dans ce cas, modifiez vos fichiers sources dans l’outil Sources à la place. Dans le scénario ci-dessus, les fichiers qui utilisent une langue différente sont visibles dans l’onglet Espace de travail de l’outil Sources , et vous pouvez modifier les fichiers sources.

Ensuite, en arrière-plan, toutes les modifications enregistrées doivent être recréées et compilées (ce qui peut se produire automatiquement), puis les modifications sont visibles dans la page web rendue après une actualisation de page (ce qui peut se produire automatiquement).

Les remplacements locaux sont une fonctionnalité DevTools similaire à un espace de travail. Vous pouvez utiliser un remplacement lorsque vous souhaitez tester les modifications apportées à une page web et que vous devez afficher les modifications entre les chargements de pages web, mais vous ne vous souciez pas du mappage de vos modifications au code source de la page web.

Remplacements locaux enregistre les modifications que vous apportez à une page web dans un dossier de votre choix et les organise dans une structure de dossiers qui correspond à l’URL des ressources remplacées.

La fonctionnalité Remplacements stocke une copie des ressources de page web que vous modifiez dans DevTools. Lorsque vous actualisez la page, Microsoft Edge charge la copie modifiée locale des fichiers au lieu des fichiers sur le serveur.

Voir aussi :

Les modifications de l’arborescence DOM de l’outil Éléments sont perdues après l’actualisation

Pour apporter des modifications à un fichier source HTML, vous devez utiliser l’onglet Espace de travail de l’outil Sources au lieu de l’outil Éléments.

Limitations des modifications de l’arborescence DOM de l’outil >Elements :

Dans l’outil Éléments , il est possible de modifier la représentation DOM du document HTML, que le moteur de navigateur a construite lors du chargement de la page. Toutefois, les modifications apportées au DOM ne peuvent pas être mappées à des fichiers sources HTML. Vous pouvez apporter des modifications au contenu HTML à l’aide de l’arborescence DOM de l’outil Éléments , mais vos modifications apportées à l’arborescence DOM ne sont pas enregistrées sur le disque et affectent uniquement la session de navigateur active.

Voir aussi :

Limitations de l’onglet Page de l’outil >Sources :

L’onglet Page de l’outil Sources ne vous permet pas d’enregistrer les modifications apportées au système de fichiers.

  • Un fichier HTML ouvert via l’onglet Page ne peut pas être modifié.
  • Un fichier CSS ou JS ouvert via l’onglet Page peut être modifié, mais les modifications ne sont pas conservées dans les actualisations de la page web.

Les étapes suivantes montrent que les modifications de l’arborescence DOM de l’outil Éléments ne sont pas conservées dans les actualisations de page :

  1. Configurez la démonstration Des espaces de travail comme décrit dans Tutoriel Espace de travail (onglet Espace de travail de l’outil Sources).

  2. Dans DevTools, sélectionnez l’outil Éléments (</>).

  3. Dans l’arborescence DOM, dans l’élément <h1> , sélectionnez la chaîne DevTools Workspaces Demode texte , supprimez-la, tapez la chaîne I Love Cakede texte , puis appuyez sur Entrée. La page web rendue affiche le nouveau texte de titre , I Love Cake :

    Tentative de modification du code HTML à partir de l’arborescence DOM dans l’outil Éléments

  4. Sélectionnez l’outil Sources , cliquez avec le bouton droit sur index.html, puis sélectionnez Ouvrir dans le dossier contenant.

    Explorateur de fichiers ou le Finder s’ouvre.

  5. Ouvrez le index.html fichier qui se trouve dans votre /Demos/workspace/ répertoire dans un éditeur de texte, tel que Visual Studio Code. La modification que vous venez d’effectuer n’apparaît pas ; le titre indique toujours « DevTools Workspaces Demos », au lieu de « I Love Cake ».

  6. Dans le navigateur, actualisez la page de démonstration.

    La page revient au titre d’origine, « DevTools Workspaces Demos », car l’arborescence DOM avec votre modification a été ignorée et le DOM a été recréé à partir du fichier inchangé index.html qui se trouve dans votre /Demos/workspace/ répertoire.

Pourquoi les modifications d’arborescence DOM ne sont pas enregistrées

La modification de l’arborescence DOM dans éléments, conformément à la section ci-dessus, ne fonctionne pas.

  • L’arborescence de nœuds que vous voyez dans l’outil Éléments 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 en arborescence de nœuds DOM.

  • Si la page contient du code JavaScript, ce code JavaScript peut ajouter, supprimer ou modifier des nœuds DOM. CSS peut également modifier le DOM via la content propriété .

  • Le navigateur utilise finalement le DOM pour déterminer le contenu qu’il doit 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 extrait par le navigateur.

  • Il est donc difficile pour DevTools de résoudre l’endroit où une modification apportée à l’outil Elements doit être enregistrée, car le DOM est affecté par HTML, JavaScript et CSS.

En bref, l’arborescence DOM, que le moteur de navigateur a construite, est différente du document HTML téléchargé à partir du serveur.

Affichage des points « mappés » verts sur les fichiers

Si les points « mappés » verts cessent d’apparaître sur les fichiers dans DevTools, par exemple dans l’onglet Espace de travail ; ou si l’outil Modifications n’affiche pas les modifications attendues :

  • DevTools étant affiché, cliquez longuement ou cliquez avec le bouton droit sur le bouton Actualiser dans Microsoft Edge, puis sélectionnez Actualiser en dur (Ctrl+Maj+R).

    Un point vert « mappé » en regard d’un fichier dans DevTools indique que DevTools a établi un mappage entre une ressource réseau de la page reçue du serveur web et le fichier source local dans votre /Demos/workspace/ répertoire. Le nouveau fichier que vous ajoutez dans DevTools doit être retourné par le serveur, pour être indiqué comme mappé.

Si vous ajoutez un nouveau .js fichier dans l’espace de travail et que vous souhaitez qu’un cercle vert de « synchronisation » apparaisse sur le fichier ajouté .js et que le fichier soit représenté dans l’outil Modifications :

  1. Référencez le fichier ajouté .js dans le fichier HTML, par exemple la ligne <script src="test.js"></script> dans la <body> balise.

  2. Vérifiez qu’il y a du code dans le .js fichier, tel que la ligne console.log('hello from test.js');.

  3. Appuyez sur Ctrl+S (Windows, Linux) ou Cmd+S (macOS). Votre modification est enregistrée et l’astérisque disparaît.

  4. DevTools étant affiché, cliquez longuement ou cliquez avec le bouton droit sur le bouton Actualiser dans Microsoft Edge, puis sélectionnez Actualiser en dur (Ctrl+Maj+R).

Voir aussi :

Voir également

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page originale se trouve ici et est créée par Kayce Basques.

Licence Creative Commons Cette œuvre est concédée sous licence creative commons attribution 4.0 international.