15

First, I know this question exists, but it's not what I'm getting at. I want to know if there is some view in Developer Tools that lets you see all styles added "via inspector." For example, I can select the span.count element and see this is something I added.

But I've added lots of stuff via inspector. Right now I have to click on each element to see if it's one of the elements that I added a style for.

Anyone seen an SO post for this already or know the answer? Thanks.

Community
  • 1
  • 1
cdmo
  • 1,239
  • 2
  • 14
  • 31

2 Answers2

12

Since at least Chrome 22, you can open the "inspector-stylesheet" source in the Sources panel. It contains all the rules you have added manually.

Alexander Pavlov
  • 31,598
  • 5
  • 67
  • 93
  • Yup and it's there for Chrome 21 too: http://screencast.com/t/iglPzUkrsycR I just did an update over Chrome 20, so I can't say whether or not it was in that version. I know that it didn't have this text link in the Elements panel: http://screencast.com/t/jVy3YqUQ Thanks! And thank you Google Chrome for adding this feature! – cdmo Aug 02 '12 at 18:14
  • You are welcome :) Feel free to file DevTools feature requests at http://new.crbug.com (start your summary with the string "DevTools: " for better triaging). – Alexander Pavlov Aug 03 '12 at 09:23
  • 1
    This seems to now have disappeared with Chrome 23. Can anyone confirm or deny that? – Luke H Nov 14 '12 at 14:47
  • 1
    Still present in Chrome 24... If you have several frames in the page, you should look for the resource in the folder corresponding to the frame containing your focused element. – Alexander Pavlov Nov 14 '12 at 16:17
  • 3
    This definitely seems to be missing in Chrome 25, not visible either in Resources, Sources, nor via the "local modifications" menuitem. Found [this](https://code.google.com/p/chromium/issues/detail?id=160974&q=inspector%20stylesheet&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified) on chrome bugtracker and will track through there. – Luke H Apr 16 '13 at 06:01
  • Chrome 40 has it, it's possible you were looking for the "+" button in Elements > Styles (on the top right) – northamerican Jan 23 '15 at 16:16
10

If anyone is coming across this question and still having trouble with newer versions of chrome this worked for me: Add a style in the elements panel on an element, then in the elements panel within the css rules, click on the inspector-stylesheet link. This will open the inspector stylesheet in the sources panel. You can leave it open there and add to it as needed.

Koert van Kleef
  • 772
  • 9
  • 17
Dan Hedgecock
  • 1,213
  • 11
  • 15
  • 3
    I do this so often, I wish I could just go to sources and launch a new inspector stylesheet without having to go to the elements tab. If anyone knows how to do this, please share! – stacey.mosier Mar 29 '17 at 15:21