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
Simple, first install the chrome debugger VSCode extension.
Second, create a new angular project, and in the .vscode folder, drop two files,
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)
And you get everything you expect from a debugger, locals, call stack, watch, etc. etc.