[Video] Learn how to debug web projects end-to-end in VS Code in 5 minutes

This weekend I released a video on the?YouTube Channel?of?Visual Studio Code?that shows end-to-end web project debugging.

In five minutes I walk through debugging a web project bit by bit:

• I open a project inside?VS?Code by opening its folder. The demo used is a simple, plain Vanilla JS/CSS/HTML ToDo app you can?download/fork on GitHub.
• I open a Terminal inside?VS?Code and start a local server. I use the server that comes with?PHP?as it already on my computer (for now – MacOS will soon deprecate this option)
• Instead of opening the project in the browser, I use the?run and debug workflow?of?VS?Code to open a dedicated browser instance to debug this project with. If I have a Chromium based browser on my device and have it set as my default browser, this will be the one?VS?Code uses. In my case, this opens a new window of Microsoft Edge, as this is my main browser on this MacOS computer (yes, it runs on Mac for over 1.5 years now). I use Edge to show extra functionality later that is only supported in this Chromium based browser.
• Having a dedicated browser instance also means that I get the?Browser Developer Tools Console?functionality now inside the Debug Console of Visual Studio Code. The Debug Console shows any?console.log?messages from my JavaScript and I can also interact with the document in the browser using the?Console convenience methods?like $ for querySelector(). I have full access to the window object and can change the?DOM?and the styles of the document in a programatic way.
• In addition to console.log() debugging I also have the opportunity to use?breakpoint debugging?instead, which gives me a lot more insight and also has the benefit of halting the execution of my script until I found out what’s going on.
• As I am using Microsoft Edge as the debugging browser I also get an inspect button on the debugger toolbar. This one gives me access to the Edge Developer Tools right inside Visual Studio Code. This functionality is powered by the?Edge Tools for?VS?Code?extension which gets installed for me the first time I select the inspect button
• Once the extension runs, I can access and change the?DOM?and the?CSS?of the current project right inside Visual Studio Code using the same tools I normally use in the browser.
• I also have access to the Network tool to inspect any Network requests and see if there are any issues of content not being loaded.
• In order to automate the process of starting the browser and opening the localhost address next time, I can also get the debugger extension to generate a launch.json file for me. Once I have that, next time all of the above happens automatically.

If you want to learn more about the JavaScript debugger in?VS?Code, you can check the documentation here or talk to?Connor Peet?on Twitter. For the Edge DevTools for?VS?Code integration you can?read the extension documentation?and?check the code on GitHub. We’re also welcoming filing any issues on GitHub and you can talk to me,?codepo8?on Twitter or the team at?EdgeDevTools

A special thank you to the team involved in all this work, James Lissiak, Michael Liao, Vidal Guillermo Diazleal Ortega, Brandon Goddard, Olivia Flynn, Tony Ross, Rob Paveza, Jason Stephen, Connor Peet and of course the?VS?Code team.