How to inspect Chrome DevTools with Chrome DevTools

Chrome DevTools can be used for inspecting websites in Chromium-based browsers. As the Chrome DevTools UI is written in HTML, JS/TS, and CSS, you can use Chrome DevTools to inspect Chrome DevTools.

There are two relatively straightforward, but non-obvious ways to open DevTools within DevTools:

1. When you right-click on a website, the system context menu includes an Inspect option at the end. However, this option is hidden from the DevTools context menu. If you use an extension that extends DevTools by adding a panel, the Inspect option will be present in the context menu when you right-click within the panel.
2. A much simpler option is to undock the DevTools panel from the side of the window into its own window. Then, you can use the default shortcut (Ctrl+Shift+I on Windows/Linux, Option+Cmd+I on macOS) to open a new DevTools window to inspect the current DevTools window. This approach and more details are described in the Chromium docs.

Tip: If you are on macOS and want to change the default shortcut for DevTools, go to Settings > Keyboard > Keyboard Shortcuts > App Shortcuts > click the plus button > select All Applications > enter "Developer Tools" as the Menu title, and set the keyboard shortcut, for example to Cmd+Shift+I.