3

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?

Update:

The lit-element example seems to use babel for transpiling, but even with transpiling disabled the problem persists. This is more a VSCode problem, not a Snowpack problem.

tuner
  • 326
  • 3
  • 9
  • It sounds like snowpack is still doing some transpiling or bundling. Enabling sourcemaps in the snowpack config should solve your problem. – 17xande Sep 09 '21 at 14:35

1 Answers1

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',
  },
Miłosz
  • 73
  • 3
  • 10
  • Thanks, interesting workaround. However, VSCode is still unable to match the sources. When I add a "debugger" statement to the source, the Breakpoints panel shows that the file is: app-root.js at "/localhost:8080/src" (no http:// !). When I add a breakpoint (the red circle) to a local source file, it is app-root.js at "src". – tuner Feb 19 '21 at 13:09