Debugging javascript from source

bud
,
1

I would like to set debug breakpoints in my javascript source files in VS Code. When I launch the debugger, the breakpoints aren’t recognized. I can see the compiled files in the Loaded Scripts panel and set breakpoints in them, but not in the source files. I see that the sourceURL in the compiled files is like webpack://@roots/bud/sage/./scripts/app.js. Do I need to adjust my VS Code launch configuration to support this source map? Anyone have a successful configuration for debugging javascript Sage?

My launch configuration for VS Code is:

{
	"name": "Launch Chrome",
	"request": "launch",
	"type": "chrome",
	"url": "https://mydomain.local:3000",
	"webRoot": "${workspaceFolder}/",
	"sourceMaps": true,
	"trace": true,
}
1 Like
2

I have the same question, did you figure it out?

3

Unfortunately, not yet.

4

Been trying to sort out the same thing. Anyone figure this out?

5

Can y’all give this a shot?

yarn bud build --devtool=source-map

Or add the following to your bud config:

app.devtool('source-map');
6

Thanks Ben, that seems to get me closer. I can now set breakpoints in VS code. But, the scripts where I can set breakpoints are in a sage directory in the Loaded Scripts panel, and edit only. The sage directory does not exist in my project file structure. Setting breakpoints in my actual src js files does nothing. Is there a configuration to set the source map to point to the files in my src directory rather than the virtual sage directory?

7

Try adding this to your launch.json
Replace the path in sourceMapPathOverrides to your ressources folder (if your not using a standard structure).

// For Chrome

"webRoot": "${workspaceFolder}",
 "sourceMapPathOverrides": {
      "webpack://@roots/bud/sage/*": "${webRoot}/wp-content/themes/sage/resources/*"
}
1 Like
8

So awesome, thanks for your help!

For others, here’s what I got working:

In bud.config.cjs, add:

/**
* When in dev mode, use source maps.
*/
.when(app.isDevelopment, () => app.devtool('source-map'))

In myproject.code-workspace, add:

{
	"launch": {
		"version": "0.2.0",
		"configurations": [
			{
				"name": "Launch Chrome",
				"request": "launch",
				"type": "chrome",
				"url": "https://myproject.local:3000",
				"webRoot": "${workspaceFolder}",
				"sourceMapPathOverrides": {
					"webpack://@roots/bud/sage/*": "${webRoot}/resources/*"
				}
			}

		]
	}

Run yarn dev and set breakpoints.

2 Likes