How do you inspect the web inspector in Chrome?

cchiera picture cchiera · Sep 6, 2012 · Viewed 35.8k times · Source

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/

Answer

JDavis picture JDavis · Sep 6, 2012

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: Undock from 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.