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

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

लॉग ढूंढना

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

बैकग्राउंड स्क्रिप्ट

chrome://extensions पर जाकर, Chrome के एक्सटेंशन मैनेज करने वाला पेज खोलें और पक्का करें कि डेवलपर मोड चालू हो. अनपैक किया गया लोड करें बटन पर क्लिक करें और खराब हो चुके एक्सटेंशन की डायरेक्ट्री चुनें. एक्सटेंशन लोड होने के बाद, इसमें तीन बटन दिखने चाहिए: जानकारी, हटाएं, और लाल रंग में गड़बड़ियां.

गड़बड़ी का लॉग देखने के लिए, गड़बड़ियां बटन पर क्लिक करें. एक्सटेंशन सिस्टम को बैकग्राउंड स्क्रिप्ट में कोई समस्या मिली है.

Uncaught TypeError: Cannot read property 'addListener' of undefined

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

कोड पर वापस जाएं.

chrome.runtime.oninstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

बैकग्राउंड स्क्रिप्ट, onInstalled इवेंट को सुनने की कोशिश कर रही है. हालांकि, प्रॉपर्टी के नाम में "I" अपर केस में होना चाहिए. सही कॉल दिखाने के लिए, कोड को अपडेट करें. इसके बाद, सबसे ऊपर दाएं कोने में मौजूद सभी साफ़ करें बटन पर क्लिक करें. फिर, एक्सटेंशन को फिर से लोड करें.

पॉप-अप

अब एक्सटेंशन सही तरीके से शुरू हो रहा है, इसलिए इसके अन्य कॉम्पोनेंट की जांच की जा सकती है. इस पेज को रीफ़्रेश करें या नया टैब खोलें. इसके बाद, developer.chrome.com पर किसी भी पेज पर जाएं. फिर, पॉप-अप खोलें और हरे रंग के स्क्वेयर पर क्लिक करें. और... कुछ नहीं होता.

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

Uncaught ReferenceError: tabs is not defined

पॉप-अप की जांच करके भी, पॉप-अप से जुड़ी गड़बड़ियां देखी जा सकती हैं.

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

  let changeColor = document.getElementById('changeColor');

  chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
  });

  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = color;'});
    });
  };

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

कॉन्टेंट स्क्रिप्ट

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

उस वेब पेज का DevTools पैनल खोलें जिसमें एक्सटेंशन बदलाव करने की कोशिश कर रहा है.

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

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

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

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

एक्सटेंशन टैब

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

नेटवर्क से जुड़े अनुरोधों की निगरानी करना

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

अनुमतियां तय करना

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

  {
    "name": "Broken Background Color",
    "version": "1.0",
    "description": "Fix an Extension!",
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
    "options_page": "options.html",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

अगले चरण

एक्सटेंशन को डीबग करने के बारे में ज़्यादा जानकारी के लिए, डेवलपमेंट और डीबग करना वीडियो देखें. दस्तावेज़ पढ़कर, Chrome Devtools के बारे में ज़्यादा जानें.