How to configure JavaScript debugging in your code-editor

By default, ElasticPress enables source maps for all JavaScript files. This enables you to set breakpoints in your code editor and to hit them by loading a relevant page in the browser.

For any VSCode-based editor, add the following configuration to your .vscode/launch.json:

JSON

{
	"configurations": [
		{
			"name": "Launch Chrome",
			"request": "launch",
			"type": "chrome",
			"url": "http://elasticpress.test/",
			"webRoot": "${workspaceFolder}/app/public",
			"sourceMapPathOverrides": {
				"webpack://elasticpress/./*": "${workspaceFolder}/app/public/wp-content/plugins/elasticpress/*"
			}
		},
}

{
	"configurations": [
		{
			"name": "Launch Chrome",
			"request": "launch",
			"type": "chrome",
			"url": "http://elasticpress.test/",
			"webRoot": "${workspaceFolder}/app/public",
			"sourceMapPathOverrides": {
				"webpack://elasticpress/./*": "${workspaceFolder}/app/public/wp-content/plugins/elasticpress/*"
			}
		},
}

This is configured with the assumption that you’re using Local WP, and have the project opened from the outer-most folder of the site. Depending on your setup, adjust the url, webRoot, and sourceMapPathOverrides accordingly.