Easy Debugging with Vscode (IDE)

So here’s a thing if you are still using chrome debugger you good thing is you are already ahead of most Front-end developers who confront every single issue with console logs. But, if you ever had thought you might still be missing something that can remove your discomfort using debuggers and that can enhance your overall experience debugging applications, you might be just right, and where you need to be to fix that. Yeah, I’m talking about debugging at the comfort of your IDE, with elegant, properly highlighted code and with shortcuts!

Let's see that in action. The first step will be sharing with you a little code to get everything ready which will help with debugging the currently open file on an editor.
Just copy-paste the following snippet into .vscode/launch.json.

{
  "version": "0.2.0",
  "configurations": [{
     "type": "pwa-node",
     "request": "launch",
     "name": "Node Debugger",
     "program": "${file}"
  }];
}

Now toggle debugger inside your file (you can use my gist) and launch debugger (Command/Control + Shift + D) then press green play icon (▷), you will have launched your VScode debugger. I should look as below.

Now you would want to be editing the specific file, to do that you can declare according to the path in “program”. The changed file should look like this.

{
    "version": "0.2.0",
    "configurations": [
        {
          "type": "pwa-node",
          "request": "launch",
          "name": "Node Debugger",
          "program": "${workspaceFolder}\\app.js"
        }
    ]
}

To enrich the experience I personally recommend attaching the “toggle debugger” key to some shortcut that you’re comfortable with, for me, it’s “command+d” and I use “command+k d” to delete all debuggers.
And for MacOS users all 6 commands of the debugger are displayed on the left side of the touch bar, removing the need to attach shortcuts. I personally like them much and use them all the time.

This is it for this, please clap if you found this article any helpful.