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
- VS Code should be installed
- 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
