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