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

195

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

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

entrez la description de l'image ici

Mais je travaille localement sur un fichier CSS mais les modifications ne s'affichent pas dans le panneau des ressources pour moi

entrez la description de l'image ici

entrez la description de l'image ici

Au fait Connaissez-vous des modules complémentaires, des outils pour enregistrer les modifications css des outils de développement Chrome? Je sais que pour Firebug, il y en a beaucoup https://stackoverflow.com/search?q=firebug+CSS+changes+save

html css google-chrome google-chrome-extension google-chrome-devtools Jitendra Vyas
la source
Il existe maintenant une API pour les extensions DevTools pour recevoir des notifications sur les ressources en cours de modification - vous pouvez donc créer une extension qui s'intégrera à votre IDE de votre choix ou simplement publier le contenu de la ressource sur un serveur WebDAV: developer.chrome.com/extensions/ …
caseq
9
Je pense que cette question et ses réponses sont obsolètes, car Chrome a depuis déplacé sa fonctionnalité de sauvegarde CSS modifiée vers le panneau "Sources" . La fonctionnalité est assez déroutante et quelque peu trompeuse: j'ai exploré en détail cette fonctionnalité d'économie CSS modifiée de Chrome dans cet article lié à Stack Overflow: stackoverflow.com/questions/16005435/…
ChaseMoskal
Copie
mems
Les remplacements locaux sont une nouvelle façon de procéder, à partir de Chrome 65. Les remplacements sont une fonctionnalité différente de celle des espaces de travail.
Kayce Basques

Réponses:

137

Vous pouvez enregistrer vos modifications CSS à partir des outils de développement Chrome lui-même. Chrome vous permet désormais 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 à une ressource locale.

  • Accédez au panneau Sources des outils de développement, cliquez avec le bouton droit 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 dans le 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.

entrez la description de l'image ici

  • Après avoir ajouté le dossier, vous devrez donner à Chrome l'accès au dossier. Autoriser l'accès à Chrome

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

entrez la description de l'image ici

  • Après avoir rechargé la page, Chrome charge désormais les ressources locales pour les fichiers mappés. Pour simplifier les choses, Chrome ne vous montre que les ressources locales (vous ne savez donc pas si vous modifiez la ressource locale ou la ressource réseau). Pour enregistrer vos modifications, appuyez sur CTRL + Slors de l'édition du fichier.

ps

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

Philip Ramirez
la source
4
Je veux seulement ajouter au bas de la feuille de style de mon thème les différences CSS que j'ai trouvées lors de l'édition en direct de mon CSS. C'est tout. Existe-t-il un moyen de créer un «diff» qui est du CSS que je peux copier et coller? Voir cette autre question: stackoverflow.com/questions/21871535/... L'histoire de fond est que je suis en train d'éditer du CSS qui appartient à un thème, je ne peux ajouter que du CSS en bas de la feuille de style, je ne peux rien modifier ci-dessus. La même chose s'applique si quelqu'un ne peut ajouter qu'un custom.css à un site Web avec ses remplacements CSS.
Caroline Schnapp
paul-irish, Intéressé par la façon de faire le diff / patch uniquement des changements locaux CSS (sans changements à distance). SaveComme pas vraiment résoudre le problème de la flexibilité et de l'accélération ...
Denis Denisov
Maintenant, Chrome enregistre automatiquement les fichiers locaux (sans appuyer sur CTRL + S) comment éviter cela?
Uzair Ali
Ça ne marche pas pour moi. Après avoir enregistré le fichier CSS dans le dossier local, mappé à distance sur local et rechargé, toutes les modifications ont disparu. :( modifier le fichier local dans le panneau Éléments et enregistrer le fichier dans les sources ne persiste pas non plus mes modifications.
croustillant
2
Il semble y avoir un bogue dans l'inspecteur Chrome 46 qui, lors du rechargement de la page, le fichier local mappé n'est réappliqué que lorsque vous le modifiez dans le panneau Sources. Vous pouvez même le modifier dans un éditeur externe, mais vous devez l'ouvrir et le concentrer dans le panneau Sources.
croustillant
30

Rédacteur technique et développeur DevTools ici.

À partir de Chrome 65, les remplacements locaux sont un nouveau moyen léger de le faire. Il s'agit d'une fonctionnalité différente des espaces de travail.

Configurer les remplacements

  1. Accédez au panneau Sources .
  2. Accédez à l' onglet Remplacements .
  3. Cliquez sur Sélectionner le 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 Autoriser 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 le background:rosybrownchangement persiste à travers les chargements de page.

remplace la démo

Comment fonctionnent les remplacements

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 remplacements et les espaces de travail

Workspaces est conçu pour vous permettre d'utiliser DevTools comme IDE. Il mappe le code de votre référentiel au code du réseau, à l'aide de cartes source. Le véritable avantage est que si vous minifiez votre code ou que vous utilisez du code qui doit être transpilé, comme SCSS, les modifications que vous apportez dans DevTools (généralement) sont réintégrées dans votre code source d'origine. Les remplacements, en revanche, vous permettent de modifier et d'enregistrer n'importe quel fichier sur le Web. C'est une bonne solution si vous souhaitez simplement expérimenter rapidement les modifications et enregistrer ces modifications lors des chargements de page.

Kayce Basques
la source
5
cela fonctionne, mais c'est encore trop compliqué. Je préférerais que vous ne puissiez l'activer que pour la session en cours. À mon humble avis, une case à cocher comme "Conserver les modifications des ressources pour la session en cours" s'intégrerait mieux dans le flux de travail des développeurs Web. Les modifications persistantes ne sont pas quelque chose dont un développeur Web a besoin dans ses activités quotidiennes et peuvent même causer des maux de tête supplémentaires si vous oubliez de supprimer ces remplacements et de revenir quelques semaines plus tard. Les remplacements conviennent aux utilisateurs finaux - pas pour le débogage. Toujours voté.
Je suis d'accord avec l'autre commentaire. Ce n'est pas du tout intuitif et cela ne sauvegarde pas toutes les modifications, donc pas vraiment utile. Il vaudrait mieux que nous écrivions simplement une petite extension chrome en écoutant les modifications et en les enregistrant. C'est s'il y a une API ou un processus auquel nous pouvons nous accrocher ... je ne l'ai pas encore recherché.
Carles Alcolea
Désolé monsieur. LiveSCSS n'est-il pas obsolète et n'est plus développé? Reportez-vous à stackoverflow.com/a/57622797/10189759
Luk Aron
@Kayce Basques qu'en est-il du développement d'extensions Chrome? Lorsque vous injectez des feuilles de style (et js), toutes ces fonctionnalités ne fonctionnent pas, non? Toute solution pour ce type de développement (pour accélérer les mises à jour css / js des outils de développement chrome vers les fichiers source locaux d'extension). Merci
Andrew
19

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 enregistrer avec juste ctrl-s.

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

rjmunro
la source
Je pense qu'OP veut voir les modifications qu'il a apportées dans l'onglet Styles du panneau Eléments. Ces modifications ne sont pas nécessairement liées à un fichier source spécifique.
Ron Inbar
13

Je sais que c'est un ancien message, mais je l'enregistre de cette façon:

  1. Accédez au volet Sources.
  2. Cliquez sur Afficher le navigateur (pour afficher le volet du navigateur à gauche).entrez la description de l'image ici
  3. Cliquez sur le fichier CSS souhaité. (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 les modifications locales pour voir vos révisions, fonctionnalité très intéressante. Travaillez également avec des scripts.

Guilherme de Jesus Santos
la source
Je n'ai pas pu localiser "Afficher le navigateur"
NickyLarson
@NickyLarson, j'ai modifié ma réponse pour inclure où se trouve ce bouton.
Guilherme de Jesus Santos
Relisez la question d'origine. Il n'édite pas un fichier CSS. Il apporte des modifications dans l'onglet Styles du panneau Eléments.
Ron Inbar
11

Vous cherchez dans la mauvaise section de "Ressources".

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

La capture d'écran ci-dessus montre une différence entre les styles originaux et les nouvelles modifications apportées dans les outils de développement. Vous pouvez cliquer avec le bouton droit sur l'élément dans le volet gauche et le réenregistrer sur le disque.

trentenaire
la source
Rien à l'intérieur de Frames aussi, pour moi. J'ai ajouté une autre capture d'écran en question
Jitendra Vyas
Je ne sais pas comment vos "cadres" peuvent être vides. Cela semble cassé. Essayez ceci dans la version Canary (vous pouvez l'installer avec votre version actuelle): tools.google.com/dlpage/chromesxs
thirtydot
Canary ne peut pas ouvrir. J'ai également trouvé cette solution justin.my/2011/04/why-my-google-chrome-canary-cannot-run mais cela ne fonctionne toujours pas. J'ai reçu ce message une fois l'installation terminée k.min.us/iefbE2.jpg
Jitendra Vyas
2
Depuis ce week-end (21/05/2012), cette solution ne fonctionne plus je crois. J'avais l'habitude de faire la même chose que vous montrez pour écrire de gros morceaux de nouveau css (pas d'anciens, ni de modifications). Mais maintenant, pour moi du moins, cliquer sur ce fichier HTML ne montre que le HTML brut sans afficher les nouvelles règles CSS. Cela fonctionne-t-il toujours pour vous, et si non, avez-vous une nouvelle solution pour y parvenir?
Nucleon
cela ne fonctionne pas non plus pour moi dans Chrome 48. Quoi qu'il en soit, faire encore cela?
DMTintner
10

L'extension Tincr Chrome est plus facile à installer (pas besoin d'exécuter le serveur de nœuds) ET est également livrée avec LiveReload comme une fonctionnalité prête à l'emploi! Parlez de montage bidirectionnel! :)

Site Web Tin.cr

Lien Chrome Web Store

Article du blog d'Andy

Jose Browne
la source
Les outils open source comme les navigateursync.io sont bien meilleurs, prennent en charge tous les navigateurs modernes et fournissent bien plus
Gianfranco P.
8

Maintenant que Chrome 18 est sorti la semaine dernière avec les API requises, j'ai publié mon extension Chrome dans le Chrome Web Store. L'extension enregistre automatiquement les modifications dans CSS ou JS dans les outils de développement sur le disque local. Allez le vérifier.

Tomi Mickelsson
la source
4

Pour info, si vous utilisez des styles en ligne ou modifiez directement le DOM (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 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 comparaison pour voir mes modifications.

Image de l'outil Diff

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

RoccoB
la source
1

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

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

FajitaNachos
la source
1

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

  1. Accédez à un style que vous avez ajouté. Il devrait y avoir un lien indiquant l'inspecteur-feuille de style:

entrez la description de l'image ici

  1. Cliquez dessus, et cela ouvrira tous les CSS que vous avez ajoutés dans le panneau des sources

  2. Copiez et collez-le - yay!

Si vous avez utilisé element.style:

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

Ethan
la source
1
Et si vous ne trouvez pas cette feuille de style d'inspecteur parce que vous avez perdu la recherche dans le dom, il suffit de Ctrl + P (ou CMD + P) pendant que DevTools est concentré et commencez à écrire "inspec" ... cela apparaîtra tout de suite, puis entrez simplement. i.imgur.com/WSWcbh8.png
Carles Alcolea
1

MISE À JOUR 2019: Comme les autres réponses sont un peu obsolètes, j'ajouterai une mise à jour ici. Dans la dernière version, il n'est pas nécessaire de mapper le dossier chrome sur le système de fichiers.

entrez la description de l'image ici

Donc, supposons que j'ai un dossier Web contenant des fichiers HTML, CSS, JS sur le bureau que je souhaite mettre à jour lorsque j'apporte des modifications dans Chrome: =

1) Vous auriez besoin d' un serveur local en cours d' exécution comme nœud etc, encore cette extension vscode crée le serveur pour vous: serveur en extension VSCode , l' installer, exécutez le serveur.

2) chargez la page html dans chrome à partir du serveur local en cours d'exécution.

3) Ouvrez devTools-> Sources-> Système de fichiers-> Ajouter un dossier à l'espace de travail

entrez la description de l'image ici

4) Ajoutez le dossier utilisé pour exécuter le serveur local. Aucun mappage supplémentaire n'est requis dans le dernier chrome! Ta-da!

Plus d'informations Modifier des fichiers avec des espaces de travail

Notez que les modifications apportées à l'onglet styles ne seront PAS reflétées sur les fichiers du système de fichiers. Au lieu de cela, vous devez aller dans devtools-> source-> your_folder, puis y apporter vos modifications et recharger la page pour voir l'effet.
entrez la description de l'image ici

JerryGoyal
la source
1
Mais OP a spécifiquement posé des questions sur les modifications apportées dans l'onglet Styles ...
Ron Inbar