क्लाइंट-साइड कोड को जोड़ने, छोटा करने या कॉम्पाइल करने के बाद भी, उसे पढ़ने और डीबग करने लायक रखें. सोर्स पैनल में, अपने सोर्स कोड को कंपाइल किए गए कोड से मैप करने के लिए, सोर्स मैप का इस्तेमाल करें.
प्रीप्रोसेसर का इस्तेमाल शुरू करना
प्रीप्रोसेसर से मिले सोर्स मैप की वजह से, DevTools आपकी छोटी की गई फ़ाइलों के साथ-साथ ओरिजनल फ़ाइलें भी लोड करता है.
Chrome, आपके छोटे किए गए कोड को चलाएगा, लेकिन सोर्स पैनल में आपको वह कोड दिखेगा जिसे आपने लिखा है. सोर्स फ़ाइलों में ब्रेकपॉइंट सेट किए जा सकते हैं और कोड को सिलसिलेवार तरीके से देखा जा सकता है. इससे, सभी गड़बड़ियां, लॉग, और ब्रेकपॉइंट अपने-आप मैप हो जाएंगे.
इससे आपको ऐसा लगता है कि आपने जिस कोड को लिखा है उसे डीबग किया जा रहा है. यह उस कोड से अलग है जिसे आपके डेवलपमेंट सर्वर से दिखाया जाता है और ब्राउज़र से चलाया जाता है.
सोर्स पैनल में सोर्स मैप का इस्तेमाल करने के लिए:
- सिर्फ़ उन प्रीप्रोसेसर का इस्तेमाल करें जो सोर्स मैप जनरेट कर सकते हैं.
- पुष्टि करें कि आपका वेब सर्वर, सोर्स मैप दिखा सकता हो.
प्रीप्रोसेसर का इस्तेमाल करना
सोर्स मैप के साथ इस्तेमाल किए जाने वाले सामान्य प्रीप्रोसेसर में ये शामिल हैं. हालांकि, इनमें और भी प्रीप्रोसेसर शामिल हो सकते हैं:
- ट्रांसपाइलर: Babel
- कंपाइलर: TypeScript और Dart
- छोटा करने वाले टूल: terser
- बंडलर और डेवलपमेंट सर्वर: Webpack, Vite, esbuild, और Parcel
ज़्यादा जानकारी के लिए, सोर्स मैप: भाषाएं, टूल, और अन्य जानकारी देखें.
सेटिंग में जाकर सोर्स मैप चालू करना
सेटिंग > प्राथमिकताएं > सोर्स में जाकर, 
JavaScript सोर्स मैप को ज़रूर चुनें.
देखें कि सोर्स मैप लोड हो गए हैं या नहीं
डेवलपर के लिए संसाधन: सोर्स मैप को मैन्युअल तरीके से देखना और लोड करना लेख पढ़ें.
सोर्स मैप की मदद से डीबग करना
सोर्स मैप तैयार और चालू होने पर, ये काम किए जा सकते हैं:
- सोर्स पैनल में, अपनी वेबसाइट के सोर्स खोलें.
सिर्फ़ अपने लिखे गए कोड पर फ़ोकस करने के लिए, फ़ाइल ट्री में, लिखी गई और डिप्लॉय की गई फ़ाइलों को ग्रुप करें. इसके बाद,
लेखक सेक्शन को बड़ा करें और एडिटर में अपनी ओरिजनल सोर्स फ़ाइल खोलें.