In web development, VSCode can be used for client side debugging, or server side debugging (node.js), or both. It is configured in .vscode/launch.json. You can open/create this file when you open debugger pane in VSCode, and click “Add Configuration” from the dropdown.
Client side debugging
You need to install Debugger for Chrome to hook up VSCode with the browser. To start debugging, you can either “launch” a new browser instance or use an existing one and “attach” to it. I usually launch a new one, because attaching to Chrome requires special arguments when you launch Chrome.
In launch.json add the following configuration:
{
"version": "0.2.0",
"configurations": [
{
"name": "Client",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8000/",
"webRoot": "${workspaceRoot}/public/js"
}
]
}The trick here is webRoot, it must point to the source file of your javascript, not build file (considering some bundling tools even do not produce physical build files (e.g. webpack-dev-middleware), it definitely makes sense not to point to build files.
A good thing is that it supports webpack HMR. So the edit automatically captures the code change and sets the break points accordingly. In my test, this however does not work. When the code changes, the debugger disconnects from chrome page. I have to relaunch the client debugger. But maybe there is something weird going on with my stuff as I did see working videos with this feature.
Server side debugging
launch.json allows one to add multiple configuration (note configurations is an array). As you add more, the name will show up in the dropdown list. We can add server debugging configuration in the same launch.json.
{
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Server",
"runtimeExecutable": "nodemon",
"program": "${workspaceRoot}/index.js",
"console": "integratedTerminal"
}
]
}You can then select “Server” from the drop down, and click the “start debugging” button.
Compound
To debug client AND server, you can start each configuration one by one (select from the dropdown and launch). Or there is a “compound” configuration that start both debugging at the same time.
{
"configurations": [
...
],
"compounds": [
{
"name": "Server/Client",
"configurations": ["Server", "Client"]
}
]
}This configuration will also show up in the dropdown. Just choose item “Server/Client” and launch.
Because sometimes errors could occur and disconnects the debugger from browser (like the Webpack HMR thing I mentioned before), I prefer to launch server debugger and client debugger separately, so that when one broke, I can just relaunch that one without touching the other one :(
Conclusion
The best thing with VSCode debugging is you can easily target at your code because that is where you just edited. With Chrome Devtool, you have to locate the file, especially when you use bundling tools like Webpack.
It is also nicer to debug node.js. With Chrome dev tool, the node code gets transpiled; so the code you are debugging is not the same as what you write. VSCode eliminates the issue, as that’s What You Debug is What You Write.
