# Debugging और source maps — Webpack

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

> Bundled code को effectively debug करें।

## Source maps क्यों matter करते हैं

Bundled और minified code को debug करना मुश्किल है। **Source maps** bundled code को original source files में map करते हैं। Browser dev tools source maps का उपयोग करके आपको original code दिखाते हैं।

## Source maps को enable करें

विभिन्न environments के लिए devtool को configure करें।

```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
```

## Devtool को wisely choose करें

Development: speed के लिए 'eval-source-map'। Production: 'source-map' debugging के लिए, लेकिन monitoring service में upload करें।

त्वरित जाँच

**Quiz:** Source maps क्या provide करते हैं?

- [x] Bundled code से original sources में mapping।
- [ ] JavaScript files का compression।
- [ ] Code के लिए security protection।

*Answer:* Bundled code से original sources में mapping।. Source maps minified/bundled code को original source files में map करके debugging को enable करते हैं।