डीबग एक्सटेंशन

एक्सटेंशन, वेब पेजों की तरह ही Chrome DevTools को ऐक्सेस कर सकते हैं. एक्सटेंशन को डीबग करने में विशेषज्ञ बनने के लिए, आपके पास एक्सटेंशन के अलग-अलग कॉम्पोनेंट के लॉग और गड़बड़ियों को ढूंढने का तरीका जानना ज़रूरी है. इस ट्यूटोरियल में, एक्सटेंशन को डीबग करने की बुनियादी तकनीकें बताई गई हैं.

शुरू करने से पहले

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

एक्सटेंशन को तोड़ना

यह ट्यूटोरियल एक बार में एक एक्सटेंशन कॉम्पोनेंट को नुकसान पहुंचाएगा और उसे ठीक करने का तरीका बताएगा. अगले सेक्शन में जाने से पहले, किसी एक सेक्शन में बताई गई गड़बड़ियों को पहले जैसा करना न भूलें. GitHub पर ब्रोकन कलर सैंपल डाउनलोड करें.

मेनिफ़ेस्ट को डीबग करें

सबसे पहले, "version" कुंजी को "versions" में बदलकर मेनिफ़ेस्ट फ़ाइल को ब्रेक करेंगे:

manifest.json:

{
  "name": "Broken Background Color",
  "version": "1.0",
  "versions": "1.0",
  "description": "Fix an Extension!",
  ...
}

अब एक्सटेंशन को स्थानीय तौर पर लोड करने की कोशिश करते हैं. आपको गड़बड़ी की जानकारी देने वाला डायलॉग बॉक्स दिखेगा:

Failed to load extension
Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.
Could not load manifest.

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

उस बदलाव को पहले जैसा करें. साथ ही, गलत अनुमति देकर देखें कि क्या होता है. "activeTab" की अनुमति को अंग्रेज़ी के छोटे अक्षरों "activetab" में बदलें:

manifest.json:

{
  ...
  "permissions": ["activeTab", "scripting", "storage"],
  "permissions": ["activetab", "scripting", "storage"],
  ...
}

एक्सटेंशन सेव करें और इसे फिर से लोड करके देखें. इस बार यह लोड हो जाना चाहिए. एक्सटेंशन मैनेजमेंट पेज में आपको तीन बटन दिखेंगे: ब्यौरा, हटाएं, और गड़बड़ियां. कोई गड़बड़ी होने पर, गड़बड़ियां बटन का लेबल लाल रंग का हो जाता है. गड़बड़ियां बटन पर क्लिक करके नीचे दी गई गड़बड़ियां देखें:

Permission 'activetab' is unknown or URL pattern is malformed.

आगे बढ़ने से पहले, अनुमति को बदलें और लॉग मिटाने के लिए, ऊपर दाएं कोने में मौजूद सभी हटाएं पर क्लिक करें. इसके बाद, एक्सटेंशन को फिर से लोड करें.

सर्विस वर्कर को डीबग करना

लॉग का पता लगाया जा रहा है

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

गड़बड़ियों का पता लगाना

onInstalled को लोअरकेस oninstalled में बदलकर सर्विस वर्कर को ब्रेक करें:

service-worker.js:

// There's a typo in the line below;
// ❌ oninstalled should be ✅ onInstalled.
chrome.runtime.onInstalled.addListener(() => { 
chrome.runtime.oninstalled.addListener(() => { 
  chrome.storage.sync.set({ color: '#3aa757' }, () => {
    console.log('The background color is green.');
  });
});

गड़बड़ी का लॉग देखने के लिए, रीफ़्रेश करें और गड़बड़ियां पर क्लिक करें. पहली गड़बड़ी आपको बताती है कि सर्विस वर्कर रजिस्टर नहीं हुआ. इसका मतलब है कि शुरुआत करने के दौरान कोई गड़बड़ी हुई:

Service worker registration failed. Status code: 15.

असल गड़बड़ी इसके बाद आती है:

Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

हमने जो गड़बड़ी ठीक की थी उसे पहले जैसा करें. साथ ही, ऊपर दाएं कोने में मौजूद सभी मिटाएं पर क्लिक करें. इसके बाद, एक्सटेंशन को फिर से लोड करें.

सर्विस वर्कर की स्थिति देखना

आप नीचे दिए गए चरणों का पालन करके यह पहचान कर सकते हैं कि सर्विस वर्कर काम करने के लिए कब जागता है:

1. "व्यू की जांच करें" के ऊपर मौजूद अपना एक्सटेंशन आईडी कॉपी करें.

   

2. ब्राउज़र में अपनी मेनिफ़ेस्ट फ़ाइल खोलें. उदाहरण के लिए: text chrome-extension://YOUR_EXTENSION_ID/manifest.json
3. फ़ाइल की जांच करें.
4. ऐप्लिकेशन पैनल पर जाएं.
5. सर्विस वर्कर पैनल पर जाएं.

अपने कोड की जांच करने के लिए, स्थिति के आगे दिए गए लिंक से सर्विस वर्कर को शुरू या बंद करें.

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

पॉप-अप को डीबग करें

एक्सटेंशन अब सही तरीके से शुरू हो जाता है, तो आइए नीचे दी गई हाइलाइट की गई लाइनों पर टिप्पणी करके पॉप-अप को ब्रेक करें:

popup.js:

...
changeColorButton.addEventListener('click', (event) => {
  const color = event.target.value;

  // Query the active tab before injecting the content script
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { 
    // Use the Scripting API to execute a script
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      args: [color],
      func: setColor
    });
  });
});

एक्सटेंशन मैनेजमेंट पेज पर वापस जाएं. गड़बड़ियां बटन फिर से दिखने लगता है. नया लॉग देखने के लिए इस पर क्लिक करें. इसमें गड़बड़ी का यह मैसेज दिखता है:

Uncaught ReferenceError: tabs is not defined

पॉप-अप की जांच करके, उसका DevTools खोला जा सकता है.

गड़बड़ी tabs is undefined का कहना है कि एक्सटेंशन को यह नहीं पता कि कॉन्टेंट स्क्रिप्ट को कहां इंजेक्ट करना है. इसे ठीक करने के लिए, tabs.query() पर कॉल करें और फिर ऐक्टिव टैब को चुनें.

कोड अपडेट करने के लिए, ऊपर दाएं कोने में मौजूद सभी मिटाएं बटन पर क्लिक करें. इसके बाद, एक्सटेंशन को फिर से लोड करें.

कॉन्टेंट स्क्रिप्ट डीबग करें

आइए, अब वैरिएबल "color" को "colors" में बदलकर कॉन्टेंट स्क्रिप्ट को बदलते हैं:

content.js:

...
function setColor(color) {
  // There's a typo in the line below;
  // ❌ colors should be ✅ color.
  document.body.style.backgroundColor = color;
  document.body.style.backgroundColor = colors;
}  

पेज को रीफ़्रेश करें, पॉप-अप खोलें और हरे बॉक्स पर क्लिक करें. कुछ नहीं होगा.

अगर आप एक्सटेंशन मैनेजमेंट पेज पर जाते हैं, तो गड़बड़ियां बटन नहीं दिखता है. इसकी वजह यह है कि एक्सटेंशन मैनेजमेंट पेज पर सिर्फ़ रनटाइम की गड़बड़ियां, console.warning, और console.error रिकॉर्ड की जाती हैं.

कॉन्टेंट स्क्रिप्ट वेबसाइट के अंदर चलती हैं. इन गड़बड़ियों को ढूंढने के लिए हमें उस वेब पेज की जांच करनी होगी जिसे एक्सटेंशन बदलने की कोशिश कर रहा है:

Uncaught ReferenceError: colors is not defined

कॉन्टेंट स्क्रिप्ट में से DevTools का इस्तेमाल करने के लिए, सबसे ऊपर के बगल में मौजूद ड्रॉपडाउन ऐरो पर क्लिक करें और एक्सटेंशन चुनें.

गड़बड़ी का मैसेज है कि colors के बारे में नहीं बताया गया है. एक्सटेंशन को वैरिएबल को सही तरीके से पास नहीं करना चाहिए. कलर वैरिएबल को कोड में भेजने के लिए, इंजेक्ट की गई स्क्रिप्ट में सुधार करें.

नेटवर्क अनुरोधों पर नज़र रखना

अक्सर, पॉप-अप, नेटवर्क के सभी ज़रूरी अनुरोध करता है. डेवलपर, डेवलपर के DevTools खोलने से पहले ही ऐसा कर देते हैं. इन अनुरोधों को देखने के लिए, नेटवर्क पैनल के अंदर से रीफ़्रेश करें. यह DevTools पैनल बंद किए बिना, पॉप-अप को फिर से लोड करता है.

अनुमतियों का एलान करें

कुछ एक्सटेंशन एपीआई को अनुमतियों की ज़रूरत होती है. यह पक्का करने के लिए कि कोई एक्सटेंशन मेनिफ़ेस्ट में सही अनुमतियों का अनुरोध कर रहा है, अनुमतियां लेख और Chrome एपीआई देखें.

  {
    "name": "Broken Background Color",
    ...
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
  ...
  }

इसके बारे में और पढ़ें

इस दस्तावेज़ को पढ़कर, Chrome Devtools के बारे में ज़्यादा जानें.