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