Developer tool similar to Firefox's Style Editor for Chrome

3.7k views Asked by At

Does chrome have a debugging / editing mode were you can amend the css style sheet in the same way that you can in Firefox by going to Tools > Developer Tools > Style Editor.

This isn't the same as the styles tab in the left hand side of the developer tools in chrome, which although it allows you to select an element and see all of the css styles applied to it and edit / add new ones. It's not the same as the FF style editor as that allows you to directly type anywhere in the stylesheet.

3

There are 3 answers

0
MrBrightside On

If I got it right, in Chrome there is: More tools>Developer tools>In the "Elements" section on the right split screen tab, there is a "Styles" tab. Is that what you're looking for? Although FF is a better browser for developers than Chrome cause it gives you more tools to work with.

2
sam On

I eventually found it, if you go to developer tools then Sources you can browse all the linked files of the page you are on and live edit them

1
Kevin Fisher On

So I found that in order to bring up the style editor in chrome I had to go into "Customize and control dev tools" (the three dots in the top right of the 'inspect element" panel) and then "Settings" then scroll down and hit "restore defaults and reload". Then you get back the sources panel that contains your included stylesheets.

And yes Firefox has a much slicker interface and has a much better "feel" and is what I use for all my css adjustments (In fact Chris' old Dev tools was much better before it got integrated, but don't get me started)