सोर्स मैप की मदद से, आपके कोड को जोड़ा और छोटा किया जा सकता है. इसके बाद भी, इस डेटा को आसानी से पढ़ा जा सकता है और डीबग किया जा सकता है. इससे परफ़ॉर्मेंस पर कोई असर नहीं पड़ता.
अलग-अलग ट्रांसपाइलर, मिनीफ़ायर, और बंडलर का इस्तेमाल करते समय डिप्लॉय किया गया कोड, आपके लिखे गए कोड से अलग होता है. नेटवर्क की परफ़ॉर्मेंस को बेहतर बनाने के लिए, ये टूल कोड को एक लाइन में कंप्रेस करते हैं. साथ ही, गै़र-ज़रूरी वर्ण हटा देते हैं और वैरिएबल को छोटा करते हैं.
आपके कोड के साथ काम करने के लिए, कई टूल सोर्स मैप जनरेट कर सकते हैं.
Chrome DevTools, डिप्लॉय किए गए कोड और सोर्स मैप, दोनों को पढ़ता है. साथ ही, ब्रेकपॉइंट की मदद से भी कोड को डीबग करने की सुविधा देता है, जैसा कि आम तौर पर किया जाता है.
सोर्स मैप के काम करने के तरीके को बेहतर ढंग से समझने के लिए, सोर्स मैप विज़ुअलाइज़र देखें.
इसके अलावा, सोर्स मैप में एक्सटेंशन हो सकते हैं. अगर आप टूल और फ़्रेमवर्क बनाते हैं, तो उनके साथ काम करने के बारे में सोचें. यह केस स्टडी: DevTools की मदद से बेहतर एंगुलर डीबगिंग देखें. इसमें DevTools टीम और Angular ने x_google_ignoreList एक्सटेंशन की सुविधा के साथ, DevTools में डीबग करने के अनुभव को बेहतर बनाया है.
ज़्यादा जानने के लिए, देखें: