Recently, I had the pleasure of setting up a project in VS Code for debugging. Visual Studio offers great support for debugging C#, C++, JavaScript run on Node.js or in the Chrome browser. Today, I’ll show you how to setup a Node.js app and Chrome app for debugging.

To get started you’ll need to go ahead and open your project in VS Code. We’ll start with the Node.js app since it’s the simplest to start with. Once you’ve opened your project click on the debug menu on the left hand side. You’ll see a drop-down menu that will say no configurations. Click on this drop-down and click the “Add Configuration…” option. This will open a menu where you can select the type of debugger to add to your project. Select Node from the drop-down and that will add an entry in a JSON manifest file called launch.json where you can put various debugger definitions. This first entry will start your app using the value of the main  property in your package.json  file and attach to Node’s built in debugger.

Now you can go ahead and place a breakpoint in your main file and hit F5. This will start your app and attach to Node’s debugger. When you send a request to an express app, you’ll be able to inspect all the various variables and objects without having to write a bunch of console.log  statements.

The best part about this setup is that it allows you to see what’s happening inside your app at various points in its execution. You can see the final example repo here. VS Code ships with debugger support for Node.js, but you can add more debug definitions through various extensions. Microsoft advertises the Python, C++, C#, and Chrome extensions on their website, but there may be more community extensions available for various languages. To add support for front-end Chrome debugging we’ll install the Chrome Debugger extensions from the extension marketplace.

Setting this extension up takes a little more effort than the Node debugger, but if you’re familiar with Node’s CLI than you should have no trouble understanding the setup. Once you’ve installed the extension, create a shortcut to chrome on your desktop and then edit the properties to add CLI arguments to it. On Windows your shortcut target should look like this: “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” -remote-debugging-port=9222 . On Linux or Mac you can write a shell script and execute that in the definition instead of Chrome. Now you can open your front-end project and add a definition for it. Do the same as before except choose Chrome instead of Node. By default Chrome will launch with a debug server enabled, map all source to the workspace directory defined in launch.json , and navigate to the URL you define in your launch.json  file.

Now you can start your front-end server (webpack dev server or something like that) and hit F5. Chrome will launch with the debug server enabled and pass all console statements and source map data from the browser back to VS Code. No more debugger or console.log  statements!