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

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

Jecelyn Yeen

Chrome DevTools, सोर्स मैप में ignoreList फ़ील्ड को पार्स करता है, ताकि डेवलपर को डीबग करने में आसानी हो. कंसोल में, यहां दिया गया स्टैक ट्रेस देखें. 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, तीसरे पक्ष की स्क्रिप्ट हैं. इसलिए, sources फ़ील्ड में उनकी पोज़िशन दिखाने के लिए, ignoreList फ़ील्ड की जानकारी दी जा सकती है. Chrome DevTools, इस जानकारी को लागू करके, अनदेखी की गई फ़ाइलों से फ़्रेम छिपा देगा.

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

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

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

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

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

`ignoreList` को पॉप्युलेट करने का तरीका

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

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

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

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

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

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

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

नीचे दी गई दो केस स्टडी पर नज़र डालें.

नक्सट में `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 मॉड्यूल में हुक करने वाला प्लग इन बनाया गया.

हमारे इंजीनियरों ने PROCESS_ASSETS_STAGE_DEV_TOOLING चरण में webpack प्लग इन बनाया है. यह सोर्स मैप में 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 में ऐंग्युलर डीबगिंग के अन्य सुधारों के बारे में ज़्यादा जानने के लिए, केस स्टडी: DevTools की मदद से बेहतर ऐंग्युलर डीबगिंग लेख देखें.

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

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

ignoreList क्या है?

ignoreList को पॉप्युलेट करने का तरीका