Skip to content

Inspect DevTools with DevTools

inspect devtools with devtools

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!

Contents hide
1. Chrome
2. Firefox
2.1. Comments

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 ☺

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.   
  

Comments