Exporter les modifications CSS depuis l'inspecteur (webkit, firebug, etc.)
Lorsque je travaille avec CSS, je teste souvent dans un navigateur - par exemple, Chrome - cliquez avec le bouton droit sur un élément, cliquez sur Inspecter l'élément et modifiez le CSS à cet endroit. L'utilisation de la flèche les touches pour changer des choses comme la marge et le rembourrage rendent l'alignement des choses super facile.
Il n'est pas trop difficile de prendre ces modifications et de les appliquer au fichier CSS, mais ce serait cool si je pouvais simplement cliquer avec le bouton droit sur le sélecteur dans l'inspecteur et sélectionner "exporter" ou "copier", et avoir le contenu disponible dans mon presse-papiers.
Existe-t-il quelque chose comme ça?
J'ai trouvé la réponse à cela, au moins depuis Chrome v14.
Dans la section Éléments, cliquez simplement sur le lien "nom de fichier: numéro de lin" à côté des règles CSS. Le fichier CSS qui apparaît contiendra toutes les modifications.
Cet endroit exactement:
Dans Chrome, vous pouvez cliquer avec le bouton droit sur un fichier CSS dans l'onglet Sources et cliquer sur "Modifications locales"
Cela vous montre tous vos changements locaux. Chaque révision est horodatée et vous pouvez revenir à n'importe quelle révision précédente.
Voir la section Live Editing and Revision History de ce didacticiel.
Firediff est un module complémentaire Firebug qui suit les modifications effectuées dans Firebug. Il enregistre tout ce que vous ferez dans le volet HTML (génial) mais aussi votre brève utilisation de l'extension Web Developer Toolbar (pas si géniale), par exemple Shift-Ctrl-F pour obtenir une information de taille de police en px.
J'ai vu une extension Firebug dans Chrome mais je ne l'ai pas testée, j'utilise Firediff avec Firefox.
J'ai suggéré ce produit sur SO auparavant (je ne suis en aucun cas affilié avec eux).
Excellent produit. Cela ressemble exactement à ce que vous recherchez et bien plus encore.
EDIT: Plusieurs autres réponses ici ont mentionné la capacité de Google Chrome à créer un lien vers vos fichiers locaux (ce qui est très très cool). Découvrez les autres réponses!
J'ai construit une extension Chrome qui fait exactement cela.
Il s'appelle StyleURL - il prend toutes les modifications CSS que vous avez apportées dans Chrome Inspector et génère un CSS valide en tant que diff: https://chrome.google. com/boutique en ligne/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp
Voici un exemple où j'ai ajouté "padding-bottom: 50px" à cette page: 
C'est open-source et sur GitHub aussi: https://github.com/Jarred-Sumner/styleurl-extension
Comme mentionné par cloudworks, la réponse à cela a changé. Cela peut maintenant être accompli plutôt bien par l'extension Chrome DevTools Autosave . Cet outil suit les modifications CSS et JavaScript effectuées dans la console Chrome Developer Tools, et les enregistre dans des fichiers locaux. Pour obtenir des instructions sur l'installation et la configuration de l'extension, reportez-vous au guide écrit par @ addyosmani sur son blog, ici .
Il y a aussi un screencast pratique qui détaille assez bien l'extension.
Si vous modifiez un CSS externe, vous pouvez faire glisser sa dernière révision hors du panneau Ressources dans n'importe quel éditeur de texte prenant en charge DnD (voir http://www.webkit.org/blog/1463/web-inspector-styles -enhanced / , la section "Persisting Changes" pour plus de détails.) Vous pouvez également rétablir vos modifications CSS dans n'importe quelle version antérieure de la ressource de feuille de style (dans le menu contextuel contextuel de toute révision de feuille de style.)
Avec Workspaces , vous pouvez enregistrer votre CSS lorsque vous les tapez dans votre inspecteur (dans Chrome). Le problème est que chaque modification est automatiquement enregistrée et il n'y a aucun moyen de désactiver cette fonctionnalité, comme indiqué dans http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ et Désactivez l'enregistrement automatique des modifications CSS dans Chrome Developer Tools .
Si vous utilisez les outils de développement de Firefox, vous pouvez modifier le CSS directement dans la boîte de dialogue des outils - cliquez sur le bouton de la fenêtre CSS (c'est le bouton en haut avec le {} symbol) et modifiez directement votre css. Il sera mis à jour en temps réel dans le navigateur et lorsque vous aurez terminé, copiez-collez-le directement dans votre fichier css. Agréable!
Dans Chrome, dans l'inspecteur css, vous pouvez cliquer et maintenir le bouton +, puis choisir d'ajouter vos modifications à la feuille de style de l'inspecteur. Ce n'est pas aussi pratique que d'éditer directement dans vos sélecteurs css, mais ce que vous écrivez sera tous dans inspector-stylesheet.css
Pour ajouter une réponse spécifiquement pour Safari - c'est un peu possible.
Lorsque vous modifiez CSS dans la section Styles de l'inspecteur pour un fichier CSS existant, vous pouvez appuyer sur Cmd-S pour réenregistrer le fichier entier avec les modifications. Cependant, si vous utilisez un méta-langage comme Sass/préprocesseur/générer votre CSS avec le regroupement, etc., je ne pense pas que cela résout vraiment ce problème, bien que cela puisse être possible avec les cartes source CSS.
Lorsque vous modifiez CSS en haut de la section Styles, sous Style Attribute pour ajouter des styles en ligne (non liés à un fichier CSS existant), il ne semble pas possible d'exporter facilement toutes ces modifications. Pour l'instant, je ne fais que copier et coller les remplacements manuellement pour chaque élément.
Les documents officiels Apple sont un peu datés mais se trouvent ici: Tutoriel Web Inspector - Modification du code pour changer votre page Web .