Microsoft Visual Studio Code with Debugger for Chrome for Static Website Pages

Hi all,

Have you used the Microsoft's free VS Code editor for you web development. I think, you should try it.

Today I'll discuss about how to debug from the VS Code without placing breakpoints on Chrome browser.

Pre-requisites

1. VS Code should be installed
2. Debugger for Chrome extension in VS Code

Configuring the debugger

• Once you open your website in the VS Code
• In the activity bar, you will find the debugger icon OR you can use the keyboard shortcut Ctrl+Shift+D
• Now, we will "Add Configuration" to our project
• On top of the debug sidebar, you will find an option "Add Configuration"
• Click on "Add Configuration"
• It will prompt you to select out of box provided options like "Chrome, NodeJS"
• Choose Chrome
• Now, launch.json file will be created
• Configure the launch.json file by specifying URL with port number
• Since, our project is of static webpages type, instead of webRoot, we will use "file"

Here is the sample launch.json file

{

// 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 for my website",

"url": "http://localhost:3001",

"file": "${workspaceFolder}/index.html"

}

]

}

Debug

• Click on the "Start Debugging" button OR press F5
• A new chrome window with debugging enabled will be launched
• Place your breakpoints in VS Code, just by clicking left to the line number in the editor
• Perform the action and your debug will be hit
• Note: You can add conditional debugging by editing the break point

Happy debugging.

Please send your review and comments to psrdotcom@gmail.com