DEV Community

Cover image for How to debug DevTools with DevTools

How to debug DevTools with DevTools

Rachel Simone Weil on April 01, 2021

The developer tools built into Chromium-based web browsers are—like the apps they debug—built in plain old HTML, CSS, and Javascript. If DevTools ...
Collapse
 
siddharthshyniben profile image
Siddharth

Cool. I guess we could just use it to clear the clutter on devtools and maybe make it look nice. I want to see what happens if I write a devtools.css and link it so I get a beautiful devtools

Collapse
 
hxlnt profile image
Rachel Simone Weil

Speaking of custom themes in DevTools, you might also be interested to hear that VS Code theme support is coming to Edge DevTools! See: twitter.com/partytimeHXLNT/status/...

Collapse
 
hxlnt profile image
Rachel Simone Weil

I know EXACTLY what you mean about clutter! In Edge DevTools, we're creating some improvements specifically around this problem.

You can close the tabs you don't need and easily add them back with the + button if you want them back.

Screenshot of DevTools tab row showing only Elements and a + button

The Focus Mode UI I mentioned also helps you group tabs together so you can organize by debugging tasks.

I'm looking at other ways to improve the look and feel of Edge DevTools, so if you have ideas, let me know! :)

Collapse
 
siddharthshyniben profile image
Siddharth

Wait, are you working on the devtools? Like working with the company? If yes, then please declutter.

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

Too bad that this is April Fools joke I was hoping to debug my dev tools extension, but CTRL+SHIFT+I just close the dev tools in Google Chrome.

Collapse
 
siddharthshyniben profile image
Siddharth • Edited

Really?

It works. Only the arrow which we use to select elements doesn't

Collapse
 
hxlnt profile image
Rachel Simone Weil

Aww, it's no joke, Jakub! Did you remember to first undock DevTools as described in step 2? The Ctrl+Shift+I shortcut will only open DevTools on an undocked instance. Hope that helps! ✨

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

Aw, that's pretty awesome I didn't read the article carefully. Now I can debug my dev tools extension. Thanks.

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

TIL - this is very neat! ✨

Collapse
 
zer0 profile image
zer0

I am actually looking for an open source project to work on occasionally and stumbled upon devtools.
Definitely will check out what you guys are working on

Collapse
 
genepavlovsky profile image
Gene Pavlovsky

The correct hotkey on macOS is Cmd-Option-I.
Please update the article.