Writing code, on the whole, is quite easy. What’s hard and potentially time-consuming is figuring out why that perfect bit of code you wrote doesn’t work, and this is where debugging comes in.
Debugging is the process of removing bugs from code. When we talk about a debugging experience we are specifically talking about the ability to work out what is happening, or see the state of an application at a particular time in order to understand why the expected result didn’t happen.
Good debugging tools are essential. Log files and writing out the values of variables will help to show state, but it’s a tediously long process to add logs and re-run programs.
For a good experience, you need to be able to set breakpoints and step through the code, you need to be able to view all the properties on objects and ideally interact with them to see what’s happening.
Lastly, you need this to all happen in the application you write code in so you can see the problem, make the change and test again. Browser tools may let you do most of this however, it’s a disjointed process to then find the same file in a different application to make a change.
Recently I tried following the instructions from the VueJS’s website to set up VS Code as a debugger, however as my application was using VueJS with TypeScript the instructions didn’t actually work.
If you’re interested in setting up debugging for VueJS + Typescript with VS Code you can read my solution in more detail here.