While working on a recent issue in Gutenberg, I needed to do some javascript debugging. Normally I’d just do this in Chrome using the dev tools, but I decided to see if I could get the VSCode Chrome debugger working to be able to do it directly inside the IDE.
Initially, the debugger was running and executing, but any breakpoints I added were marked as invalid. This is because VSCode was having trouble parsing the source maps for the JS files being loaded by the browser.
It took a while of tinkering with the config, but this is what I finally got working:
In my setup, I’m using a custom-site on VVV called gutenberg. VVV lives in my user directory on my machine.
The solution was just adding the correct webRoot and sourceMapPathOverrides, but it was tough to troubleshoot because most of the documentation said to just run the .scripts command in the debug console to determine how files were mapped.
But whenever I ran that, it didn’t provide me with any listed mappings for the individual JS files being loaded (as most of the documentation said it should), so I couldn’t tell what was wrong.
Ultimately I added "trace": true to the launch.json and then looked at the full output provided to the log and was able to tell the issue.
Gutenberg’s webpack config doesn’t specify a source path, so when the debugger is setting up, it tries to fall back to the directory of the js file to use as the path to find its mapped files.
This essentially leads to paths like this:/Users/wearnhardt/vvv/www/gutenberg/public_html/wp-content/plugins/gutenberg/build/editor/webpack://wp.[name]/./packages/editor/src/store/reducer.js
Once I got the correct sourceMapPathOverrides rules in place, it started working great!