web-dev-qa-db-fra.com

Comment enregistrer les modifications CSS du panneau Styles des outils de développement Chrome?

Comment enregistrer les modifications CSS de Panneau de styles de Outils de développement de Google Chrome ?

Sur le site Web de l'outil, il est mentionné que nous pouvons voir tout changement dans le panneau de ressources

enter image description here

Mais je travaille localement sur un fichier CSS, mais les modifications ne sont pas affichées dans le panneau Ressources pour moi.

enter image description here

enter image description here

Au fait, connaissez-vous des add-ons, des outils pour enregistrer les modifications CSS des outils pour développeurs Chrome? Je sais que pour Firebug, il existe de nombreux https://stackoverflow.com/search?q=firebug+CSS+changes+save

htmlcssgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
177
Jitendra Vyas

Vous pouvez enregistrer vos modifications CSS à partir des outils de développement Chrome. Chrome vous permet maintenant d'ajouter des dossiers locaux à votre espace de travail. Après avoir autorisé Chrome à accéder au dossier et ajouté le dossier à l'espace de travail local, vous pouvez mapper une ressource Web sur une ressource locale.

  • Accédez au panneau Sources des outils de développement, Cliquez avec le bouton droit de la souris sur dans le panneau de gauche (où les fichiers sont répertoriés) et sélectionnez Ajouter un dossier à l'espace de travail. Vous pouvez accéder rapidement à une feuille de style du panneau Sources en cliquant sur la feuille de style en haut à droite de chaque règle CSS pour un élément sélectionné dans le panneau Éléments.

enter image description here

  • Après avoir ajouté le dossier, vous devez autoriser Google Chrome à accéder au dossier .Allow chrome access

  • Ensuite, vous devez mapper la ressource réseau à la ressource locale.

enter image description here

  • Après avoir rechargé la page, Chrome charge maintenant les ressources locales pour les fichiers mappés. Pour simplifier les choses, Chrome ne vous montre que les ressources locales (pour que vous ne soyez pas dérouté quant à savoir si vous modifiez la ressource locale ou la ressource réseau). Pour enregistrer vos modifications, appuyez sur CTRL + S lors de la modification du fichier.

p.s.

Vous devrez peut-être ouvrir le (s) fichier (s) mappé (s) et commencer à modifier pour que Chrome applique la version locale (date 201604.12).

133
Philip Ramirez

Les nouvelles versions de Chrome ont une fonctionnalité appelée espaces de travail qui résout ce problème. Vous pouvez définir quels chemins sur votre serveur Web correspondent à quels chemins sur votre système, puis éditer et sauvegarder avec juste ctrl-s.

Voir: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

20
rjmunro

DevTools, rédacteur technique et défenseur des droits des développeurs ici.

À partir de Chrome 65, Remplacements locaux est un nouveau moyen léger de le faire. Cette fonctionnalité est différente de celle des espaces de travail. 

Configurer les dérogations

  1. Accédez au panneau Sources.
  2. Accédez à l'onglet Remplacements.
  3. Cliquez sur Sélectionner un dossier pour les remplacements.
  4. Sélectionnez le répertoire dans lequel vous souhaitez enregistrer vos modifications.
  5. En haut de votre fenêtre, cliquez sur Allow pour donner à DevTools un accès en lecture et en écriture au répertoire.
  6. Faites vos changements. Dans le GIF ci-dessous, vous pouvez voir que la modification background:rosybrown persiste lors du chargement de pages.

 overrides demo

Comment fonctionne le remplacement

Lorsque vous apportez une modification dans DevTools, DevTools enregistre la modification dans une copie modifiée du fichier sur votre ordinateur. Lorsque vous rechargez la page, DevTools sert le fichier modifié plutôt que la ressource réseau.

La différence entre les substitutions et les espaces de travail

Workspaces est conçu pour vous permettre d’utiliser DevTools comme votre IDE. Il mappe le code de votre référentiel sur le code du réseau, à l'aide de cartes sources. L'avantage réel est que si vous réduisez votre code ou utilisez un code qui doit être transpilé, tel que SCSS, les modifications que vous apportez dans DevTools (généralement) sont ensuite mappées dans votre code source d'origine. Les remplacements, quant à eux, vous permettent de modifier et d’enregistrer tout fichier sur le Web. C'est une bonne solution si vous souhaitez simplement expérimenter rapidement des modifications et les enregistrer lors du chargement de pages.

16
Kayce Basques

Je sais que c'est un ancien post, mais je le sauve de cette façon:

  1. Accédez au volet Sources.
  2. Cliquez sur Afficher le navigateur (pour afficher le volet de navigation à gauche).
  3. Cliquez sur le fichier CSS que vous voulez. (Il s'ouvrira dans l'éditeur, avec toutes les modifications que vous avez apportées)
  4. Faites un clic droit sur l'éditeur et enregistrez vos modifications.

Vous pouvez également voir Modifications locales pour voir vos révisions, fonctionnalité très intéressante . Travailler également avec des scripts.

12
Guilherme de Jesus Santos

Vous regardez dans la mauvaise section de "Ressources".

Ce n'est pas sous "Stockage local", c'est sous "Cadres":

La capture d'écran ci-dessus montre un diff des styles originaux par rapport aux nouvelles modifications apportées dans les devtools. Vous pouvez cliquer avec le bouton droit sur l'élément dans le volet de gauche et le sauvegarder sur le disque.

11
thirtydot

L’extension Tincr Chrome est plus facile à installer (pas besoin d’exécuter de serveur de nœud) ET vient également avec des fonctionnalités similaires à LiveReload! Parlez de montage bidirectionnel! :)

Site Web Tin.cr

Lien du Chrome Web Store

Article du blog d'Andy

10
Jose Browne

Maintenant que Chrome 18 est sorti la semaine dernière avec les API requises, j'ai publié mon chrome extension dans le magasin Web Chrome. L'extension enregistre automatiquement les modifications apportées à CSS ou JS dans les outils de développement sur le disque local. Allez y faire un tour.

8
Tomi Mickelsson

Pour votre information, si vous utilisez des styles en ligne ou si vous modifiez le DOM directement (par exemple, en ajoutant un élément), les espaces de travail ne résolvent pas ce problème. C'est parce que le DOM vit en mémoire et qu'il n'y a pas de fichier réel associé à l'état actif du DOM.

Pour cela, j'aime bien prendre un cliché "avant" et "après" du dom depuis la console: copy(document.getElementsByTagName('html')[0].outerHTML)

Ensuite, je le place dans un outil de diff pour voir mes modifications.

 Diff tool image

Article complet: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

2
RoccoB

Pour répondre à la dernière partie de votre question sur les extensions pouvant enregistrer les modifications, il existe un correctif correctif

Il vous permet d’enregistrer les modifications des outils de développement Chrome directement dans GitHub. De là, vous pouvez configurer un hook de post-réception sur GitHub pour mettre à jour automatiquement votre site web. 

2
FajitaNachos

Tant que vous n'avez pas collé le CSS dans element.style:

  1. Aller à un style que vous avez ajouté. Il devrait y avoir un lien disant inspecteur-feuille de style:

 enter image description here

  1. Cliquez dessus pour ouvrir tous les CSS que vous avez ajoutés dans le panneau des sources.

  2. Copiez et collez - yay!

Si vous avez avez utilisé element.style:

Vous pouvez simplement cliquer avec le bouton droit sur votre élément HTML, cliquer sur Modifier en tant que HTML, puis copier et coller le HTML avec les styles en ligne.

0
Ethan