Debugging your code in VS Code

Another interesting alternative to debug your code is to make use of the VS Code debugger.

As with Chrome, you can define breakpoints by clicking next to a line:

Once done, you can start debugging by going to Debug | Start Debugging or by pressing F5:

The first time that you do so, VS Code will create a .vscode/launch.json file for you. This file tells VS Code what to do when it starts a debugging session. In our case, we can leverage the fact that we have Browsersync running in the background and adapt the configuration to let VS Code open Chrome (or another browser) and go to http://localhost:3000 instead of the default 8080 port. Once adapted, the file should look as follows:

{ 
    // Use IntelliSense to learn about possible attributes. 
    // Hover to view descriptions of existing attributes. 
    // For more information, visit: https://go.microsoft.com/fwlink/?
    // linkid=830387 
    "version": "0.2.0", 
    "configurations": [ 
        { 
            "type": "chrome", 
            "request": "launch", 
            "name": "Launch Chrome against localhost", 
 "url": "http://localhost:3000", 
            "webRoot": "${workspaceFolder}" 
        } 
    ] 
} 

In VS Code, you can easily switch between views from the View menu:

Now go ahead and put a breakpoint on the first line of the isEnter function in todo-it.ts. Once done, press F5 in VS Code to start debugging. It will open a new web browser window and will switch to the Debug view. In Chrome, press Enter in the add todo input field to trigger the breakpoint. Now, in VS Code, you should be able to debug your code, just like you did before from the Chrome developer tools:

If you're like us, you'll prefer staying as much as possible in your IDE of choice as that's where you'll be the most productive. A nice side effect of debugging through VS Code is that you directly debug from your sources, which is great!

Check out the following link to learn more about the VS Code debugger: https://code.visualstudio.com/docs/editor/debugging.