Did you know the user interface of Devtools is built with HTML, CSS, and JavaScript?

This means you can inspect and Debug Devtools with DevTools.

Let’s find out how!

Chrome

To debug DevTools in Chromium-based browsers, such as Chrome, Brave or Edge:

1. Open DevTools on any browser tab (F12)
2. Undock DevTools into a separate window
3. Press CTRL + SHIFT + I or (Cmd + OPT + I on macOS) to open a second DevTools window

The second DevTools window now targets the first one and you are now able to inspect the Elements and play around with it.

 Check out this step-by-step video guide:

Firefox

To debug DevTools in Firefox:

1. Open DevTools on any browser tab (Hotkey: Q)
2. Open the Settings page with F1
3. Under the Advanced settings label, check the Enable browser chrome and add-on debugging toolboxes
4. From the main Firefox menu, click the Open application menu (hamburger menu)
5. Click More tools then Browser Console

A new DevTools window will pop up that will target the first DevTools window.

Happy coding