Comment puis-je modifier CSS dans Chrome comme dans Firebug pour Firefox?

Question

J'avais modifié CSS à l'aide de Firebug dans Firefox, mais j'ai récemment remarqué que Chrome rendait mes pages beaucoup plus rapidement (avec le défilement, les éléments interactifs, etc.) et je voulais y accéder.

J'ai trouvé que Chrome montrait le CSS calculé et les attributs annulés dans la pile. Je pouvais les modifier un par un, mais ce qui me plaisait dans Firebug, c'était que je pouvais éditer la feuille de style entière dans un éditeur de texte en temps réel. Cette fonctionnalité est-elle identique quelque part dans le panneau de développement de Chrome ou existe-t-il une extension Chrome qui me permet de modifier les feuilles de style de cette manière?

NARKOZ · Accepted Answer

Essayez StyleBot . Il peut également enregistrer les CSS modifiées.

pax · Answer

Dans les versions actuelles de Chrome (version 16), vous n'avez besoin d'aucun module complémentaire externe. Cliquez avec le bouton droit n'importe où sur votre page, choisissez inspectez l'élément , puis dans la fenêtre qui s'affiche, cliquez sur l'onglet Ressources , puis dans le panneau de gauche, sélectionnez la feuille de style que vous souhaitez modifier. Pour commencer l’édition, vous devez d’abord double-cliquer sur le texte css.

Jose Browne · Answer

J'utilise live.js! Lorsque vous modifiez votre fichier css, il affiche les résultats en temps réel dans votre navigateur sans avoir à actualiser. http://livejs.com/

J'ai passé d'innombrables heures à tester presque toutes les extensions Chome que j'ai pu trouver (y compris stylebot) pour imiter l'édition CSS en direct de Firebug dans Firefox. Aucun à ce jour n'a le même flux de travail. Live.js est le plus proche.

loislo · Answer

Vous pouvez modifier n'importe quelle propriété ou créer une nouvelle propriété en double-cliquant sur une entrée ou sur un espace vide dans le volet de styles du panneau Éléments. Il n’existe aucun moyen de modifier un fichier css complet sous forme de texte pour le moment.