Not having a solid understanding about how to debug your code correctly can waste hours of your life. The more time you spend working on useful problems and the quicker you can fix issues, the more legendary developer you will become. The aim of this tutorial is to teach you some skills that will allow you to debug your code quicker and more efficiently. Sound good? Let's begin!

Debugging in Chrome With Webpack

This is the quickest and easiest way of debugging your code. In Chrome, open your app in tab and open the dev tools console. Open the sources tab, within page find the entry called 'webpack://'. As long as you have source-maps enabled in your webpack build, you should be able to see all your code in here.

To debug anything, simply find the bit of code you want to debug, open it, then stick a breakpoint - by clicking on the line number.

 

 

Reload your page in the browser and the breakpoint should trigger to enable you to step through it.

Debugging in VS Code

If you do not have 'sourcemap 'enabled in your build, or, you simply prefer to debug in VS code, you can. First, create a debug configuration in VS code will allow you to debug your client-side code in VS code. If you are new to creating VS debugging, I suggest you read Debugging server side Javascript applications first.

{
    "name": "Attach chrome",
    "type": "chrome",
    "request": "attach",
    "port": 9222,
    "webRoot": "${workspaceRoot}/apps/blue-lobster/src",
    "url": "http://MYURL:MYPORT/",
    "sourceMaps": true,
    "smartStep": true,
    "internalConsoleOptions": "openOnSessionStart",
    "skipFiles": ["node_modules/**"]
}

This config will allow you to attach VS Code to chrome. In this example, the port VS code will use to talk to Chrome. Depending on the port you use, you will usually have to open Chrome with the debugging port opened, otherwise, the debugger will not attach. You can open Chrome with a specific debugging port enabled by using this command:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

If you think attaching to Chrome seems like a lot of hassle, you can also get VS Code to launch a new Chrome tab for you. You can do this with:

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome from VS code",
    "url": "http://MyURL",
    "webRoot": "${workspaceFolder}"
}

As you can see from all the configurations, there are numerous properties that are available to you to configure debug configuration. A full list can be found [here](https://code.visualstudio.com/docs/nodejs/nodejs-debugging).