Missing Node.js Source Trees

A while ago I wrote a post about DevTools missing the source tree

So oddly the DevTools versions of late have been missing the source file tree normally found on the left hand side of the debugger under Sources > Page:

At the end of that short post I wrote about a possible “compat” mode that would help however at the time it was just talk. Fast forward to this commit:

https://github.com/june07/NiM/commit/21b306463e927879db99efbab1357e5f29b310bf

and you’ll find that a compat mode was added. Great you say, but what does this DevToolsCompat checkbox do exactly?!

Well it changes which DevTools landing page (ie URL) is used. And although I don’t have a specific answer as to why they behave differently or were needed, the fact is that they do. For example, currently, the network panel and source tree do not show up when using js_app.html, however they appear as expected using the inspector.html entry point. The Chrome DevTools team introduced separate landing pages for different apps as shown here:

https://chromium-review.googlesource.com/c/chromium/src/+/905450

Using the DevToolsCompat setting my DevTools version looks like this:

And which the DevToolsCompat setting unchecked I get this:

Hopefully this small setting helps some folks out!

Originally published at https://blog.june07.com on July 28, 2019.