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: https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-lit-element

A simplified directory layout of the project is:

public/
  index.html
src/
  index.js 

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

index.html
dist/
  index.js

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?

1 thought on “How to setup pathMapping in VSCode to debug a Snowpack application”

  1. To create an output you would like to have please configure mount option for snowpack config, experiment with this config to get the result you need.

      mount: {
       public: '/',
       src: '/src',
      },
    
    Reply

Leave a Comment