How do you inspect the web inspector in Chrome?

Question

According to Google this can be accomplished by visiting "chrome-devtools://devtools/devtools.html" in Chrome but now visiting that page in the stable version of Chrome (or Canary), just shows a 99% stripped version of the inspector.

To reiterate my "title" this is in reference to "inspecting" the inspector. Not just inspecting a normal webpage.

And while I don't think it's necessary to know to resolve the issue, I"m inspecting the inspector so I can style it as discussed by Paul Irish and here: https://darcyclarke.me/articles/development/skin-your-chrome-inspector/

Overkill

A lot of that in a Google I/O 2012 session titled Chrome Developer Tools Evolution. – Deakin

Great if you know the answer from there then please do post. chrome-devtools://devtools/devtools.html use to show the buttons and everything but as of sometime this year now it does not. – Overkill

sumtips.com/2011/08/custom-styles-chrome-web-inspector.html has some info too. – Deakin

That article just references the article I already posted though doesn't add any additional information on why it's not working anymore in the latest stable version of Chrome. – Overkill

@cchiera The image link is broken – Blasted

Answer 1

Follow these easy steps!

1. Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.

2. Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:

3. Press Command+Option+i again on this new window.

4. That will open the DevTools on the DevTools.

• You can redock the page's DevTools if you want.

1. If it's not already, select Elements — it's the first icon at the top of the inspector.

---

A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.

Ehlers

That just brings up console, doesn't seem to do anything in relation to being able to "inspect" the actual Google Chrome inspector so I can't style it like here: darcyclarke.me/design/skin-your-chrome-inspector – Overkill

I'm not sure why I got downvoted for this — it is the quick and simple answer and it solved his problem and was accepted as the answer. That being said, there are much better answers here especially @Mixologic and even Helder Roem – Ehlers

I found this solution while using a Windows machine. I tend to use [F12] to open my inspector console. Had I not already known the other hotkey ([Ctrl]+[Shift]+[I]), this answer would not be useful to me. I added the Windows hotkeys to the answer for you. – Tinhorn

Pressing Ctrl+Shift+I opens and closes the inspector. It does not allow you to inspect the inspector. Helder Roem's answer better answers the question. – Polyclitus

@Swivelgames Yes, I noted that above in my comment. By the way Helder Roem's answer accomplishes the exact same thing as I described in my answer — that method just uses links instead of the shortcut keys. Thanks for your input - since my answer was accepted I'll try to reword it so that it is more clear. – Ehlers

You may have to click and hold on the icon in the lower left of the inspector, to undock it from the browser. – Platinotype

Just a tip for those not able to open the second inspector; I had a running application capturing the Ctrl + Shift + I combination so the second inspector would never come up (and there's no context-menu in dev-tools to open another inspector) until I close it. – Cooley

Solution works fine for me. Additionally, can you activate extensions like react in the second inspector? – Oogenesis

Answer 2

1. Open chrome://inspect
2. Open the inspector on that page (cmd + alt + i)
3. Scroll to the bottom of the page, under the Other section click the inspect link

The URL in the Other section should look something like this: chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…

EDIT: they've fancied up the chrome:inspect page so you have to click the Other header on the left to get this to work now.

Wight

This allowed me to inspect the inspector. I opened the inspector on a certain page, and then navigated down to the bottom of chrome://inspect and was able to inspect the inspector. Thanks for the answer, @Helder! Very helpful answer. – Polyclitus

Probably the best, easiest and "likely to not change over time" answer! – Ambuscade

This is definitely the "correct" way. As a plus, the chrome inspect page lets you inspect many other things as well, including Apps and Extensions! – Steel

Answer 3

I just got this to work. The key is that you have to start up chrome in 'Remote Debugging' mode.

on OSX, open an terminal window and execute the following:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

On windows, Its

chrome.exe --remote-debugging-port=9222

(better windows instructions can be found here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)

This will start up an instance of chrome, that will send debugging messages to a local webserver on port 9222.

If you access that web service, it will give you the ability to use the inspector to inspect any chrome window that is running. Since we want to inspect the inspector, we need to start an inspector window first (As above Use the shortcut keys; for Mac it's Command+option+i.)

Now, go ahead and navigate to

http://localhost:9222

It will present you with a list of windows to display in the debugger. Select the window that starts with "Developer Tools" and you'll be able to inspect the css for the inspector.

Its hard to see in the image below, but on the left I have my chrome window pointing at the remote debugger, highlighting one of the toolbar labels. On the right you see it lit up with the tooltip just as if we were debugging a web page.

Palatinate

Wow, how did you know about --remote-debugging-port? – Pathoneurosis

Answer 4

A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.

Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..

Edit II: I'm not quite sure why you can't inspect. JDavis's answer is consistent with the Google Docs for Apple computers. If you're using Linux it appears to be the same as Windows. You supposed to hit the inspector key combination while the focus is over the inspector window.

Hardware

Nope, whether it's docked or not, I'm still unable to inspect all the inspector: Screenshot: cl.ly/JFzc. Doesn't show any of the inspecter buttons or anything as it use to according to several older YouTube videos and screenshots. – Overkill

I just noticed that too...I've been able to inspect it using the context menu but now I'm not seeing the option. But I can still reach it with the keyboard shortcuts. – Hardware

I have no confusion on how to undock the inspector. Did you see my screenshot in my comment that showed it undocked? The issue is still the same. It should work like this: youtube.com/watch?v=J7F7eYjp_hg – Overkill

I've seen your screenshot and briefly viewed the referenced video. I must make note that the video was uploaded in December 2010. I don't see the inspect element button shown in the video in the inspector. – Hardware

(actually, I believe that's just the action you're supposed to take... but like I said, it's not showing up in the context menu, so... it seems like you can only get to it using keyboard shortcuts.) – Hardware

It was also working according to darcyclarke.me/design/skin-your-chrome-inspector in 2012 as well but some time recently the ability to view chrome-devtools://devtools/devtools.html and have all the icons and functionality present disappeared. – Overkill