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

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 इस जानकारी को लागू करके, उन फ़ाइलों से फ़्रेम छिपाने के लिए करता है जिन्हें अनदेखा किया गया है.

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

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

पर्दे के पीछे, 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 के कॉन्टेंट को "डीबगर की ओर से अनदेखा किया जाना" के तौर पर मार्क किया गया है.

ऐसा Vte और 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 टीमों का फिर से धन्यवाद!

ऐंग्युलर में `ignoreList`

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

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

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

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

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

ignoreList क्या है?

ignoreList में जानकारी अपने-आप भरने का तरीका