How to setup pathMapping in VSCode to debug a Snowpack application

I’m evaluating Snowpack for building my JavaScript project. However, VSCode and the Debugger for Chrome extension cannot match the scripts on the dev server to the local source files. Because of this, breakpoints don’t work. I’m not using any source maps because I’m not bundling/transforming anything, just using vanilla ES modules.

I’m using the following template:

A simplified directory layout of the project is:


Now when I start the Snowpack dev server it serves the files using the following layout, which is quite different:


I tried the following launch configuration in VSCode, but it does not work, i.e., it cannot match the javascript files:

  "name": "Launch localhost",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:8080/",
  "webRoot": "${workspaceFolder}/public",
  "pathMapping": {
    "/dist": "${workspaceFolder}/src"

The pathMapping property has very scant documentation, and I’m wondering whether it’s working at all.

Any ideas?

99 thoughts on “How to setup pathMapping in VSCode to debug a Snowpack application”

Leave a Comment