Pourquoi ne puis-je pas enregistrer les modifications CSS dans Firebug?
Firebug est l'outil le plus pratique que j'ai trouvé pour l'édition de CSS. Pourquoi n'y a-t-il pas une simple option "enregistrer" pour CSS?
Je me trouve toujours en train de faire des réglages dans Firebug, puis de revenir à mon fichier .css original et de les répliquer.
Quelqu'un a-t-il proposé une meilleure solution?
MODIFIER: Je suis conscient 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 que Firefox a téléchargé du serveur, il sait exactement quelles lignes dans quels fichiers il édite. Je ne vois pas pourquoi il n’existe pas d’option "exportation" ou "sauvegarde", qui vous permet de stocker le nouveau fichier .css. (Ce que je pourrais alors remplacer le distant avec).
J'ai essayé de chercher dans des emplacements temporaires et de choisir Fichier > Enregistrer ... et d’expérimenter 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.
Je suis arrivé ici à la recherche précise de cette fonctionnalité, c'est-à-dire la possibilité de sauvegarder les propriétés modifiées CSS 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 y a CSS Updater 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 cet article qui montre une bonne façon de le faire fonctionner (intégré à Chrome - aucune extension supplémentaire n'est nécessaire):
Change CSS et SAVE sur le système de fichiers local en utilisant Chrome Outils de développement)
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 ceci et bien plus encore: Google I/O 2011: Chrome Outils de développement rechargés
J'espère que cela vous aidera si vous ne changez pas de navigateur lors de l'édition 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: Firefox CSS live edit dans Sublimetext (travaux en cours) Cela semble prometteur.
[Mise à jour 2]
Si vous utilisez Visual Studio 201 avec Web Essentials , vous pourrez synchroniser CSS automatiquement, comme indiqué dans cette vidéo:
Je me demandais la même chose depuis assez longtemps,
est juste déchirant lorsque votre css-in-the-freestyle-css 'avec firebug est réduit en miettes par
Un rechargement accidentel ou autre chose ....
Pour ce qui est de mes intentions, j'ai enfin trouvé l'outil ....: FireDiff.
Il vous donne un nouvel onglet, probablement une référence bizarre de David Bowie, appelée "modifications"; ce qui vous permet non seulement de voir/sauvegarder ce que firebug, i. e. vous avez fait,
mais aussi éventuellement suivre les modifications apportées par la page elle-même .... si elle et/ou vous le souhaitez.
Si reconnaissant de ne pas avoir à taper à nouveau, ou à re-imaginer puis à retaper à nouveau, chaque css règle je fais ...
Here est un lien vers le développeur (ne vous découragez pas pour la première fois, mais vous pouvez aussi aller directement vers le référentiel de Mozilla Add-On .
Le module de développement Web vous permet de sauvegarder vos modifications. J'aimerais combiner l'édition de Firebug avec la fonctionnalité Enregistrer de Web Developer.
Utilisez le bouton " Enregistrer " (cliquez sur le menu CSS -> Modifier le CSS) pour enregistrer le fichier CSS modifié sur le disque.
Recommandation : utilisez le bouton " Stick " pour éviter de perdre vos modifications lorsque vous modifiez l'onglet pour faire une autre navigation. Si possible, utilisez un seul onglet pour éditer et, dans une autre fenêtre firefox, les recherches, webmail, etc.
Je viens de publier un addon firebug sur le sandbox de l'addon Mozilla, qui pourrait bien faire ce que vous voulez: https://addons.mozilla.org/fr/firefox/addon/52365 /
En fait, il enregistre les fichiers CSS "modifiés" à la demande sur votre serveur Web (par communication avec un script php Webservice à fichier unique).
La documentation se trouve sur ma page d'accueil ou sur la page du complément
J'apprécierais tous les tests, rapports de bugs, commentaires, notes, discussions à ce sujet, car il en est encore à la version bêta, mais devrait déjà fonctionner correctement.
CSS-X-Fire
Je suis surpris qu'il ne soit toujours pas répertorié à 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’IDE de la série JetBrains: IntelliJ IDEA , PHPWebStorm, PyCharm, WebStorm, RubyMine .
Fonctionnement: 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.
Après cela, 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. Si le plugin ne parvient pas à installer, 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 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é.
Vous pouvez lier firebug à Eclipse avec fireclipse , puis enregistrer le fichier à partir d'Eclipse.
Je pense que le plus proche que vous obtiendrez est d'aller en mode Édition 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 de sauvegarder les modifications CSS apportées dans 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-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 de développement" du clone Firebug d’Internet Explorer 8 (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 sauvegardé.
Pas particulièrement utile si vous utilisez Firebug pour manipuler CSS comme tout le monde, mais un pas dans la bonne direction.
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:
travail 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 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.
Travailler sur un site web fonctionnant sur votre machine locale
Dans ce cas, vous pouvez indiquer à Firebug l'emplacement du dossier local du site Web et utiliser le même comportement 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.
travail sur un site Web hébergé à distance sans accès FTP
Dans ce cas, quelque chose comme l'add-on FireFile devrait être implémenté.
Une fonctionnalité supplémentaire serait la possibilité de sauvegarder et d’ouvrir les 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 gentiment posté dans ce fil. Je suppose que je suis un peu en retard;)
CSS-X-Fire émet les changements de propriétés CSS de Firebug au IDE) où les changements peuvent être appliqués ou ignorés.
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 original).
Scénario 1: vous avez un site Web (projet) qui contient une poignée de thèmes parmi lesquels l'utilisateur peut faire son choix. Chaque thème a son propre fichier CSS, mais Firebug, l'actuel, en connaît un seul. CSS-X-Fire détecte tous les sélecteurs correspondants dans le projet et vous laisse choisir ceux qui doivent être modifiés.
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.
Vous trouverez ci-dessus 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 permet également de rechercher les doublons non connus de Firebug, de code de saut, 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 qu'un problème ne soit pas 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://thelistoflist.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 au serveur.
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 code de code source a un exemple d'implémentation de serveur .NET fonctionnel facilement transférable à d'autres plates-formes.
Depuis Firebug ne fonctionne pas sur votre serveur, mais en prenant le CSS du site et le stocker localement et en vous montrant le site avec ces modifications locales.
J'ai toujours eu ce problème pour toujours, et j'ai finalement décidé de ne pas éditer d'éléments dans l'inspecteur Web et de construire 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 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. Donc, même si vous pouviez copier/coller le CSS généré à partir de l'inspecteur Web, il devrait générer un id pour cibler le css. Quelque chose comme:
#element-127 {
background: red;
}
Cela commencerait à faire de votre css un gâchis.
Vous pouvez contourner cela en ne modifiant que les styles d'un sélecteur existant (le sélecteur de classe .space Dans l'image de l'inspecteur Webkit ci-dessous).
Cependant, le deuxième problème. L'interface avec cette chose est assez rugueuse, il est difficile de faire de gros changements - comme si vous voulez essayer de copier très rapidement ce bloc de CSS à cet endroit, ou peu importe.
Je préfère simplement 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 changements 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 niveau suivant consisterait à écrire dans un langage CSS dynamique, tel que Stylus, Less, SCSS, etc., et à 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ésument bien les complexités, ce que l'inspecteur Web ne pouvait absolument pas faire.
Il y a quelques petites choses qui font ça, mais rien ne simplifie vraiment cela à 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 actualise le navigateur à chaque fois que vous enregistrez.
Ne pas avoir la possibilité de personnaliser facilement la façon dont ceux-ci fonctionnent est la principale raison pour laquelle je ne les ai pas utilisés.
Je mets ensemble https://github.com/viatropos/design.io spécifiquement pour résoudre ce problème, et le rendre ainsi:
- Le navigateur reflète les fichiers css/js/html/etc chaque fois que vous enregistrez, sans recharger la page
- Il peut gérer n’importe quel modèle/langage/framework (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
- Il est écrit en JavaScript et vous pouvez combiner 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 d'arrière-plan, appuyer sur Enregistrer, voir Non, pas tout à fait, ajuster la teinte par 10, enregistrer, non, ajuster par 5, enregistrer, et ainsi paraître.
Cela fonctionne en regardant chaque fois que vous enregistrez un fichier (au niveau du système d'exploitation), en le traitant (c'est là que les extensions fonctionnent) et en transmettant les données au navigateur par le biais de websockets, qui sont ensuite traitées (le côté client de l'extension).
Pas pour brancher ou quoi que ce soit, mais j'ai longtemps lutté contre cette question.
J'espère que ça t'as aidé.
Utilisez l'éditeur CSS dans la barre d'outils Firefox Web Developer:
http://chrispederick.com/work/web-developer/
Il contient suffisamment de choses à utiliser avec Firebug et vous permet de sauvegarder votre CSS dans un fichier texte.
Je me demandais pourquoi je ne pouvais pas trop bien sélectionner 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 glisser à l'extérieur de tout texte (c'est-à-dire dans la gouttière au-dessus ou vers reste du texte) comme n'importe quel mousedown - que ce soit un clic ou un 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 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 d’indentation, mais au moins, il vous évite de transcrire manuellement tout le contenu du fichier CSS. Demandez à votre programme diff d’ignorer les changements d’espace 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.
Écrire le code Javascript qui exploite les informations de firebug et récupère 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éé.
Cité de la FAQ de Firebug :
Modification de pages
Puis-je enregistrer dans la source les modifications apportées à la page Web que je vois?
En ce moment vous ne pouvez pas. Comme John J. Barton l'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 profiter du résultat, mais le prochain client du restaurant aura toujours des cornichons et pas de moutarde.
Cette fonctionnalité est demandée depuis longtemps, elle sera donc un jour disponible directement à partir de Firebug. En attendant, vous pouvez essayer Firediff , une extension pour Firebug de Kevin Decker.
Comment puis-je afficher toutes les modifications apportées au code CSS d'un site dans firebug?
C'est une fonctionnalité implémentée dans Firediff de Kevin Decker.
Firebug fonctionne sur le calculé CSS (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). D'autre part, 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.
Un moyen très facile de "modifier" votre page consiste à 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.
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 et coller. Évidemment, vous devrez le faire pour chaque fichier css.
Edit: ressemble à Mark Biek a une version plus rapide