This session shows how to supercharge your JavaScript debugging workflow when working with React, AngularJS, and Node in Visual Studio Code. We talk about debugging principles, workflows, and how to be more productive by staying inside your editor.
EVENT: Microsoft Build 2017
SPEAKER: Kenneth Auchenberg
PERMISSIONS: The original video was published on the Microsoft Visual Studio YouTube Channel with the Creative Commons Attribution license (reuse allowed).
ORIGINAL SOURCE: https://www.youtube.com/watch?v=-3Whcyf6pBE
Additional material for JavaScript learners:
https://amzn.to/2JrUINQ Eloquent JavaScript, 3rd Edition: A Modern Introduction to Programming
https://amzn.to/2HwAMYd Simplifying JavaScript: Writing Modern JavaScript with ES5, ES6, and Beyond
https://amzn.to/2Cq5bmL JavaScript: JavaScript Programming.A Step-by-Step Guide for Absolute Beginners
https://amzn.to/2uhIvAP How JavaScript Works
https://amzn.to/2CwS2bU The Modern JavaScript Collection
Original source
11 responses to “VS Code: Supercharge Your JavaScript Debugging Workflow”
How did yo determine that 3000 was your port number when you launched Chrome Debugging in VIsual Studio Code? Please help me determine the port I should use.
Can you assist me in restoring the Debugging Icon, I accidentally deleted it
Smukt Kenneth, men du siger godt nok 'like' mange gange 😉
Cannot connect to runtime process, timeout after 10000 ms – (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:5858).
What to do with this? What have you set in your "start" runtimeArgs? Facing hard times debugging a simple app. It sucks.
JS is ridiculously difficult to debug. Most popular language atm, not good IDE with good intellisence or debugging tools.
I will definitely test this out. However console.log isn't the only way. You can also write debugger in your code to set break points. I find that, in combination with console log, to be pretty painless especially when you have HMR enabled. Great video though!
It's amazing!!!
How to debug typescript file using angular in vscode please help me out
what if they have babel-node… and a number of build process in front of it…. The idea of setting break point for node like in VS is quite naive… I tried it for a while and it simply not working. Still prefer console.log, simple and straight forward.
Now if only code with async/await could be debugged properly…
They really didn't hear about WebStorm?