Exporter les changements CSS à partir de 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 directement. L’utilisation des touches fléchées pour changer des choses comme la marge et le remplissage rend les choses très faciles.

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

Est-ce que quelque chose comme ça existe?

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

Dans la section Éléments, cliquez simplement sur le lien “nomfichier: numéro de lin” à côté des règles CSS. Le fichier CSS qui apparaîtra contiendra toutes les modifications.

Cet endroit exactement:

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg

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 à une révision précédente.

Voir la section Historique de révision et de révision de ce didacticiel.

Firediff est un complément 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 grande que cela), dites Shift-Ctrl-F pour obtenir des informations 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.

Si vous éditez des CSS externes, vous pouvez alors faire glisser sa dernière révision du panneau Ressources vers n’importe quel éditeur de texte prenant en charge le 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 pour toute version antérieure de la ressource feuille de style (dans le menu contextuel contextuel de toute révision de feuille de style).

J’ai suggéré ce produit sur SO avant (je ne suis pas affilié avec eux en aucune façon).

http://www.skybound.ca/

Excellent produit. Cela ressemble à ce que vous cherchez et bien plus encore.

EDIT: Plusieurs autres réponses ont mentionné la capacité de Google Chrome à créer des liens vers vos fichiers locaux (ce qui est très très cool). Découvrez les autres réponses!

Comme mentionné par cloudworks, la réponse à cette question a changé. Cela peut maintenant être accompli plutôt bien avec 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, veuillez vous reporter au guide écrit par @addyosmani sur son blog, ici .

entrer la description de l'image ici

Il y a aussi un screencast pratique qui détaille assez bien l’extension.

Avec les espaces de travail, vous pouvez enregistrer vos CSS à mesure que vous les tapez dans votre inspecteur (dans Chrome). Le problème est que chaque modification est automatiquement enregistrée et qu’il est impossible 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 les outils de développement Chrome. .

Mon produit LIVEDitor in-beta-soon le fait exactement.

Pour vous permettre de comprendre facilement, l’inspecteur de Firebug est intégré à votre éditeur de texte.

De cette façon, vous ne devez plus effectuer les modifications manuellement dans votre éditeur de code après l’avoir modifié à l’aide des outils de développement de Firebug ou de Webkit.

Si vous utilisez les outils de développement de Firefox, vous pouvez éditer le css directement dans la boîte de dialog des outils – cliquez sur le bouton de la fenêtre CSS (c’est le bouton en haut avec le symbole {} ) et éditez directement votre css. Il se mettra à jour en temps réel dans le navigateur et lorsque vous aurez terminé, copiez-le directement dans votre fichier css. Agréable!

Pour append une réponse spécifique à Safari, c’est possible.

Lorsque vous modifiez le code CSS dans la section Styles de l’inspecteur pour un fichier CSS existant, vous pouvez Cmd-S sur Cmd-S pour réenregistrer le fichier entier avec les modifications. Cependant, si vous utilisez un méta-langage tel que Sass / preprocessor / générer votre CSS avec bundling etc, je ne pense pas que cela résout vraiment ce problème, même si cela peut être possible avec les cartes sources CSS.

Lorsque vous modifiez CSS en haut de la section Styles, sous Style Atsortingbute pour append 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 obsolètes, mais disponibles ici: Didacticiel Web Inspector – Modification du code pour modifier votre page Web .

J’ai construit une extension Chrome qui fait exactement cela.

Il s’appelle StyleURL – il prend toutes les modifications CSS que vous avez apscopes à Chrome Inspector et affiche des CSS valides sous la forme du diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Voici un exemple où j’ai ajouté “padding-bottom: 50px” à cette page: Exemple de styleURL diff

C’est open-source et sur GitHub aussi: https://github.com/Jarred-Sumner/styleurl-extension