Firebug est l'outil le plus pratique que j'ai trouvé pour éditer CSS - alors pourquoi n'y a-t-il pas une simple option "enregistrer" pour CSS?

Je suis toujours en train de faire des ajustements dans Firebug, puis de revenir à mon fichier .css d'origine et de répliquer les ajustements.

Quelqu'un a-t-il trouvé une meilleure solution?

EDIT: Je sais que le code est stocké sur un serveur (dans la plupart des cas pas le mien), mais je l'utilise lors de la création de mes propres sites Web.

Firebug utilise juste le fichier .css téléchargé par Firefox depuis le serveur, il sait précisément quelles lignes dans quels fichiers il édite. Je ne vois pas pourquoi il n'y a pas d'option "exporter" ou "enregistrer", qui vous permet de stocker le nouveau fichier .css. (Avec lequel je pourrais alors remplacer la télécommande).

J'ai essayé de chercher dans des emplacements temporaires, de choisir Fichier > Enregistrer ... et d'expérimenter les options de sortie sur Firefox, mais je n'ai toujours pas trouvé de moyen.

EDIT 2: Le groupe de discussion officiel a beaucoup de questions , mais pas de réponses.

Je suis arrivé ici à la recherche de cette fonctionnalité, c'est-à-dire de pouvoir enregistrer les CSSpropriétés modifiées dans le fichier d'origine (sur ma machine de développement locale). Malheureusement, après avoir beaucoup cherché et ne rien trouver qui corresponde à mes besoins (OK, il y a CSS Updater mais il faut s'inscrire et c'est une extension payante ...) j'ai abandonné Firefox + Firebug et j'ai cherché quelque chose de similaire pour Google Chrome. Devinez quoi ... Je viens de trouver ce super article qui montre un bon moyen de faire fonctionner cela (intégré à Chrome - il n'y a pas besoin d'extensions supplémentaires):

Modifier CSS et SAVE sur le système de fichiers local à l'aide des outils de développement Chrome

Je l'ai essayé maintenant et cela fonctionne très bien en mettant en évidence les lignes modifiées. Cliquez simplement sur Enregistrer et vous avez terminé! :)

Voici une vidéo expliquant cela et bien plus encore: Google I / O 2011: Chrome Dev Tools Reloaded

J'espère que cela vous aidera si cela n'a pas d'importance pour vous de changer de navigateur lors de l'édition de vos fichiers CSS. J'ai déjà fait le changement pour le moment, mais j'aimerais vraiment que cette fonctionnalité soit intégrée à Firebug. :)

[Mise à jour 1]

Aujourd'hui je viens de voir cette vidéo: Firefox CSS live edit dans Sublimetext (travail en cours) semble en effet prometteur.

[Mise à jour 2]

Si vous utilisez Visual Studio 2013 avec Web Essentials, vous pourrez synchroniser les CSS automatiquement, comme indiqué dans cette vidéo:

Web Essentials: intégration des outils du navigateur

Je me demande la même chose depuis un certain temps maintenant,
juste déchirant lorsque votre css'ing in-the-moment-freestyle-css avec Firebug est réduit en morceaux par
un rechargement accidentel ou autre ...

Pour mes intentions et objectifs, j'ai enfin trouvé l'outil ....: FireDiff .

Cela vous donne un nouvel onglet, probablement une référence étrange à David Bowie, appelée "changements"; qui vous permet non seulement de voir / sauvegarder ce que Firebug, c'est-à-dire vous, avez fait,
mais aussi éventuellement de suivre les modifications apportées par la page elle-même .... si elle et / ou vous êtes si enclin.

Tellement reconnaissant de ne pas avoir à retaper, ou à ré-imaginer puis à retaper , chaque règle css que je crée ...

Voici un lien vers le développeur (ne soyez pas décrié par la première apparition, peut-être aussi dirigez-vous directement vers le dépôt Mozilla Add-On .

Le module complémentaire Web Developer vous permet d'enregistrer vos modifications. Je voudrais combiner l'édition de Firebug avec la fonction Enregistrer de Web Developer.

Utilisez le bouton " Enregistrer " (cliquez sur le menu CSS -> Modifier CSS) pour enregistrer le CSS modifié sur le disque.

Recommandation : utilisez le bouton " Stick " pour éviter de perdre vos modifications lorsque vous modifiez l'onglet pour effectuer une autre navigation. Si cela est possible, utilisez un seul onglet pour effectuer l'édition et une autre fenêtre de Firefox les recherches associées, le webmail, etc.

Je viens de publier un addon firebug sur le sandbox de l'addon mozilla qui pourrait tout à fait faire ce que vous voulez: https://addons.mozilla.org/en/firefox/addon/52365/

Il enregistre en fait les fichiers css "touchés" à la demande sur votre serveur Web (par communication avec un script php de service Web à un fichier).

La documentation peut être trouvée sur ma page d'accueil ou sur la page addon

J'apprécierais tout test, rapport de bogue, commentaire, évaluation, discussion à ce sujet, car il est encore au début de la version bêta, mais devrait déjà fonctionner correctement.

CSS-X-Fire

Je suis surpris qu'il ne soit toujours pas répertorié dans cette question, mais probablement parce qu'il est nouveau et que l'auteur n'a pas encore eu le temps de le promouvoir.

Il s'appelle CSS-X-Fire et c'est un plugin pour la série d'IDE JetBrains: IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine .

Comment cela fonctionne: Vous installez l'un de ces IDE et configurez le déploiement (prend en charge FTP et SCP). Cela vous permettra de rester synchronisé avec le serveur.

Après cela, vous installez ce plugin. Lorsqu'il démarre, il vous demandera qu'il installera un plugin pour Firefox, afin de faire l'intégration entre Firebug et l'IDE. Si l'installation du plugin échoue, utilisez simplement la technique du glisser-déposer pour l'installer.

Une fois installé, il suivra toutes vos modifications depuis Firebug et vous pourrez les appliquer d'un simple clic dans l'IDE.

FireFile

FireFile est une alternative qui vous oblige à ajouter un petit fichier php côté serveur afin de pouvoir télécharger le css modifié.

Vous pouvez lier Firebug à Eclipse avec Fireclipse , puis enregistrer le fichier depuis Eclipse

Je pense que le plus proche que vous obtiendrez est de passer en mode Edit dans Firebug et de copier et coller le contenu du fichier CSS.

Nous venons de présenter Backfire, un moteur javascript open source qui vous permet d'enregistrer les modifications CSS apportées dans Firebug et Webkit inspector sur le serveur. La bibliothèque comprend un exemple d'implémentation C # de la façon d'enregistrer les modifications entrantes dans votre CSS.

Voici un article de blog sur son fonctionnement: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Et voici le code hébergé sur Google Code: http://code.google.com/p/backfire/

Je sais que cela ne répond pas à votre question, mais étonnamment, la "barre d'outils développeur" du clone Firebug d'Internet Explorer 8 (accessible via F12) offre la possibilité de "sauvegarder le HTML". Cette fonction enregistre le DOM actuel dans un fichier local, ce qui signifie que si vous éditez le DOM d'une manière ou d'une autre, par exemple en ajoutant un attribut de style quelque part, il sera également sauvegardé.

Pas particulièrement utile si vous utilisez Firebug pour jouer avec CSS comme tout le monde le fait, mais un pas dans la bonne direction.

Je propose une solution qui implique une combinaison de Firebug et FireFTP ainsi que du code qui accède directement au système de fichiers local lors de l'exécution d'un site Web localement.

Voici les scénarios:

Travailler sur un site Web hébergé sur une machine distante

Dans ce cas, vous fourniriez les détails FTP et l'emplacement du CSS / HTML / Javascript et Firebug mettrait alors à jour ces fichiers lorsque vous enregistrez vos modifications. Il peut même être en mesure de localiser les fichiers lui-même, puis de vous inviter à vérifier qu'il possède le fichier correct. Si les noms de fichiers sont uniques, cela ne devrait pas poser de problème.

Travailler sur un site Web fonctionnant sur votre machine locale

Dans ce cas, vous pouvez fournir à Firebug l'emplacement du dossier local du site Web et le même comportement serait utilisé pour faire correspondre et vérifier les fichiers. L'accès au système de fichiers local peut être effectué via FireFTP si nécessaire.

Travailler sur un site Web hébergé à distance sans accès FTP

Dans ce cas, quelque chose comme le module complémentaire FireFile devrait être implémenté.

Une fonctionnalité supplémentaire serait la possibilité d'enregistrer et d'ouvrir des fichiers de projet qui stockent les mappages entre les fichiers locaux et les URL auxquelles ils sont associés, ainsi que d'enregistrer les détails FTP comme le fait déjà FireFTP.

Je suis l'auteur de CSS-X-Fire que Sorin Sbarnea a également aimablement publié dans ce fil. Je suppose que je suis un peu en retard;)

CSS-X-Fire émet des modifications de propriété CSS de Firebug vers l'EDI où les modifications peuvent être appliquées ou rejetées.

Il y a quelques avantages avec cette solution par rapport à la plupart des autres outils existants qui ne connaissent que les noms de fichiers et le contenu téléchargé par le navigateur (voir le commentaire NickFitz dans le message d'origine).

Scénario 1: vous avez un site Web (projet) qui a une poignée de thèmes parmi lesquels l'utilisateur peut choisir. Chaque thème a son propre fichier CSS mais un seul est connu de Firebug, celui actuel. CSS-X-Fire détectera tous les sélecteurs correspondants dans le projet et vous laissera décider lesquels doivent être modifiés.

Scénario 2: le projet Web a des feuilles de style créées au moment de la compilation ou pendant le déploiement. Ils peuvent être fusionnés à partir de plusieurs fichiers et les noms de fichiers peuvent changer. CSS-X-Fire ne se soucie pas des noms des fichiers, il ne traite que des noms de sélecteurs CSS et de leurs propriétés.

Ci-dessus, des exemples de scénarios dans lesquels CSS-X-Fire excelle. Puisqu'il fonctionne avec les fichiers source et connaît la structure du langage, il aide également à trouver les doublons non connus de Firebug, à passer au code, etc.

CSS-X-Fire est open source sous la licence Apache 2. Accueil du projet: http://code.google.com/p/css-x-fire/

FireFile

Firebug a été créé pour détecter un problème de ne pas être un débogueur. mais vous pouvez enregistrer les modifications si vous ajoutez un nouvel outil qui intègre Firebug avec enregistrer les modifications. c'est FireFile, cliquez ici http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html .

FireFile fournit la fonctionnalité souhaitée en ajoutant un petit fichier PHP côté serveur.

Puisque Firebug ne fonctionne pas sur votre serveur mais prend le CSS du site et le stocke localement et vous montre le site avec ces changements locaux.

Utilisez l'éditeur CSS dans la barre d'outils Firefox Web Developer:

http://chrispederick.com/work/web-developer/

Il contient suffisamment de bonnes choses à utiliser avec Firebug et vous permet d'enregistrer votre CSS dans un fichier texte.

Utilisez Backfire.

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

C'est une solution open source qui renvoie les modifications CSS au serveur et les enregistre.

Backfire utilise un seul fichier javascript, et le package de code source a un exemple d'implémentation de serveur .NET fonctionnel qui est facilement portable vers d'autres plates-formes.

J'ai eu ce problème pour toujours, et j'ai finalement décidé que nous ne devions pas éditer des choses dans l'inspecteur Web et construit quelque chose pour cela ( https://github.com/viatropos/design.io ).

Une meilleure solution:

Le navigateur reflète automatiquement les modifications CSS sans recharger lorsque vous appuyez sur Enregistrer dans votre éditeur de texte .

La principale raison pour laquelle nous éditons le css dans l'inspecteur Web (j'utilise webkit, mais FireBug va dans le même sens) est que nous devons faire de petits ajustements et que le rechargement de la page prend trop de temps.

Il y a 2 problèmes principaux avec cette approche. Tout d'abord, vous êtes autorisé à modifier un élément individuel qui peut ne pas avoir de idsélecteur. Ainsi, même si vous pouviez copier / coller le CSS généré à partir de l'inspecteur Web, il devrait générer un idpour définir la portée du css. Quelque chose comme:

#element-127 {
  background: red;
}

Cela commencerait à mettre votre css en désordre.

Vous pouvez contourner cela en changeant uniquement les styles d'un sélecteur existant (le .spacesélecteur de classe dans l'image de l'inspecteur Webkit ci-dessous).

Pourtant, le deuxième problème. L'interface de cette chose est assez rude, il est difficile de faire de grands changements - comme si vous voulez essayer de copier très rapidement ce bloc de css à cet endroit, ou autre.

Je préfère m'en tenir à TextMate.

L'idéal serait d'écrire simplement le CSS dans votre éditeur de texte et de laisser le navigateur refléter les modifications sans recharger la page . De cette façon, vous écrivez votre css final pendant que vous apportez les petits changements.

Le niveau suivant serait d'écrire dans un langage CSS dynamique, comme Stylus, Less, SCSS, etc., et de mettre à jour le navigateur avec le CSS généré. De cette façon, vous pouvez commencer à créer des mixins comme box-shadow(), qui résorbent les complexités, ce que l'inspecteur Web ne peut certainement pas faire.

Il y a quelques choses qui font ça, mais rien ne le rationalise vraiment à mon avis.

• LiveReload : pousse le css vers le navigateur sans actualiser lorsque vous appuyez sur Enregistrer, mais c'est une application Mac , donc ce serait difficile à personnaliser.
• CodeKit : également une application Mac, mais elle actualise le navigateur à chaque fois que vous enregistrez.

Ne pas avoir la possibilité de personnaliser facilement leur fonctionnement est la principale raison pour laquelle je ne les ai pas utilisés.

J'ai mis en place https://github.com/viatropos/design.io spécifiquement pour résoudre ce problème, et en faire ainsi:

1. Le navigateur reflète le css / js / html / etc à chaque fois que vous enregistrez, sans recharger la page
2. Il peut gérer n'importe quel modèle / langage / framework (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
3. Il est écrit en JavaScript et vous pouvez créer des extensions très rapidement en JavaScript.

De cette façon, lorsque vous devez apporter ces petits changements au CSS, vous pouvez dire, définir la couleur d'arrière-plan, appuyer sur Enregistrer, voir non, pas tout à fait, ajuster la teinte par 10, enregistrer, non, ajuster par 5, enregistrer, ça a l'air bien.

La façon dont cela fonctionne est de regarder chaque fois que vous enregistrez un fichier (au niveau du système d'exploitation), de traiter le fichier (c'est là que fonctionnent les extensions) et de pousser les données vers le navigateur via des websockets, qui sont ensuite gérées (côté client de l'extension).

Pas à brancher ou quoi que ce soit, mais j'ai lutté avec ce problème pendant longtemps.

J'espère que cela pourra aider.

Firebug fonctionne sur le CSS calculé (celui que vous obtenez en prenant le CSS dans les fichiers et en appliquant l'héritage, etc. plus les modifications apportées avec JavaScript). Cela signifie que vous ne pouvez probablement pas l'utiliser directement pour l'inclure dans un fichier HTML, qui est spécifique au navigateur / à la version (sauf si vous vous souciez uniquement de Firefox). D'un autre côté, il garde une trace de ce qui est original et de ce qui est calculé ... Je pense qu'il ne devrait pas être très difficile d'ajouter du JS à Firebug pour pouvoir exporter ce CSS vers un fichier texte.

Je me demandais pourquoi je ne pouvais pas vraiment bien sélectionner et copier le texte devant mes yeux. Surtout quand d'autres disent que vous pouvez simplement "sélectionner et copier". Il s'avère que vous pouvez , il vous suffit de démarrer le glissement à l' extérieur de tout texte (c'est-à-dire dans la gouttière au-dessus ou à gauche du texte) car tout curseur de souris - que ce soit un clic ou un glissement - sur n'importe quel texte appelle immédiatement la propriété éditeur. Vous pouvez également cliquer à l'extérieur du texte pour obtenir un curseur (même s'il n'est pas toujours visible) que vous pouvez ensuite déplacer avec les touches fléchées et sélectionner le texte de cette façon.
Le texte copié dans le presse-papiers est malheureusement dépourvu de retrait, mais au moins cela vous évite de transcrire manuellement tout le contenu du fichier CSS. Demandez simplement à votre programme de comparaison d'ignorer les changements dans les espaces lors de la comparaison avec l'original.

Vous pouvez écrire votre propre fichier de script de serveur qui prend un paramètre de nom de fichier et un paramètre de contenu.

Le script serveur trouverait le fichier demandé et remplacerait son contenu par le nouveau.

Ecrire le Javascript qui puise dans les informations de Firebug et récupère les données utiles serait la partie délicate.

Personnellement, je préfère demander à l'équipe de développement de firebug de fournir une fonction, cela ne devrait pas être trop difficile pour eux.

Enfin, Ajax envoie la paire nom de fichier / contenu au fichier php que vous avez créé.

Extrait de la FAQ Firebug :

Édition de pages

• Puis-je enregistrer dans la source les modifications que j'ai apportées à la page Web que je vois?

  Pour le moment, vous ne pouvez pas. Comme l'a écrit John J. Barton sur le newsgroup:

  Modifier dans Firebug, c'est un peu comme retirer les cornichons et ajouter de la moutarde à un sandwich au restaurant: vous pouvez profiter du résultat, mais le prochain client du restaurant aura toujours des cornichons et pas de moutarde.

  C'est une fonctionnalité demandée depuis longtemps, donc un jour elle sera disponible directement depuis Firebug. Pendant ce temps, vous pouvez essayer Firediff , une extension pour firebug de Kevin Decker.

• Comment puis-je afficher toutes les modifications apportées au CSS d'un site dans Firebug?

  C'est une fonctionnalité implémentée dans Firediff de Kevin Decker .

Voici une solution partielle. Après avoir effectué vos modifications, cliquez sur l'un des liens vers le fichier correspondant. Il s'agit du fichier d'origine, vous devrez donc actualiser le fichier, qui se trouve sous le bouton du menu d'options en haut à droite du volet Firebug. Vous avez maintenant la page css modifiée, que vous pouvez copier et coller. Évidemment, vous devrez le faire pour chaque fichier css.

Edit: on dirait que Mark Biek a une version plus rapide

Un moyen très simple de "modifier" votre page est d'aller sur le site via votre navigateur Internet. Enregistrez la page au format html uniquement sur votre bureau. Allez sur votre bureau et faites un clic droit sur le nouveau fichier de page Web et sélectionnez Ouvrir avec, choisissez le bloc-notes et modifiez la page à partir de là, si vous connaissez le html, ce sera facile. Une fois toutes vos modifications terminées, enregistrez le fichier et rouvrez votre page Web, les modifications devraient être là si elles sont effectuées correctement. Vous pouvez ensuite utiliser votre nouvelle page modifiée et l'exporter ou la copier vers votre emplacement distant

En fait, Firebug est un outil de débogage et d'analyse: pas un éditeur et évidemment pas considéré comme un. L'autre raison a déjà été évoquée: comment voulez-vous changer le CSS, stocké sur un serveur lors du débogage d'une page Web?