सोर्स मैप, आधुनिक वेब डेवलपमेंट में एक अहम टूल हैं. इनकी मदद से, डीबग करना काफ़ी आसान हो जाता है. इस पेज पर, सोर्स मैप की बुनियादी बातों के बारे में बताया गया है. साथ ही, यह भी बताया गया है कि ये कैसे जनरेट होते हैं और ये डीबग करने के अनुभव को कैसे बेहतर बनाते हैं.
सोर्स मैप की ज़रूरत
शुरुआती वेब ऐप्लिकेशन कम जटिल थे. डेवलपर ने एचटीएमएल, सीएसएस, और 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वें स्थान पर शुरू होता है. - ओरिजनल कोड: ओरिजनल कॉन्टेंट की लाइन 2 और कॉलम 2 से
const
शब्द शुरू होता है.
इससे डेवलपर, छोटे किए गए कोड और मूल कोड के बीच के संबंध की तुरंत पहचान कर सकते हैं. इससे, डीबग करने की प्रोसेस आसान हो जाती है.
ब्राउज़र डेवलपर टूल, इन सोर्स मैप को लागू करते हैं, ताकि ब्राउज़र में डीबग करने से जुड़ी समस्याओं का तुरंत पता लगाया जा सके.
सोर्स मैप एक्सटेंशन
सोर्स मैप में, ऐसे कस्टम एक्सटेंशन फ़ील्ड काम करते हैं जो x_
प्रीफ़िक्स से शुरू होते हैं. एक उदाहरण, Chrome DevTools का सुझाया गया x_google_ignoreList
एक्सटेंशन फ़ील्ड है. इन एक्सटेंशन से, कोड पर फ़ोकस करने में कैसे मदद मिलती है, इस बारे में ज़्यादा जानने के लिए x_google_ignoreList देखें.
सोर्स मैप की कमियां
माफ़ करें, सोर्स मैपिंग हमेशा पूरी नहीं होतीं.
हमारे पहले उदाहरण में, वैरिएबल greet
को बिल्ड करने की प्रोसेस के दौरान ऑप्टिमाइज़ कर दिया गया था. भले ही, इसकी वैल्यू को सीधे फ़ाइनल स्ट्रिंग आउटपुट में एम्बेड किया गया हो.
इस मामले में, कोड को डीबग करने पर, हो सकता है कि डेवलपर टूल, असल वैल्यू का पता न लगा पाएं और उसे न दिखा पाएं. इस तरह की गड़बड़ी की वजह से, आपके कोड को मॉनिटर करना और उसका विश्लेषण करना मुश्किल हो सकता है.
यह एक ऐसी समस्या है जिसे सोर्स मैप के डिज़ाइन में हल करना होगा. एक संभावित समाधान यह है कि सोर्स मैप में स्कोप की जानकारी को उसी तरह शामिल किया जाए जिस तरह अन्य प्रोग्रामिंग भाषाएं अपनी डीबग जानकारी के साथ करती हैं.
हालांकि, इसके लिए पूरे नेटवर्क को साथ मिलकर काम करने की ज़रूरत है, ताकि सोर्स मैप की स्पेसिफ़िकेशन और लागू करने की प्रक्रिया को बेहतर बनाया जा सके. सोर्स मैप की मदद से डीबग करने की प्रोसेस को बेहतर बनाने के लिए, GitHub पर Source Maps v4 का प्रस्ताव देखें.