Being able to properly debug projects within your favorite editor/IDE is an essential part of being a developer.
In this post I'll take you through setting up Visual Studio Code (VSCode) in way that allows you to debug your code directly within VSCode when working with the page generator Gatsby (https://www.gatsbyjs.com) and projects build with the Parcel bundler (https://parceljs.org). This works for both Typescript and regular JavaScript projects.

Debugging projects generated with the Parcel bundler

The goal here is to be able to set breakpoints in our code files in VSCode, then launch Chrome from VSCode and perform the debugging steps all from within the VSCode editor. This should work with Typescript projects, JavaScript projects and React Projects.

Steps

• First you'll need to install the "Debugger for Chrome" extension for Visual Studio Code (msjsdiag.debugger-for-chrome)
• The next step is to configure a launch configuration (see below).
• Add an npm script to start parcel, e.g: "start": "parcel src/index.html".

{
	"version": "0.2.0",
	"configurations": [
		{
			"type": "chrome",
			"request": "launch",
			"name": "Launch Chrome debugger",
			"url": "http://localhost:1234",
			"webRoot": "${workspaceFolder}",
			"breakOnLoad": true,
			"sourceMapPathOverrides": {
				"../*": "${webRoot}/*"
			}
		}
	]
}

Debugging

• Run the npm script first, in this example it would be npm start
• Now you can start debugging in VSCode by running «Launch Chrome debugger» from the «Run and debug» menu
• Chrome will open and you can set breakpoints within VSCode

Debugging Gatsby projects within Visual Studio Code (VSCode)

There are two separate steps to a Gatsby project you might like to debug, the build phase and/or the runtime phase.
The full launch config for both phases can be found at the bottom of this post.

Debugging the Gatsby build phase from Visual Studio Code (VSCode)

The build phase in a Gatsby project is when Gatsby is generating all pre-generated content, such and pages etc.
In this phase you'll mainly focus on debugging the «gatsby-node.[js|ts]» file, and of course any file you refer to.
Since this step in Gatsby is executed by Node, this is just like debugging a Node application. Works for both JS and Typescript Gatsby projects.

• If you are using Typescript, set "sourceMap": true in the «tsconfig» file.
• Add a new config to your launch.json config file in VSCode (see below)
• Set a breakpoint in your «gatsby-node» file and run the launch config below

{
	"name": "Debug gatsby-node",
	"type": "pwa-node",
	"request": "launch",
	"program": "${workspaceRoot}/node_modules/.bin/gatsby",
	"args": ["develop"],
	"stopOnEntry": false,
	"runtimeArgs": ["--nolazy"],
	"console": "integratedTerminal"
}

Debugging the runtime React part of a Gatsby project from within Visual Studio Code (VScode)

The runtime phase is where you'll want to debug any client side React and Typescript/JavaScript code. This setup is very similar to the Parcel setup at the start of this post. Let's go though the steps:

• If you haven't done this already, install the "Debugger for Chrome" extension for Visual Studio Code (msjsdiag.debugger-for-chrome)
• The next step is to configure a launch configuration (see below).
• Setup a npm script to start the Gatsby server: "start": "gatsby develop"

{
	"type": "chrome",
	"request": "launch",
	"name": "Launch Chrome debugger",
	"url": "http://localhost:8000",
	"webRoot": "${workspaceFolder}"
}

Debugging the runtime React app

• To debug you can now run the npm script npm start and when it's done (might take a while) ...
• Now you can start debugging in VSCode by running «Launch Chrome debugger» from the «Run and debug» menu

Full launch config for both Gatsby phases

{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Debug gatsby-node",
			"type": "pwa-node",
			"request": "launch",
			"program": "${workspaceRoot}/node_modules/.bin/gatsby",
			"args": ["develop"],
			"stopOnEntry": false,
			"runtimeArgs": ["--nolazy"],
			"console": "integratedTerminal"
		},
		{
			"type": "chrome",
			"request": "launch",
			"name": "Launch Chrome debugger",
			"url": "http://localhost:8000",
			"webRoot": "${workspaceFolder}"
		}
	]
}