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

एक्सटेंशन भी उसी 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() पर कॉल करें. इसके बाद, 'चालू है' टैब को चुनें.

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

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

आइए, अब वैरिएबल "रंग" को बदलकर कॉन्टेंट स्क्रिप्ट को तोड़ते हैं "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 देखें APIs से यह पक्का किया जा सकता है कि कोई एक्सटेंशन, मेनिफ़ेस्ट में सही अनुमतियों का अनुरोध कर रहा है.

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

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

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