Comment enregistrer les modifications apportées au CSS dans le panneau Styles des outils de développement de Chrome ?

Question

Comment enregistrer les modifications apportées au CSS dans le panneau Styles des outils de développement de Chrome ?

Demandé el 27 de Juillet, 2011: Quand la question a-t-elle été
53995 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Comment sauvegarder les modifications CSS de Panneau des styles de Outils pour développeurs de Google Chrome ?

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

enter image description here

Je travaille localement sur un fichier CSS, mais les modifications n'apparaissent pas dans le panneau des ressources.

enter image description here

Au fait, connaissez-vous des modules complémentaires ou des outils permettant de sauvegarder les modifications apportées aux fichiers CSS dans les outils de développement de Chrome ? Je sais que pour Firebug, il y a plusieurs https://stackoverflow.com/search?q=firebug+CSS+modifications+sauvegarde

Demandé el 27 de Juillet, 2011 par Jitendra Vyas

0 votes

Il existe désormais une API permettant aux extensions DevTools de recevoir des notifications sur les ressources en cours de modification. Vous pouvez donc créer une extension qui s'intégrera à l'IDE de votre choix ou simplement publier le contenu des ressources sur un serveur WebDAV : developer.chrome.com/extensions/

Commenté el 9 de Novembre, 2011 par caseq

9 votes

Je crois que cette question et ses réponses sont obsolètes, car Depuis, Chrome a déplacé sa fonctionnalité de sauvegarde des fichiers CSS modifiés vers le panneau "Sources". . La fonctionnalité est assez confuse, et quelque peu trompeuse : J'ai exploré cette fonctionnalité de sauvegarde des CSS modifiés de Chrome de manière assez détaillée dans cet article connexe de Stack Overflow : stackoverflow.com/questions/16005435/

Commenté el 15 de Avril, 2013 par ChaseMoskal

0 votes

Duplicata possible de Exportation des changements CSS depuis l'inspecteur (webkit, firebug, etc)

Commenté el 11 de Mai, 2016 par mems

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

153voto

Philip Ramirez Points 1538

Vous pouvez enregistrer vos modifications CSS à partir de Chrome Dev Tools 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 avoir ajouté le dossier à l'espace de travail local, vous pouvez associer une ressource Web à une ressource locale.

Naviguez jusqu'au panneau Sources des outils du développeur, Cliquez à droite 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 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.

enter image description here

Après avoir ajouté le dossier, vous devrez donner à Chrome l'accès à ce dossier.
Ensuite, vous devez faire correspondre 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 n'affiche que les ressources locales (afin que vous ne vous demandiez pas si vous modifiez la ressource locale ou la ressource réseau). Pour enregistrer vos modifications, appuyez sur CTRL + S lors de l'édition du fichier.

p.s.

Il se peut que vous deviez ouvrir le(s) fichier(s) mappé(s) et commencer à le(s) modifier pour que Chrome applique la version locale (date 201604.12).

Répondu el 27 de Juillet, 2011 par Philip Ramirez (1538 Points )

5 votes

Je veux seulement ajouter au bas de la feuille de style de mon thème les différences CSS que j'ai trouvées en éditant mon CSS en direct. C'est tout. Existe-t-il un moyen de créer une différence de CSS que je puisse copier et coller ? Voir cette autre question : stackoverflow.com/questions/21871535/ Je modifie une feuille de style CSS qui appartient à un thème. Je ne peux ajouter une feuille de style CSS qu'en bas de la feuille de style, mais je ne peux rien modifier au-dessus. Il en va de même si quelqu'un ne peut ajouter qu'un custom.css à un site Web avec ses surcharges CSS.

Commenté el 19 de Février, 2014 par Caroline Schnapp

0 votes

Paul-irish, Intéressé par la façon de faire le diff/patch seulement les changements locaux CSS (sans les changements à distance). SaveAs pas vraiment résoudre le problème de la flexibilité et l'accélération ...

Commenté el 6 de Mars, 2015 par Denji

0 votes

Maintenant, Chrome enregistre automatiquement les fichiers locaux (sans appuyer sur CTRL + S). Comment empêcher cela ?

Commenté el 16 de Septembre, 2015 par Uzair Ali

Afficher 3 autres commentaires

Answer 3

19voto

rjmunro Points 10522

Les nouvelles versions de Chrome disposent d'une fonctionnalité appelée "espaces de travail" qui permet de résoudre ce problème. Vous pouvez définir les chemins d'accès de votre serveur Web qui correspondent aux chemins d'accès de votre système, puis les modifier et les enregistrer en appuyant simplement sur la touche ctrl-s.

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

Répondu el 30 de Septembre, 2013 par rjmunro (10522 Points )

0 votes

Je pense que le PO veut voir les modifications qu'il a apportées dans l'onglet Styles du panneau Éléments. Ces modifications ne sont pas nécessairement liées à un fichier source spécifique.

Commenté el 31 de Mai, 2020 par Ron Inbar

Answer 4

12voto

thirtydot Points 114021

Vous cherchez dans la mauvaise section de "Ressources".

Ce n'est pas sous "Local Storage", c'est sous "Frames" :

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

Répondu el 27 de Juillet, 2011 par thirtydot (114021 Points )

0 votes

Rien à l'intérieur de Frames aussi, pour moi. J'ai ajouté une autre capture d'écran en question

Commenté el 27 de Juillet, 2011 par Jitendra Vyas

0 votes

Je ne sais pas comment vos "Frames" peuvent être vides. Cela semble cassé. Essayez-le dans la version Canary (vous pouvez l'installer en même temps que votre version actuelle) : tools.google.com/dlpage/chromesxs

Commenté el 27 de Juillet, 2011 par thirtydot

0 votes

Le canari ne s'ouvre pas. J'ai également trouvé cette solution justin.my/2011/04/why-my-google-chrome-canary-cannot-run mais ça ne fonctionne toujours pas. J'ai obtenu ce message à la fin de l'installation k.min.us/iefbE2.jpg

Commenté el 27 de Juillet, 2011 par Jitendra Vyas

Afficher 3 autres commentaires

Answer 5

10voto

Jose Browne Points 1073

L'extension Chrome de Tincr est plus facile à installer (il n'est pas nécessaire d'exécuter le serveur de nœuds) ET est également livré avec une fonctionnalité similaire à LiveReload ! Vous parlez d'une édition bidirectionnelle ! :)

Site web de Tin.cr

Lien vers le Chrome Web Store

Article du blog d'Andy

Répondu el 9 de Octobre, 2012 par Jose Browne (1073 Points )

0 votes

Les outils à code source ouvert comme browsersync.io sont bien meilleurs, prennent en charge tous les navigateurs modernes et offrent bien plus de possibilités.

Commenté el 20 de Février, 2015 par GianPaJ

Answer 6

7voto

Jitendra Vyas Points 28378

Aujourd'hui, j'ai reçu le plugin pour cette

Répondu el 17 de Décembre, 2011 par Jitendra Vyas (28378 Points )

Comment enregistrer les modifications apportées au CSS dans le panneau Styles des outils de développement de Chrome ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment enregistrer les modifications apportées au CSS dans le panneau Styles des outils de développement de Chrome ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: