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