एक्सटेंशन डीबग करने की उन सुविधाओं का फ़ायदा उठा सकते हैं जो 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 पैनल को बंद किए बिना, पॉप-अप को फिर से लोड करेगा.
अनुमतियों का एलान करें
एक्सटेंशन की क्षमताएं वेब पेजों जैसी ही होती हैं, लेकिन उन्हें कुछ सुविधाओं का इस्तेमाल करने के लिए अक्सर अनुमति की ज़रूरत होती है. जैसे, कुकी, स्टोरेज, और क्रॉस-ऑरिजिन XMLHttpRequsts. यह पक्का करने के लिए कि कोई एक्सटेंशन अपने मेनिफ़ेस्ट में सही अनुमतियों का अनुरोध कर रहा है, अनुमतियों से जुड़ा लेख और उपलब्ध Chrome API देखें.
{
"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 के बारे में ज़्यादा जानें.