# Debugging and source maps — Webpack

Source: https://www.geekswithgeeks.com/en/webpack/webpack-13

> Debug bundled code effectively.

## Why source maps matter

Bundled and minified code is hard to debug. **Source maps** map bundled code back to original source files, line-by-line. Browser dev tools use source maps to show you original code, not minified code. Enable in development, consider disabling in production.

## Enable source maps

Configure devtool for different environments.

```javascript
module.exports = {
  devtool: process.env.NODE_ENV === 'production' 
    ? 'source-map' 
    : 'eval-source-map',
  // source-map: separate file, slower build, best quality
  // eval-source-map: eval, faster build, good quality
  // false: no source map
};
```

Output:

```
Source maps generated based on environment
```

## Choose devtool wisely

Development: 'eval-source-map' for speed. Production: 'source-map' for debugging uploaded bundles, but upload to monitoring service, not browser. Or use 'hidden-source-map' to generate maps without exposing them.

Quick check

**Quiz:** What do source maps provide?

- [x] Mapping from bundled code back to original sources.
- [ ] Compression of JavaScript files.
- [ ] Security protection for code.

*Answer:* Mapping from bundled code back to original sources.. Source maps enable debugging by mapping minified/bundled code back to original source files for readability.