As Parcel automatically generates sourcemaps by default, setting up debugging with Parcel involves minimal effort for the most part.
¶ Chrome Developer Tools
Assuming that source maps are enabled, no extra configuration is required here.
For example, suppose you had a folder structure like the following:
package.json only has
With this setup, you can run
parcel src/index.html and set breakpoints in the source code, as seen below:
¶ Visual Studio Code
Assuming a folder/file structure similar to the one shown above for Chrome developer tools, the following
launch.json can be used with the Debugger for Chrome extension:
Next, you will need to start the parcel dev server with your entry point, which here is
$ parcel src/index.html
The last step here is to actually start the debugging process by clicking Green arrow in the debug panel. You should now be able to set breakpoints in your code. The final result will look similar to the following: