पाठ 13 / 25

Debugging और source maps

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 करें।

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 करें।

त्वरित जाँच

त्वरित जाँच: Source maps क्या provide करते हैं?

  • 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 करते हैं।