Pourquoi ne puis-je pas enregistrer les modifications CSS dans Firebug? [fermé]

Question

Firebug est l’outil le plus pratique que j’ai trouvé pour éditer le CSS - pourquoi n’y at-il pas là un simple " save " option pour CSS?

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

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

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

Firebug utilise juste le fichier .css téléchargé de Firefox, il sait exactement quelles lignes dans quels fichiers il édite. Je ne vois pas pourquoi il n’existait pas de " export " ou "sauvegarder" Cette option vous permet de stocker le nouveau fichier .css. (Je pourrais alors remplacer la télécommande par).

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

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

Answer 1

Je suis arrivé ici à la recherche de cette fonctionnalité, c'est-à-dire la possibilité de sauvegarder les propriétés CSS modifiées dans le fichier d'origine (sur ma machine de développement locale). Malheureusement, après avoir cherché beaucoup et ne rien trouvé qui réponde à mes besoins (OK, il existe Programme de mise à jour CSS mais vous devez vous 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 billet génial qui montre une bonne façon de le faire fonctionner (intégré à Chrome - aucune extension supplémentaire n'est nécessaire):

Modifier les CSS et SAVE sur un 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 soulignant les lignes modifiées. Cliquez simplement sur Enregistrer et vous avez terminé! :)

Voici une vidéo expliquant cela et bien d’autres choses encore: Google I / O 2011: outils de développement Chrome rechargés

J'espère que cela vous aidera si vous ne changez pas de navigateur lors de la modification de vos fichiers CSS. J'ai déjà effectué le changement pour l'instant, mais j'aimerais vraiment que cette fonctionnalité soit intégrée à Firebug. :)

[Mise à jour 1]

Aujourd'hui, je viens de voir cette vidéo: Modification en direct de Firefox CSS dans Sublimetext (travaux en cours) Semble prometteur.

[Mise à jour 2]

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

Web Essentials: Intégration des outils de navigateur

Answer 2

Je me demandais la même chose depuis assez longtemps,
juste déchirer quand votre-dans-le-moment-freestyle-css'ing avec firebug est détruit par des bits par
une recharge accidentelle ou autre chose ....

À des fins pratiques, j'ai enfin trouvé l'outil ....: FireDiff .

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

Je suis donc reconnaissant de ne pas devoir ressaisir, ou re-imaginer, puis ressaisir, toutes les règles css que je fais ...

Voici un lien vers le développeur (ne vous laissez pas abattre par la première comparution, mais seulement Consultez également le référentiel des modules complémentaires de Mozilla .

Answer 3

Le module complémentaire pour développeur Web vous permet de sauvegarder vos modifications. . J'aimerais combiner l'édition de Firebug avec la fonctionnalité Enregistrer de Web Developer.

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

Recommandation : utilisez le " bâton ". bouton pour éviter de perdre vos modifications lorsque vous modifiez l'onglet pour une autre navigation. Si cela est possible, utilisez un seul onglet pour éditer et, dans une autre fenêtre firefox, les recherches, webmail, etc. associés.

Answer 4

CSS-X-Fire

Je suis surpris qu'il ne soit toujours pas mentionné à cette question, mais probablement parce que c'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’EDI 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 les protocoles FTP et SCP). Cela vous permettra de rester synchronisé avec le serveur.

Ensuite, vous installez ce plugin. Quand il commencera, il vous demandera d’installer un plugin pour firefox afin de réaliser l’intégration entre Firebug et l’EDI. S'il ne parvient pas à installer le plug-in, 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 en un simple clic dans IDE.

FireFile

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

Answer 5

Je viens de publier un module d'extension Firebug dans le bac à sable du module complémentaire Mozilla, qui pourrait bien faire ce que vous voulez: https://addons.mozilla.org/en/firefox/addon/52365/

En fait, enregistre le "contacté". Cssez des fichiers à la demande sur votre serveur Web (par communication avec un script php Webservice à fichier unique).

La

documentation est disponible sur ma page d'accueil ou sur la page de l'addon

.

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

Answer 6

Vous pouvez lier firebug à eclipse avec fireclipse , puis enregistrez le fichier à partir d'éclipse

Answer 7

Je pense que le mieux que vous puissiez obtenir est d'aller en mode édition dans Firebug, puis de copier et coller le contenu du fichier CSS.

Answer 8

Nous venons de lancer Backfire, un moteur JavaScript open source qui vous permet de sauvegarder les modifications CSS apportées à Firebug et à l'inspecteur Webkit sur le serveur. La bibliothèque inclut un exemple d'implémentation C # expliquant comment 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-firebug /

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

Answer 9

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

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

Answer 10

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

Voici les scénarios:

Utilisation d'un site Web hébergé sur un ordinateur distant

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

Travail sur un site Web exécuté sur votre ordinateur local

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

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

Dans ce cas, quelque chose comme l'extension FireFile devrait être implémenté.

Une autre fonctionnalité serait la possibilité d’enregistrer et d’ouvrir des fichiers de projet contenant les correspondances 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.

Answer 11

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

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

Cette solution présente plusieurs avantages 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 de NickFitz dans le message d'origine).

Scénario 1: vous avez un site Web (projet) qui contient une poignée de thèmes parmi lesquels l'utilisateur peut choisir. Chaque thème a son propre fichier CSS, mais Firebug, l'actuel, en connaît un seul. CSS-X-Fire détectera tous les sélecteurs correspondants dans le projet et vous laissera choisir ceux à modifier.

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

Ci-dessus sont des exemples de scénarios dans lesquels CSS-X-Fire excelle. Comme il fonctionne avec les fichiers source et qu'il connaît la structure du langage, il aide également à rechercher les doublons non connus de Firebug, de codes de sauts, etc.>

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

Answer 12

FireFile

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

FireFile fournit les fonctionnalités souhaitées en ajoutant un petit fichier PHP côté serveur.

Answer 13

Étant donné que Firebug ne fonctionne pas sur votre serveur, vous devez extraire le fichier CSS du site, le stocker localement et vous montrer le site contenant ces modifications locales.

Answer 14

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

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

Il contient suffisamment de choses utiles à utiliser avec Firebug et vous permet de sauvegarder votre code CSS dans un fichier texte.

Answer 15

Utilisez Backfire.

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

Il s’agit d’une solution open source qui renvoie les modifications CSS au serveur et les enregistre.

Backfire utilise un seul fichier javascript, et le package code source contient un exemple d'implémentation de serveur .NET fonctionnel, facilement transférable à d'autres plates-formes.

Answer 16

J’ai eu ce problème aussi pour toujours, et j’ai finalement décidé de ne pas éditer d’objets dans l’inspecteur Web et avons créé 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 cliquez sur Enregistrer dans votre éditeur de texte .

La principale raison pour laquelle nous modifions les CSS dans l'inspecteur Web (j'utilise webkit, mais FireBug va dans le même sens) est parce que nous devons faire de petits ajustements et qu'il faut trop de temps pour recharger la page.

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

#element-127 {
  background: red;
}

Cela commencerait à faire de votre css un gâchis.

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

Pourtant, le deuxième problème. L’interface avec cette chose est assez rugueuse, il est difficile d’apporter de grands changements - comme si vous vouliez essayer de copier très rapidement ce bloc de CSS à cet endroit, ou peu importe.

Je préférerais simplement m'en tenir à TextMate.

L’idéal serait d’écrire simplement le code CSS dans votre éditeur de texte et de laisser le navigateur rendre compte des modifications sans recharger la page . De cette façon, vous rédigeriez votre css final au fur et à mesure que vous apportez les petits changements.

Le prochain niveau consisterait à écrire dans un langage CSS dynamique, tel que Stylus, Less, SCSS, etc., et à le mettre à jour avec le CSS généré. De cette façon, vous pouvez commencer à créer des mixins tels que box-shadow () , qui résument les complexités, ce que l'inspecteur Web ne peut absolument pas faire.

Il y a quelques petites choses qui font ça, mais rien ne les simplifie vraiment à mon avis.

• LiveReload : pousse css au navigateur sans rafraîchissement lorsque vous appuyez sur Enregistrer, mais c'est une application Mac , il serait donc 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 le fonctionnement de ces derniers est la principale raison pour laquelle je ne les ai pas utilisées.

J'ai créé https://github.com/viatropos/design.io plus précisément pour résoudre ce problème et le rendre ainsi:

1. Le navigateur affiche les fichiers 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 assembler des extensions très rapidement en JavaScript.

De cette façon, lorsque vous devez apporter ces petites modifications à CSS, vous pouvez définir la couleur de fond, appuyer sur Enregistrer, voir Non, pas tout à fait, régler la teinte de 10, enregistrer, non, ajuster de 5, enregistrer, semble bon.

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

Ne pas brancher ou quoi que ce soit, mais j'ai longtemps lutté contre ce problème.

L’espoir que cela aide.

Answer 17

Firebug fonctionne sur le CSS calculé (celui obtenu 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 pourriez 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). Par contre, 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 dans un fichier texte.

Answer 18

Je me demandais pourquoi je ne pouvais pas bien choisir et copier le texte sous 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 commencer le glissement à l'extérieur de tout texte (c'est-à-dire dans la gouttière située au-dessus ou à gauche du texte) comme tout mousedown, que ce soit c'est un clic ou glisser - sur n'importe quel texte appelle immédiatement l'éditeur de propriété. Vous pouvez également cliquer sur le texte extérieur pour obtenir un curseur (même s'il n'est pas toujours visible), que vous pourrez ensuite déplacer avec les touches de direction et sélectionner le texte de cette façon.
  Le texte copié dans le Presse-papiers ne contient malheureusement pas d'indentation, mais au moins, il vous évite de transcrire manuellement l'intégralité du contenu du fichier CSS. Demandez à votre programme diff d’ignorer les changements d’espace lors de la comparaison avec l’original.

Answer 19

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

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

Écrire le javascript qui exploite les informations de firebug et récupérer les données utiles serait la partie la plus délicate.

Personnellement, je préférerais 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éé.

Answer 20

Cité dans la FAQ sur Firebug :

  

Modification des pages

     

  

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

       

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

       

  Éditer dans Firebug, c'est un peu comme enlever les cornichons et ajouter de la moutarde à un sandwich au 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 donc disponible directement à partir de Firebug. En attendant, vous pouvez essayer Firediff , une extension de Firebug de Kevin Decker.

  

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

       

  Il s’agit d’une fonctionnalité intégrée à la Firediff de Kevin Decker.

  

Answer 21

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 original. Vous devrez donc actualiser le fichier, qui se trouve sous le bouton du menu options en haut à droite du volet firebug. Vous avez maintenant la page css modifiée, que vous pouvez copier avec & amp; coller. Évidemment, vous devrez le faire pour chaque fichier CSS.

Modifier: il ressemble à Mark Biek a une version plus rapide

Answer 22

Une méthode très simple pour " éditer " votre page doit 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 langage HTML, ce sera facile. Une fois toutes vos modifications terminées, enregistrez le fichier et rouvrez votre page Web. Les modifications doivent y figurer si elles sont effectuées correctement. Vous pouvez ensuite utiliser votre nouvelle page modifiée et l'exporter ou la copier sur votre site distant

.

Answer 23

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