Parcel debugging experience inconsistent

Question

I have a rather simple setup: - parcel 1.12.4 - vs code 1.43.2 - chrome 80.0.3987.149 on macOS - chrome debugger extension - node v13.11.0 - a simple index.html that uses main.js which imports moment.js and a module of mine.

Snippet from launch.json

  {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:1234",
    "webRoot": "${workspaceFolder}"
  }

When I serve everything via parcel index.js it compiles and runs fine.

When I set a breakpoint in main.js , it is grayed out and ignored.
When I resort to debugger;, this breakpoint works and I can also set other breakpoints via VS Code or Chrome.
Most of the time, the breakpoint shows up in a tab main.js read only inlined content ... – the extract of the sourcemap/bundle which is a bit weird but understandable.
Sometimes the breakpoint shows up in dist/main.fb6bbcaf.js, essentially forcing me to debug inside the generated bundle.

This is a bit inconsistent and I did not find any pattern what happens when. I plan to use parcel/javascript with a number of students and I anticipate that they will be confused.

What can I do to get a more consistent debugging experience?

Parcel debugging experience inconsistent

0 Answers