How to use source maps for debugging transpiled JavaScript

· Category: JavaScript

Short answer

Source maps are JSON files that map the lines and columns of transformed code back to the original source, enabling breakpoints and stack traces in pre-transpilation code.

Steps

  1. Generate source maps during build: javascript // webpack.config.js module.exports = { devtool: "source-map" };
  2. Verify the //# sourceMappingURL= comment exists at the end of the output file.
  3. Open DevTools and ensure "Enable JavaScript source maps" is checked in settings.
  4. Set breakpoints in the original source files shown in the Sources panel.

Tips

  • Use separate source map files in production to avoid leaking source code.
  • Inline source maps are convenient for development but increase bundle size.

Common issues

  • Missing or incorrect sourceMappingURL comments prevent mapping.
  • Mismatched source maps after a rebuild cause breakpoints to land on wrong lines.