Exportez les modifications CSS depuis l'inspecteur (webkit, firebug, etc.)

Lorsque je travaille avec CSS, je teste souvent dans un navigateur - disons, Chrome - cliquez avec le bouton droit sur un élément, cliquez sur Inspecter l'élément et modifiez le CSS ici. L'utilisation des touches fléchées pour modifier des éléments tels que la marge et le rembourrage facilite l'alignement des éléments.

Ce n'est pas trop difficile de prendre ces modifications et de les appliquer au fichier CSS, mais ce serait cool si je pouvais faire un clic droit sur le sélecteur dans l'inspecteur et sélectionner "exporter" ou "copier", et avoir le contenu disponible dans mon presse-papiers.

Est-ce que quelque chose comme ça existe?

J'ai trouvé la réponse à cela, du moins à partir de Chrome v14.

Dans la section Éléments, cliquez simplement sur le lien "filename: 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.

Consultez la section Modification en direct et historique des révisions 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 (excellent) mais aussi votre brève utilisation de l'extension Web Developer Toolbar (pas si génial), dites Shift-Ctrl-F pour obtenir une information sur la taille de la 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 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/webstore/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

Dans Chrome, il y a aussi l' onglet Modifications dans le tiroir de la console qui affiche toutes les modifications de CSS. Ce n'est pas une exportation, mais au moins il est très pratique de saisir rapidement ce qui a changé.

J'ai déjà suggéré ce produit sur SO (je ne suis en aucun cas affilié à eux).

http://www.skybound.ca/

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!

Si vous modifiez le CSS externe, vous pouvez faire glisser sa dernière révision du panneau Ressources vers n'importe quel éditeur de texte prenant en charge DnD (voir http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ , la section "Modifications persistantes" pour plus de détails.) Vous pouvez également rétablir vos modifications CSS à n'importe quelle version antérieure de la ressource de feuille de style (dans le menu contextuel de n'importe quelle révision de feuille de style).

Comme mentionné par cloudworks, la réponse à cela a changé. Cela peut maintenant être assez bien accompli par l' extension Chrome DevTools Autosave . Cet outil suit les modifications CSS et JavaScript apportées dans la console des outils de développement Chrome et les enregistre dans des fichiers locaux. Pour obtenir des instructions sur l'installation et la configuration de l'extension, veuillez vous reporter au guide rédigé par @addyosmani sur son blog, ici .

Il existe également un screencast pratique qui détaille assez bien l'extension.

Avec les espaces de travail, vous pouvez enregistrer vos CSS au fur et à mesure que vous les saisissez 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ésactiver l'enregistrement automatique des modifications CSS dans Chrome Developer Tools .

Firefox et Chrome prennent en charge cette fonctionnalité maintenant, mais il convient de noter que sur certaines plates-formes, sinon tout Chrome ne l'affiche pas par défaut, vous devez activer la vue "Modifications" pour la voir (dans mon Kubuntu Linux 20.04, ce n'était pas par défaut), voici comment vous pouvez l'activer: allez sur le bouton "Personnaliser et contrôler DevTools" dans la barre des outils de développement> "Plus d'outils"> "Modifications" , puis l'onglet apparaîtra au niveau du bouton:

Dans Firefox, il n'est pas nécessaire de l'activer, mais si vous venez du monde Chrom *, il peut être difficile de le trouver. Vérifiez simplement la dernière section à droite dans l'onglet "Inspecteur":

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 {}symbole) et modifiez votre css directement. Il se mettra à jour en temps réel dans le navigateur et lorsque vous avez terminé, copiez-collez-le directement dans votre fichier css. Agréable!

Pour ajouter une réponse pour Safari spécifiquement - c'est un peu possible.

Lorsque vous modifiez le CSS dans la section Styles de l'inspecteur pour un fichier CSS existant, vous pouvez cliquer sur Cmd-Spour réenregistrer le fichier entier avec les modifications. Cependant, si vous utilisez un méta-langage comme Sass / préprocesseur / générez votre CSS avec le regroupement, etc., je ne pense pas que cela résout vraiment ce problème, bien que cela soit possible avec les cartes source CSS.

Lorsque vous modifiez le CSS en haut de la section Styles, sous Style Attributepour 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 de l'inspecteur Web - Modifier le code pour changer votre page Web .

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 tout dans inspector-stylesheet.css

C'est exactement ce que fait mon produit in-beta-soon LIVEditor .

Pour vous permettre de le comprendre facilement, vous pouvez penser que l'inspecteur de Firebug est intégré à votre éditeur de texte.

De cette façon, vous n'avez pas à effectuer à nouveau les modifications manuellement dans votre éditeur de code après l'avoir peaufiné à l'aide des outils de développement de Firebug ou Webkit.