सोर्स मैप, आधुनिक वेब डेवलपमेंट में एक अहम टूल है. इसकी मदद से, डीबग करने की प्रोसेस काफ़ी आसान हो जाती है. इस पेज पर, सोर्स मैप की बुनियादी बातों के बारे में बताया गया है. साथ ही, यह भी बताया गया है कि ये कैसे जनरेट होते हैं और डीबग करने के अनुभव को कैसे बेहतर बनाते हैं.
सोर्स मैप की ज़रूरत
शुरुआती वेब ऐप्लिकेशन को कम जटिलता के साथ बनाया गया था. डेवलपर ने एचटीएमएल, सीएसएस, और JavaScript फ़ाइलों को सीधे वेब पर डिप्लॉय किया.
ज़्यादा आधुनिक और जटिल वेब ऐप्लिकेशन के डेवलपमेंट वर्कफ़्लो में, कई तरह के टूल की ज़रूरत पड़ सकती है. उदाहरण के लिए:
- टेंप्लेट बनाने वाली भाषाएं और एचटीएमएल प्रीप्रोसेसर: Pug, Nunjucks, Markdown.
- सीएसएस प्रीप्रोसेसर: SCSS, LESS, PostCSS.
- JavaScript फ़्रेमवर्क: Angular, React, Vue, Svelte.
- JavaScript मेटा फ़्रेमवर्क: Next.js, Nuxt, Astro.
- हाई-लेवल प्रोग्रामिंग भाषाएं: TypeScript, Dart, CoffeeScript.
इन टूल को आपके कोड को स्टैंडर्ड एचटीएमएल, JavaScript, और सीएसएस में ट्रांसपाइल करने के लिए, बिल्ड प्रोसेस की ज़रूरत होती है, ताकि ब्राउज़र उसे समझ सकें. Terser जैसे टूल का इस्तेमाल करके, इन फ़ाइलों को छोटा करके और उन्हें आपस में जोड़कर, परफ़ॉर्मेंस को ऑप्टिमाइज़ करना भी आम बात है.
उदाहरण के लिए, बिल्ड टूल का इस्तेमाल करके, यहां दी गई TypeScript फ़ाइल को ट्रांसपाइल और कंप्रेस करके, JavaScript की एक लाइन में बदला जा सकता है. इसे खुद आज़माने के लिए, 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, Rollup, Parcel, और 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 फ़ील्ड होता है. यह VLQ Base 64 एन्कोड की गई स्ट्रिंग का इस्तेमाल करके, संकलित की गई फ़ाइल में मौजूद लाइनों और जगहों को उससे जुड़ी मूल फ़ाइल से मैप करता है. source-map-visualization या Source Map Visualization जैसे सोर्स मैप विज़ुअलाइज़र का इस्तेमाल करके, इस मैपिंग को देखा जा सकता है.
बाईं ओर मौजूद जनरेट किया गया कॉलम, कॉम्प्रेस किया गया कॉन्टेंट दिखाता है. वहीं, ओरिजनल कॉलम, ओरिजनल सोर्स दिखाता है.
विज़ुअलाइज़र, ओरिजनल कॉलम की हर लाइन को जनरेट किए गए कॉलम में मौजूद उससे जुड़े कोड के साथ कलर-कोड करता है.
मैपिंग सेक्शन में, कोड की डिकोड की गई मैपिंग दिखती हैं. उदाहरण के लिए, 65 -> 2:2 एंट्री का मतलब है:
- जनरेट किया गया कोड: कंप्रेस किए गए कॉन्टेंट में,
constशब्द 65वें स्थान पर शुरू होता है. - ओरिजनल कोड: ओरिजनल कॉन्टेंट में,
constशब्द लाइन 2 और कॉलम 2 से शुरू होता है.
65 -> 2:2 एंट्री पर फ़ोकस करने वाला मैपिंग विज़ुअलाइज़ेशन.इससे डेवलपर, छोटे किए गए कोड और मूल कोड के बीच के संबंध की तुरंत पहचान कर सकते हैं. इससे डीबग करने की प्रोसेस आसान हो जाती है.
ब्राउज़र डेवलपर टूल, इन सोर्स मैप को लागू करते हैं, ताकि ब्राउज़र में डीबग करने से जुड़ी समस्याओं का तुरंत पता लगाया जा सके.
सोर्स मैप एक्सटेंशन
सोर्स मैप, x_ प्रीफ़िक्स से शुरू होने वाले कस्टम एक्सटेंशन फ़ील्ड के साथ काम करते हैं. एक उदाहरण, Chrome DevTools के सुझाए गए x_google_ignoreList एक्सटेंशन फ़ील्ड का है. इन एक्सटेंशन से, कोड पर फ़ोकस करने में कैसे मदद मिलती है, इस बारे में ज़्यादा जानने के लिए x_google_ignoreList देखें.
सोर्स मैप की कमियां
माफ़ करें, सोर्स मैपिंग हमेशा पूरी नहीं होतीं.
हमारे पहले उदाहरण में, वैरिएबल greet को बिल्ड करने की प्रोसेस के दौरान ऑप्टिमाइज़ कर दिया गया था. भले ही, इसकी वैल्यू को सीधे तौर पर फ़ाइनल स्ट्रिंग आउटपुट में एम्बेड किया गया हो.
greet वैरिएबल, मैपिंग में मौजूद नहीं है.इस मामले में, कोड को डीबग करने पर हो सकता है कि डेवलपर टूल, असल वैल्यू का अनुमान न लगा पाएं और न ही उसे दिखा पाएं. इस तरह की गड़बड़ी की वजह से, आपके कोड की निगरानी करना और उसका विश्लेषण करना मुश्किल हो सकता है.
greet की वैल्यू नहीं मिली.यह एक ऐसी समस्या है जिसे सोर्स मैप के डिज़ाइन में हल करना होगा. एक संभावित समाधान यह है कि सोर्स मैप में स्कोप की जानकारी को उसी तरह शामिल किया जाए जिस तरह अन्य प्रोग्रामिंग भाषाएं अपनी डीबग जानकारी के साथ करती हैं.
हालांकि, सोर्स मैप की विशेषताओं और उसे लागू करने के तरीके को बेहतर बनाने के लिए, पूरे नेटवर्क को एक साथ काम करना होगा. सोर्स मैप की मदद से, डीबग करने की सुविधा को बेहतर बनाने के लिए, GitHub पर सोर्स मैप v4 के प्रस्ताव को देखें.