सोर्स मैप, मॉडर्न वेब डेवलपमेंट में एक अहम टूल है जो डीबग करने की सुविधा देता है काफ़ी आसान हो गया है. इस पेज में सोर्स मैप की बुनियादी बातों के बारे में बताया गया है. जनरेट किए गए हैं और वे डीबगिंग अनुभव को कैसे सुधारते हैं.
सोर्स मैप की ज़रूरत
शुरुआती वेब ऐप्लिकेशन, कम मुश्किलों के साथ बनाए गए थे. एचटीएमएल, सीएसएस, और JavaScript फ़ाइलों को सीधे वेब पर.
ज़्यादा आधुनिक और जटिल वेब ऐप्लिकेशन बनाने के लिए, कई तरह के टूल की ज़रूरत पड़ती है डेवलपमेंट वर्कफ़्लो है. उदाहरण के लिए:
- भाषाओं और एचटीएमएल प्रीप्रोसेसर का टेंप्लेट बनाना: Pug, ननजक्स, मार्कडाउन.
- सीएसएस प्रीप्रोसेसर: SCSS, कम, PostCSS.
- JavaScript फ़्रेमवर्क: Angular, React, Vue, स्वेल्ट.
- JavaScript मेटा फ़्रेमवर्क: Next.js, Nuxt, Astro.
- हाई-लेवल प्रोग्रामिंग भाषाएं: TypeScript, डार्ट, CoffeeScript.
इन टूल का इस्तेमाल करके, आपको अपने कोड को स्टैंडर्ड एचटीएमएल, JavaScript और सीएसएस को इस्तेमाल करते हैं, जिन्हें ब्राउज़र समझ सकते हैं. यह भी सामान्य तरीका है इन फ़ाइलों को छोटा करके और आपस में जोड़कर परफ़ॉर्मेंस ऑप्टिमाइज़ करें. इसके लिए, Terser.
उदाहरण के लिए, बिल्ड टूल का इस्तेमाल करके हम इन्हें ट्रांसपाइल और कंप्रेस कर सकते हैं JavaScript की एक लाइन में TypeScript फ़ाइल बनाएं. इसे यहां पर आज़माया जा सकता है GitHub पर डेमो.
/* A TypeScript demo: example.ts */
document.querySelector('button')?.addEventListener('click', () => {
const num: number = Math.floor(Math.random() * 101);
const greet: string = 'Hello';
(document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
console.log(num);
});
कंप्रेस किया गया वर्शन यह होगा:
/* A compressed JavaScript version of the TypeScript demo: example.min.js */
document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));
हालांकि, कोड को कंप्रेस करने से, डीबग करने की प्रोसेस और मुश्किल हो सकती है. सोर्स मैप इस समस्या को दूर कर सकता है: अपने कंपाइल किए गए कोड को वापस मूल कोड पर मैप करके, वे गड़बड़ी के सोर्स का तुरंत पता लगाने में आपकी मदद कर सकती हैं.
सोर्स मैप जनरेट करें
सोर्स मैप ऐसी फ़ाइलें होती हैं जिनके नाम के आखिर में .map आता है (उदाहरण के लिए,
example.min.js.map और styles.css.map). इन्हें ज़्यादातर बिल्ड की मदद से जनरेट किया जा सकता है
ऐसे टूल जिनमें Vite, webpack शामिल हैं.
रोलअप, पार्सल, और
esbuild.
कुछ टूल में डिफ़ॉल्ट रूप से सोर्स मैप शामिल होते हैं. अन्य लोगों को अतिरिक्त जानकारी की ज़रूरत पड़ सकती है कॉन्फ़िगरेशन:
/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */
export default defineConfig({
build: {
sourcemap: true, // enable production source maps
},
css: {
devSourcemap: true // enable CSS source maps during development
}
})
सोर्स मैप को समझना
डीबग करने में मदद करने के लिए, इन सोर्स मैप फ़ाइलों में ज़रूरी जानकारी शामिल होती है कंपाइल किया गया कोड, ओरिजनल कोड से कैसे मैप होता है. यहां एक उदाहरण दिया गया है, सोर्स मैप:
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}
इनमें से हर फ़ील्ड को समझने के लिए, सोर्स मैप स्पेसिफ़िकेशन या सोर्स मैप की बनावट.
सोर्स मैप का सबसे अहम हिस्सा mappings फ़ील्ड होता है. यह
वीएलक्यू बेस 64 के लिए कोड में बदली गई स्ट्रिंग
कंपाइल की गई फ़ाइल में लाइनों और जगहों की जानकारी को संबंधित ओरिजनल फ़ाइल से मैप करने के लिए
फ़ाइल से लिए जाते हैं. सोर्स मैप विज़ुअलाइज़र का इस्तेमाल करके, इस मैपिंग को देखा जा सकता है, जैसे
source-map-visualization या
सोर्स मैप विज़ुअलाइज़ेशन.
बाईं ओर मौजूद जनरेट किए गए कॉलम में कंप्रेस किया गया कॉन्टेंट दिखता है. साथ ही, original कॉलम में ओरिजनल सोर्स दिखता है.
विज़ुअलाइज़र, ओरिजनल कॉलम की हर लाइन को इसके साथ अलग-अलग कलर-कोड करता है: जनरेट किए गए कॉलम में संबंधित कोड.
मैपिंग सेक्शन, कोड की डिकोड की गई मैपिंग दिखाता है. उदाहरण के लिए,
एंट्री 65 -> 2:2 का मतलब है:
- जनरेट किया गया कोड: कंप्रेस की गई सामग्री में
constशब्द 65वें स्थान से शुरू होता है. - ओरिजनल कोड: ओरिजनल कॉन्टेंट की लाइन 2 और कॉलम 2 से
constशब्द शुरू होता है.
65 -> 2:2 एंट्री पर फ़ोकस करने वाला मैपिंग विज़ुअलाइज़ेशन.इससे डेवलपर, छोटे किए गए कोड के बीच के संबंध की तुरंत पहचान कर पाते हैं और ओरिजनल कोड की मदद से डीबग करने की प्रोसेस आसान हो जाती है.
ब्राउज़र डेवलपर टूल, इन सोर्स मैप का इस्तेमाल करके यह पता करते हैं कि ब्राउज़र में समस्याओं को तेज़ी से डीबग करने में मदद करता है.
सोर्स मैप एक्सटेंशन
सोर्स मैप में, ऐसे कस्टम एक्सटेंशन फ़ील्ड काम करते हैं जो x_ प्रीफ़िक्स से शुरू होते हैं. एक
उदाहरण के लिए, Chrome का सुझाया गया x_google_ignoreList एक्सटेंशन फ़ील्ड
DevTools. x_google_ignoreList देखें
देखें कि ये एक्सटेंशन आपको अपने कोड पर फ़ोकस करने में कैसे मदद करते हैं.
सोर्स मैप की कमियां
माफ़ करें, सोर्स मैपिंग उतनी सटीक नहीं होती जितनी आपको चाहिए.
हमारे पहले उदाहरण में, वैरिएबल greet को बिल्ड के दौरान ऑप्टिमाइज़ किया गया था
प्रोसेस हो, भले ही उसकी वैल्यू सीधे फ़ाइनल स्ट्रिंग आउटपुट में एम्बेड की गई हो.
greet वैरिएबल
मैपिंग में कोड मौजूद नहीं है.इस मामले में, कोड को डीबग करने पर, हो सकता है कि डेवलपर टूल ये काम न कर पाएं असल वैल्यू का अनुमान लगाएं और उसे दिखाएं. इस तरह की गड़बड़ी आपका कोड बना सकती है और विश्लेषण करना कठिन हो जाता है.
greet के लिए कोई वैल्यू नहीं मिली.यह एक ऐसी समस्या है जिसे सोर्स मैप के अंदर हल करना होगा. एक इसका मतलब है कि सोर्स मैप में दायरे की जानकारी को जिस तरह अन्य प्रोग्रामिंग भाषाएं अपनी डीबग जानकारी के साथ करती हैं.
हालांकि, इसके लिए पूरे नेटवर्क को साथ मिलकर काम करना होगा, ताकि सोर्स मैप की जानकारी और उसे लागू करना. आगे दी गई चीज़ों को फ़ॉलो करने के लिए, सोर्स मैप की मदद से डीबग करने की क्षमता बेहतर बनाना, इसके लिए प्रस्ताव देखें सोर्स Maps v4 GitHub पर.