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.
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.
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.