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

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 और नक्स्ट ने पर्दे के पीछे इसे कैसे किया.

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

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

इसके अलावा, मिलता-जुलता नतीजा पाने के लिए, सीधे 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 की टीमों को एक बार फिर से धन्यवाद!

एंगुलर में `ignoreList`

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

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

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

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 को भरने का तरीका