अपने क्लाइंट-साइड कोड को जोड़ने, छोटा करने या कंपाइल करने के बाद भी, उसे पढ़ने लायक और डीबग करने लायक बनाएं. सोर्स पैनल में, अपने सोर्स कोड को कंपाइल किए गए कोड से मैप करने के लिए, सोर्स मैप का इस्तेमाल करें.
प्रीप्रोसेसर का इस्तेमाल करना शुरू करें
प्रीप्रोसेसर के सोर्स मैप की वजह से, DevTools आपकी छोटी की गई फ़ाइलों के साथ-साथ आपकी मूल फ़ाइलें भी लोड कर देता है.
Chrome असल में आपका छोटा किया गया कोड चलाएगा, लेकिन सोर्स पैनल में आपका लिखा हुआ कोड दिखेगा. सोर्स फ़ाइलों में, ब्रेकपॉइंट और स्टेप थ्रू कोड सेट किए जा सकते हैं. इससे सभी गड़बड़ियां, लॉग, और ब्रेकपॉइंट अपने-आप मैप हो जाएंगे.
यह आपको कोड को उसी तरह डीबग करने का तरीका दिखाता है, जैसा आपने लिखा था. यह कोड, आपके डेवलपमेंट सर्वर से मिलने वाले कोड और ब्राउज़र की मदद से एक्ज़ीक्यूट किए जाने वाले कोड के उलट होता है.
सोर्स पैनल में सोर्स मैप का इस्तेमाल करने के लिए:
- सिर्फ़ उन प्रीप्रोसेसर का इस्तेमाल करें जो सोर्स मैप बना सकते हों.
- पुष्टि करें कि आपका वेब सर्वर सोर्स मैप दिखा सकता है.
इस्तेमाल किए जा सकने वाले प्रीप्रोसेसर का इस्तेमाल करें
सोर्स मैप के साथ इस्तेमाल किए जाने वाले सामान्य प्रीप्रोसेसर में ये शामिल हैं. हालांकि, इनमें और भी चीज़ें शामिल हो सकती हैं:
- ट्रांसपिलर: Babel
- कंपाइलर: TypeScript और Dart
- मिनीफ़ायर: टरसर
- बंडलर और डेवलपमेंट सर्वर: Webpack, Vite, esbuild, और Parcel
पूरी सूची देखने के लिए, सोर्स मैप: भाषाएं, टूल, और अन्य जानकारी देखें.
सेटिंग में जाकर सोर्स मैप को चालू करें
सेटिंग > प्राथमिकताएं > सोर्स में जाकर, 
JavaScript सोर्स मैप चालू करें को चुनना न भूलें.
देखें कि सोर्स मैप लोड हो गए हैं या नहीं
डेवलपर संसाधन: सोर्स मैप को मैन्युअल तरीके से देखें और लोड करें.
सोर्स मैप की मदद से डीबग करना
सोर्स मैप तैयार और चालू हैं होने पर, ये काम किए जा सकते हैं:
- सोर्स पैनल में, अपनी वेबसाइट के सोर्स खोलें.
सिर्फ़ अपने लिखे गए कोड पर फ़ोकस करने के लिए, लिखी गई और डिप्लॉय की गई फ़ाइलों को फ़ाइल ट्री में ग्रुप करें. इसके बाद,
लिखा गया सेक्शन को बड़ा करें और एडिटर में अपनी ओरिजनल सोर्स फ़ाइल खोलें.
ब्रेकपॉइंट सेट करें. उदाहरण के लिए, लॉगपॉइंट. इसके बाद, कोड चलाएं.
ध्यान दें कि एडिटर सबसे नीचे स्टेटस बार में, डिप्लॉय की गई फ़ाइल का लिंक दिखाता है. इसी तरह, यह डिप्लॉय की गई सीएसएस फ़ाइलों के लिए भी ऐसा करता है.
कंसोल पैनल खोलें. इस उदाहरण में, लॉगपॉइंट के मैसेज के बगल में, Console में ओरिजनल फ़ाइल का लिंक दिखता है, न कि डिप्लॉय की गई फ़ाइल का.
ब्रेकपॉइंट टाइप को सामान्य में बदलें और कोड को फिर से चलाएं. इस बार एक्ज़ीक्यूशन रुक जाता है.
ध्यान दें कि कॉल स्टैक पैनल में, डिप्लॉय की गई ओरिजनल फ़ाइल का नाम नहीं दिखता, बल्कि ओरिजनल फ़ाइल का नाम दिखता है.
एडिटर के सबसे नीचे मौजूद स्टेटस बार में, डिप्लॉय की गई फ़ाइल के लिंक पर क्लिक करें. सोर्स पैनल आपको इससे जुड़ी फ़ाइल पर ले जाता है.
डिप्लॉय की गई कोई भी फ़ाइल खोलने पर, DevTools आपको इसकी सूचना देता है. हालांकि, ऐसा तब होता है, जब उसे //# sourceMappingURL टिप्पणी और उससे जुड़ी ओरिजनल फ़ाइल मिलती है.
ध्यान दें कि एडिटर ने डिप्लॉय की गई फ़ाइल को अपने-आप प्रिटी-प्रिंट किया है. असल में, इसमें //# sourceMappingURL टिप्पणी को छोड़कर, बाकी सभी कोड एक ही लाइन में मौजूद होते हैं.
#sourceURL वाले eval() कॉल को नाम दें
eval() कॉल मैनेज करते समय, #sourceURL की मदद से डीबग करने की प्रोसेस को आसान बनाया जा सकता है. यह हेल्पर, //# sourceMappingURL प्रॉपर्टी से काफ़ी मिलता-जुलता है. ज़्यादा जानकारी के लिए, सोर्स मैप V3 की खास बातें देखें.
eval() का इस्तेमाल करने पर, //# sourceURL=/path/to/source.file टिप्पणी ब्राउज़र को सोर्स फ़ाइल ढूंढने के लिए कहती है. इसकी मदद से, अपने इवैलुएशन के साथ-साथ इनलाइन स्क्रिप्ट और स्टाइल को नाम दिया जा सकता है.
इस डेमो पेज पर इसकी जांच करें:
- DevTools खोलें और Sources पैनल पर जाएं.
- पेज पर, अपने कोड को नाम दें: इनपुट फ़ील्ड में कोई आर्बिट्रेरी फ़ाइल नाम डालें.
- कंपाइल करें बटन पर क्लिक करें. CoffeeScript स्रोत से जांचे गए योग के साथ एक सूचना दिखाई देती है.
- पेज पैनल पर मौजूद फ़ाइल ट्री में, पसंद के मुताबिक बनाए गए फ़ाइल नाम वाली नई फ़ाइल खोलें. इसमें, कंपाइल किया गया JavaScript कोड शामिल है. इसमें सोर्स फ़ाइल के मूल नाम के साथ
// #sourceURLटिप्पणी है. - सोर्स फ़ाइल खोलने के लिए, एडिटर के स्टेटस बार में दिए गए लिंक पर क्लिक करें.
