Pourquoi ne puis-je pas enregistrer les modifications apportées aux CSS dans Firebug ?

Question

Firebug est l'outil le plus pratique que j'aie trouvé pour modifier les feuilles de style en cascade (CSS). Alors pourquoi n'y a-t-il pas une simple option "Enregistrer" pour les CSS ?

Je me retrouve toujours à faire des ajustements dans Firebug, puis à revenir à mon fichier .css d'origine et à reproduire ces ajustements.

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

EDIT : Je suis conscient que le code est stocké sur un serveur (dans la plupart des cas, pas le mien), mais je l'utilise pour construire mes propres sites web.

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

J'ai essayé de chercher dans des emplacements temporaires, et de choisir Fichier > Sauvez... et j'ai expérimenté les options de sortie sur Firefox, mais je n'ai toujours pas trouvé de solution.

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

Answer 1

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

Une meilleure solution :

Le navigateur reflète automatiquement les changements de CSS sans rechargement lorsque vous appuyez sur sauvegarder dans votre éditeur de texte .

La raison principale pour laquelle nous modifions les css dans l'inspecteur web (j'utilise webkit, mais FireBug est du même acabit) est que nous devons faire de petits ajustements, et que cela prend trop de temps pour recharger la page.

Cette approche présente deux problèmes principaux. Tout d'abord, vous êtes autorisé à modifier un élément individuel qui peut ne pas avoir d'attribut id sélecteur. Ainsi, même si vous étiez en mesure de copier/coller le CSS généré à partir de l'inspecteur Web, il faudrait qu'il génère un sélecteur id pour délimiter le css. Quelque chose comme :

#element-127 {
  background: red;
}

Cela commencerait à rendre votre css en désordre.

Vous pourriez contourner ce problème en ne modifiant que les styles d'un sélecteur existant (la fonction .space dans l'image de l'inspecteur webkit ci-dessous).

Mais quand même, le deuxième problème. L'interface de cette chose est plutôt rudimentaire, il est difficile de faire de gros changements - comme si vous vouliez essayer de copier rapidement ce bloc de css à cet endroit, ou autre.

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

L'idéal serait d'écrire le CSS dans votre éditeur de texte. et faire en sorte que le navigateur reflète les changements sans recharger la page. . De cette façon, vous écrirez votre css final au fur et à mesure que vous ferez les petits changements.

Le niveau suivant serait d'écrire dans un langage CSS dynamique, comme Stylus, Less, SCSS, etc., et de faire en sorte que le navigateur soit mis à jour avec le CSS généré. De cette façon, vous pourriez commencer à créer des mixins comme box-shadow() qui fait abstraction des complexités, ce que l'inspecteur Web ne pouvait absolument pas faire.

Il existe quelques outils qui permettent de le faire, mais rien ne le simplifie vraiment à mon avis.

• LiveReload : pousse les css vers le navigateur sans rafraîchissement lorsque vous appuyez sur enregistrer, mais c'est une application mac Il serait donc difficile de le personnaliser.
• CodeKit Il existe également une application pour Mac, mais elle rafraîchit le navigateur à chaque fois que vous enregistrez.

Le fait de 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 rassemblé https://github.com/viatropos/design.io spécifiquement pour résoudre ce problème, et le rendre tel :

1. Le navigateur reflète les 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.

Ainsi, lorsque vous devez apporter de petites modifications au CSS, vous pouvez dire : "Définir la couleur d'arrière-plan, cliquer sur "Enregistrer", voir "Non, pas tout à fait", ajuster la teinte de 10, enregistrer, "Non, ajuster de 5, enregistrer", tout va bien.

Le système fonctionne en observant chaque fois que vous enregistrez un fichier (au niveau du système d'exploitation), en traitant le fichier (c'est là que les extensions travaillent) et en envoyant les données au navigateur par le biais de websockets, qui sont ensuite traitées (côté client de l'extension).

Je ne veux pas faire de publicité, mais j'ai lutté contre ce problème pendant très longtemps.

J'espère que cela vous aidera.

Answer 2

Firebug fonctionne sur le calculé CSS (celui que vous obtenez en prenant le CSS dans les fichiers et en appliquant l'héritage, etc. plus les changements effectués avec JavaScript). Cela signifie que vous ne pouvez probablement pas l'utiliser directement pour l'inclure dans un fichier HTML, ce qui est spécifique au navigateur/à la version (à moins que vous ne vous intéressiez qu'à Firefox). D'un autre côté, il garde la 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 quelques JS à Firebug pour pouvoir exporter ce CSS vers un fichier texte.

Answer 3

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

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

L'écriture du Javascript qui exploite les informations de firebug et récupère les données utiles serait la partie la plus délicate.

Je préférerais personnellement demander à l'équipe de développement de firebug de fournir une fonction, cela ne devrait pas être trop difficile pour eux.

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

Answer 4

Je me demandais pourquoi je ne pouvais pas sélectionner et copier le texte que j'avais sous les yeux. Surtout quand d'autres disent que l'on peut simplement "sélectionner et copier". Il s'avère que vous peut vous n'avez qu'à commencer à traîner à l'extérieur de de n'importe quel texte (c'est-à-dire dans la gouttière au-dessus ou à gauche du texte), car toute descente de souris - qu'il s'agisse d'un clic ou d'un glisser - sur n'importe quel texte invoque immédiatement l'éditeur de propriétés. Vous pouvez également cliquer en dehors 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 du texte de cette façon.
Le texte copié dans le presse-papiers est malheureusement dépourvu de toute indentation, mais au moins cela vous évite de transcrire manuellement tout le contenu du fichier CSS. Il suffit que votre programme diff ignore les changements dans les espaces blancs lors de la comparaison avec l'original.

Answer 5

Citation tirée de la FAQ de Firebug :

Modifier les pages

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

  Pour l'instant, ce n'est pas le cas. Comme l'a écrit John J. Barton sur le newsgroup :

  L'édition dans Firebug, c'est un peu comme enlever les cornichons et ajouter de la moutarde dans un sandwich de restaurant : vous pouvez apprécier le résultat, mais le prochain client du restaurant aura toujours des cornichons et pas de moutarde.

  Il s'agit d'une fonctionnalité demandée depuis longtemps. Un jour, elle sera disponible directement à partir de Firebug. En attendant, vous pouvez essayer Firediff , une extension pour firebug par Kevin Decker.

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

  Il s'agit d'une fonctionnalité mise en œuvre dans le projet de Kevin Decker. Firediff .