Debug AngularCLI projects in VSCode with simple F5

I ❤ VSCode. When I’m deep inside my code, the last thing I want to do is go to terminal (another window), and do shtuff!! Okay there is the integrated terminal, but whatever happened to F5 … set breakpoint .. and debug?

Yeah we kinda lost that!

Well, no more!!

You can get that back in VSCode + Angular (CLI). Basically the ideal UX,

a) Write code

b) F5

c) Debug

But how?

Simple, first install the chrome debugger VSCode extension.

Second, create a new angular project, and in the .vscode folder, drop two files,

and

And just hit F5 (or play button on Macbook touchbar). This should launch chrome.

And set a breakpoint, and you’ll hit it like this,

You can debug, (even via touchbar as shown below)

image credit: https://code.visualstudio.com/updates/v1_17#_macos-touch-bar-support

And you get everything you expect from a debugger, locals, call stack, watch, etc. etc.