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

एक्सटेंशन, वेब पेजों के लिए 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 पैनल को बंद किए बिना पॉप-अप फिर से लोड हो जाएगा.

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

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

  {
    "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 के बारे में ज़्यादा जानें.