Directly Open The Inspector Stylesheet in Chrome

By Dave Ceddia

So you’ve added some styles to your page with Chrome’s dev tools. Awesome.

But when you click away from the element you’ve styled, the styles disappear from the sidebar! What if you were styling something that changes state, or left the DOM temporarily? How can you add on to those existing styles?

Turns out that styles you add in the Elements tab are automatically added to the inspector-stylesheet, and there are a couple ways to bring it up.

This method works great if you can see the style in the Elements sidebar.

Click the gray inspector-stylesheet link next to the style that you’ve added.

Pointing out the inspector-stylesheet link in the sidebar

You can also create a new style (click the +) just for the sole purpose of getting the inspector-stylesheet link to appear, and then click the link.

In fact, this was the main way I got to the inspector stylesheet until I got fed up with that and decided to figure out where it is for real.

Inspector Stylesheet is in the Sources tab

The true home of the stylesheet is under the Sources tab. Open that up:

Pointing out the location of the Sources tab

From here, look for the current page’s domain name in the list on the left.

If you’re doing local development, this will probably be localhost.

When I do this for my published site, I see the site’s domain twice. The first one is the original content that came from the server, and the second contains the inspector-stylesheet. You might have to hunt around a bit.

Where to find the inspector-stylesheet file

I’m guessing that if you added styles inside an iframe, the inspector-stylesheet would be under that iframe’s domain. I haven’t verified this though.

Have fun inspecting styles!

Learning React can be a struggle — so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, check out my Pure React workshop.

Pure React plant

Learn to think in React

  • 90+ screencast lessons
  • Full transcripts and closed captions
  • All the code from the lessons
  • Developer interviews
Start learning Pure React now

Dave Ceddia’s Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all front end devs wanting to upskill or consolidate.

Alan Lavender
Alan Lavender