अनदेखा करने के लिए सूची स्रोत मैप एक्सटेंशन

ignoreList सोर्स मैप एक्सटेंशन की मदद से, Chrome DevTools में डीबग करने का अनुभव बेहतर बनाएं.

Jecelyn Yeen

Chrome DevTools, सोर्स मैप में मौजूद ignoreList फ़ील्ड को पार्स करता है, ताकि डेवलपर को डीबग करने का बेहतर अनुभव मिल सके. Console में यहां दिया गया स्टैक ट्रेस देखें. DevTools, तीसरे पक्ष के सभी फ़्रेम अपने-आप छिपा देता है. साथ ही, सिर्फ़ वे फ़्रेम दिखाता है जो आपके कोड के लिए काम के हैं.

स्टैक ट्रेस के नतीजों की तुलना.
इस इमेज में, Chrome DevTools में ignoreList के लिए सहायता मिलने से पहले और बाद के स्टैक ट्रेस दिखाए गए हैं. दूसरा विकल्प, तीसरे पक्ष के ऐसे फ़्रेम छिपा देता है जो काम के नहीं हैं. इससे आपको डीबग करने के दौरान, समस्याओं का पता लगाने में मदद मिलती है.

ignoreList क्या है?

सोर्स मैप एक्सटेंशन, अतिरिक्त फ़ील्ड होते हैं. इनमें सोर्स मैप के बारे में ज़्यादा जानकारी सेव की जाती है. ऐसे फ़ील्ड के नाम के आगे x_ लगा होता है.

Chrome DevTools, जनरेट किए गए कोड को फ़िल्टर करने के लिए ignoreList फ़ील्ड (अगर दिया गया हो) का इस्तेमाल करता है. इससे वेब डेवलपर सिर्फ़ अपने लिखे गए कोड पर फ़ोकस कर पाते हैं. उदाहरण के लिए, यहां दिया गया सोर्स मैप देखें.

/* demo.js.map */

{
  "version": 3,
  "mappings": "AAAAA, ..."
  "sources": [
    "app.js",
    "components/Button.ts",
    "node_modules/.../framework.js",
    "node_modules/.../library.js",
    ...
  ],
  "ignoreList": [2, 3],
  ...
}

sources फ़ील्ड में, उन ओरिजनल सोर्स की सूची दिखती है जिनका इस्तेमाल mappings एंट्री ने किया है. मैपिंग के काम करने का तरीका जानने के लिए, सोर्स मैप क्या होते हैं? वीडियो देखें.

मान लें कि दो फ़ाइलें node_modules/…/frameworks.js और node_modules/.../library.js, तीसरे पक्ष की स्क्रिप्ट हैं. ऐसे में, ignoreList फ़ील्ड का इस्तेमाल करके, sources फ़ील्ड में उनकी पोज़िशन बताई जा सकती है. Chrome DevTools इस जानकारी का इस्तेमाल करके, अनदेखा की गई फ़ाइलों के फ़्रेम छिपा देगा.

छोटे और बड़े किए गए स्टैक ट्रेस की तुलना.
इस इमेज में, Console में स्टैक ट्रेस को बड़ा करने से पहले और बाद के स्टैक ट्रेस दिखाए गए हैं. नज़रअंदाज़ किए गए फ़्रेम को बड़ा करने पर, वे धूसर रंग में दिखते हैं.

यह बात ब्रेकपॉइंट डीबगिंग के दौरान, सोर्स पैनल में मौजूद कॉल स्टैक पर भी लागू होती है.

पर्दे के पीछे, DevTools में, डिफ़ॉल्ट रूप से एक अतिरिक्त सेटिंग चालू होती है: तीसरे पक्ष की जानी-पहचानी स्क्रिप्ट को, नज़रअंदाज़ किए जाने वाले कोड की सूची में अपने-आप जोड़ें. इसे DevTools > सेटिंग > नज़रअंदाज़ किए जाने वाले कोड की सूची में जाकर देखा जा सकता है.

ignoreList सोर्स मैप फ़ील्ड की मदद से, सोर्स पैनल में अनदेखा की गई फ़ाइलों को छिपाने का विकल्प मिलता है. इससे आपको अपने कोड पर फ़ोकस करने में मदद मिलती है.

नज़रअंदाज़ किए जाने वाले कोड की सूची में शामिल सोर्स पैनल छिपाएं.

ignoreList को भरने का तरीका

अच्छी बात यह है कि Angular और Nuxt जैसे फ़्रेमवर्क, अपने सोर्स मैप में ignoreList को पहले से ही कॉन्फ़िगर कर लेते हैं. नए वर्शन में अपग्रेड करें. यह अपने-आप काम करने लगता है. आपको स्टैक ट्रेस में आसानी से सुधार करने की सुविधा मिलती है.

दूसरी ओर, Vite और Rollup जैसे बिल्ड टूल, इसे कॉन्फ़िगर करने के लिए सेटिंग उपलब्ध कराते हैं. इसके लिए, webpack प्लग इन भी है.

अगर आप फ़्रेमवर्क या लाइब्रेरी के रखरखाव की ज़िम्मेदारी संभालते हैं, तो यह समझना ज़रूरी है कि इन सेटिंग को कैसे लागू किया जाए. इससे आपके उपयोगकर्ताओं को डीबग करने का बेहतर अनुभव मिलेगा. यहां दिए गए सेक्शन में देखें कि Angular और Nuxt ने पर्दे के पीछे कैसे काम किया.

अगर आपका पसंदीदा फ़्रेमवर्क और बिल्ड टूल अब तक इसे सपोर्ट नहीं करता है, तो क्या होगा?

हम फ़्रेमवर्क और बिल्ड टूल के साथ मिलकर काम करते हैं, ताकि इन नई सेटिंग को लागू किया जा सके. इस सुविधा के बारे में मेंटेनर को बताकर भी मदद की जा सकती है. उदाहरण के लिए, उनकी रिपॉज़िटरी में समस्या की शिकायत की जा सकती है.

इसके अलावा, DevTools > सोर्स > पेज पैनल पर मौजूद फ़ाइल ट्री से, नज़रअंदाज़ किए जाने वाले कोड की सूची में काम की न होने वाली स्क्रिप्ट को मैन्युअल तरीके से जोड़ा जा सकता है. इससे भी आपको ऐसा ही नतीजा मिलेगा.

केस स्टडी: Nuxt और Angular को लागू करना

यहां दी गई दो केस स्टडी देखें.

Nuxt में ignoreList

Nuxt v3.3.1 से, node_modules और Nuxt buildDir के कॉन्टेंट को "डीबगर को अनदेखा करना है" के तौर पर मार्क किया गया है.

ऐसा Vite और Rollup का इस्तेमाल करके, Nuxt के बिल्ड कॉन्फ़िगरेशन में बदलाव करके किया गया:

/* vite.config.ts */

const ctx: ViteBuildContext = {
  config: vite.mergeConfig(
  build: {
    rollupOptions: {
      output: {
        sourcemapIgnoreList: (relativeSourcePath) => {
          return relativeSourcePath.includes('/node_modules/') || relativeSourcePath.includes(ctx.nuxt.options.buildDir)
        },
      }
})

DevTools की टीम, Vite और Nuxt की टीमों को धन्यवाद देना चाहती है. उनकी मदद से ही यह सुविधा उपलब्ध हो पाई है. हम आपकी कोशिशों और सहयोग की सराहना करते हैं. इस बदलाव को लागू करने के लिए, ये ज़रूरी थे. योगदान देने के लिए, Vite और Nuxt की टीमों को फिर से धन्यवाद!

Angular में ignoreList

Angular v14.1.0 से, node_modules और webpack फ़ोल्डर के कॉन्टेंट को "नज़रअंदाज़ करने के लिए" के तौर पर मार्क किया गया है.

इसके लिए, angular-cli में बदलाव किया गया. इसके लिए, एक प्लगिन बनाया गया, जो webpack के Compiler मॉड्यूल से जुड़ता है.

हमारे इंजीनियर ने जो webpack प्लग इन बनाया है वह PROCESS_ASSETS_STAGE_DEV_TOOLING स्टेज में हुक करता है. साथ ही, सोर्स मैप में ignoreList फ़ील्ड को उन फ़ाइनल ऐसेट से भरता है जिन्हें webpack जनरेट करता है और ब्राउज़र लोड करता है.

const map = JSON.parse(mapContent) as SourceMap;
const ignoreList = [];

for (const [index, path] of map.sources.entries()) {
  if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
    ignoreList.push(index);
  }
}

map[`ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));

DevTools में Angular डीबगिंग से जुड़े अन्य सुधारों के बारे में ज़्यादा जानने के लिए, केस स्टडी: DevTools की मदद से Angular डीबगिंग को बेहतर बनाना लेख पढ़ें.

Chrome DevTools की टीम, Angular की टीम को धन्यवाद देना चाहती है. इस सुविधा को लागू करने में, Angular की टीम ने अहम योगदान दिया है. आपकी मेहनत और सहयोग हमारे लिए बहुत ज़रूरी था. हम आपकी कड़ी मेहनत की सराहना करते हैं. इसे मुमकिन बनाने के लिए, Angular टीम को धन्यवाद!