Menu
I've been editing CSS using Firebug in Firefox, but recently noticed that Chrome is rendering my pages much quicker (with scrolling, interactive elements etc) and wanted to switch to it.
I found Chrome shows the computed CSS and what attributes are overruled in the stack and I can alter them one-by-one but what I liked about Firebug was that I could just edit the entire stylesheet in a real-time text editor. Is this same feature somewhere in the Chrome developer panel, or is there a Chrome extension that lets me alter the stylesheets this way?
752
Just do a right click on the element you want to see and select Inspect Element... Show activity on this post. Using firebug, right click and select inspect element. Using Web Developer toolbar, click on CSS, then click Edit CSS from the dropdown menu.
There is a Firebug-like tool already built into Chrome. Just right click anywhere on a page and choose "Inspect element" from the menu. Chrome has a graphical tool for debugging (like in Firebug), so you can debug JavaScript.
To view user-agent styles (i.e., browser-default CSS rules), enable “Inspector > Show Browser Styles” under the developer tool settings panel.
FIrebug was a chrome extension that was used before but now it is not supported and if you still want to use it then probably you will have to downgrade the chrome version. Firebug is discontinued open-source web browser extension. It was used to inspect element. There is another version i.e. Firebug Lite.
In current versions of Chrome (I'm running 16) you don't need any external add-ons. Right click anywhere in your page, choose inspect element, then in the window that shows up click the Resources tab, then in the left panel select the stylesheet you want to edit. To begin editing you need to first double click, over the css text.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
