Fastest way to add a new blank stylesheet in Chrome's inspector developer tool ("Inspector stylesheet")

Question

Usually, when I want to test CSS modifications, live, in Chrome, I use:

• Right click > Inspect

• Use the bottom right pannel, and use the + button to add a new class, and then edit it there.

  

But I've noticed there's even a handier way: open an "Inspector stylesheet" that opens a blank CSS document, that can be edited, and modifications are displayed live:

Question: what's the easiest/fastest way to open such an "Inspector stylesheet" in Google Chrome?

(by fastest, I mean faster than Right click, Inspect, + add a new class, click on the little inspector stylesheet link, etc.)

I cannot find it in a menu of Chrome's console/developer tools. Is there a keyboard shortcut that would open such an "Inspector stylesheet"?

Answer 1

I don't have one easy shortcut, but I can get you there a tiny bit faster:

1. F12 to open DevTools.
2. button at top of Styles-panel on Elements tab, to create inspector-stylesheet.
3. Doubleclick to open.

---

Once inspector-stylesheet is created, and I close it or close DevTools, how to find it again?

• If you've closed DevTools when the inspector-stylesheet was still open, just go to the Sources tab directly (in DevTools, topbar) and the inspector-stylesheet should still be open.
• If you've closed the inspector-stylesheet itself, then, while on the Sources tab, press Ctrl+P and type "inspector-stylesheet", usually after "in..." you will already see the inspector-stylesheet at the top of the suggestion-list of available files.
  And it should also still be visible at the top of the Styles-panel on the Elements tab, where you first created it.