Valid Source Maps.

Source maps help debug production issues — invalid ones waste bandwidth

What does this check test?

This check verifies that source maps referenced by JavaScript and CSS files are valid and accessible. Source maps are files that map minified/compiled production code back to original source code, enabling debugging of production issues with readable code and accurate stack traces. A source map is referenced via a `//# sourceMappingURL=file.js.map` comment at the end of a minified file or via the `SourceMap` HTTP header. Invalid source maps — those that are malformed, missing, return 404 errors, or reference non-existent source files — waste bandwidth downloading unusable data and break debugging workflows.

Why does it matter?

Source maps are essential for debugging production issues — without them, stack traces reference minified variable names and line numbers that are nearly impossible to interpret. Invalid source maps are worse than no source maps because they download data (often 2-5x the size of the minified file) without providing any debugging benefit, wasting bandwidth and potentially slowing page load. When errors occur in production, valid source maps allow error monitoring services (Sentry, Bugsnag) to show the exact original source line, making bug fixes dramatically faster. Additionally, invalid source map references may cause DevTools to make unnecessary network requests.

Who is affected?

All production websites that serve minified JavaScript and CSS should have valid source maps. Sites using build tools (webpack, Vite, Rollup, esbuild) that generate source maps automatically are occasionally affected by misconfigured output paths or deployment pipelines that strip or corrupt source maps. Sites using error monitoring services rely on source maps for meaningful error reports.

Where does this apply?

Check the Sources panel in Chrome DevTools — if source maps are working, you will see your original source files in the file tree. The Console panel logs warnings about failed source map loading. The Network panel shows requests for `.map` files — check their status codes (should be 200, not 404). Look for `//# sourceMappingURL=` comments at the end of your JavaScript and CSS files to find source map references.

How to fix it

// webpack.config.js
module.exports = {
  // 'source-map' = full public maps
  // 'hidden-source-map' = maps without URL comment (for Sentry upload only)
  devtool: 'source-map',
};

// vite.config.ts
export default defineConfig({
  build: {
    sourcemap: true, // or 'hidden' for private maps
  },
});

References

• Source maps — Chrome DevTools
• Use a source map — MDN
• source-map-explorer — npm