DevTools एक्सटेंशन, Chrome DevTools में सुविधाएं जोड़ते हैं. इसके लिए, वे एक्सटेंशन में जोड़े गए DevTools पेज के ज़रिए, DevTools के लिए बने खास एक्सटेंशन एपीआई ऐक्सेस करते हैं.
DevTools के लिए बने खास एक्सटेंशन एपीआई में ये शामिल हैं:
DevTools पेज
जब DevTools विंडो खुलती है, तो DevTools एक्सटेंशन, अपने DevTools पेज का एक इंस्टेंस बनाता है. यह इंस्टेंस, विंडो के खुले रहने तक मौजूद रहता है. इस पेज के पास, DevTools एपीआई और एक्सटेंशन एपीआई का ऐक्सेस होता है. साथ ही, यह ये काम कर सकता है:
devtools.panelsएपीआई का इस्तेमाल करके पैनल बनाना और उनसे इंटरैक्ट करना. इनमें, DevTools विंडो में अन्य एक्सटेंशन पेजों को पैनल या साइडबार के तौर पर जोड़ना शामिल है.- `devtools.inspectedWindow`
devtools.inspectedWindowएपीआई का इस्तेमाल करके, जांच की जा रही विंडो के बारे में जानकारी पाना और उसमें मौजूद कोड की जांच करना. devtools.networkएपीआई का इस्तेमाल करके, नेटवर्क के अनुरोधों के बारे में जानकारी पाना.- रिकॉर्डर पैनल को
devtools.recorderएपीआई का इस्तेमाल करके बढ़ाना. - परफ़ॉर्मेंस पैनल की रिकॉर्डिंग की स्थिति के बारे में जानकारी पाना.
devtools.performanceएपीआई का इस्तेमाल करके.
DevTools पेज, एक्सटेंशन एपीआई को सीधे तौर पर ऐक्सेस कर सकता है. इसमें, मैसेज पास करने की सुविधा का इस्तेमाल करके, सर्विस वर्कर से कम्यूनिकेट करना शामिल है.
DevTools एक्सटेंशन बनाना
अपने एक्सटेंशन के लिए DevTools पेज बनाने के लिए, एक्सटेंशन मेनिफ़ेस्ट में devtools_page फ़ील्ड जोड़ें:
{
"name": ...
"version": "1.0",
"devtools_page": "devtools.html",
...
}
devtools_page फ़ील्ड, किसी एचटीएमएल पेज की ओर इशारा करना चाहिए. हमारा सुझाव है कि इसे किसी रिलेटिव यूआरएल का इस्तेमाल करके तय करें, क्योंकि DevTools पेज आपके एक्सटेंशन के लिए लोकल होना चाहिए.
chrome.devtools एपीआई के सदस्य, सिर्फ़ उन पेजों के लिए उपलब्ध होते हैं जो DevTools विंडो में लोड किए जाते हैं. हालांकि, यह सुविधा सिर्फ़ तब उपलब्ध होती है, जब वह विंडो खुली हो. कॉन्टेंट स्क्रिप्ट और अन्य एक्सटेंशन पेजों के पास इन एपीआई का ऐक्सेस नहीं होता.
ब्राउज़र नेमस्पेस और DevTools एक्सटेंशन
Chrome के वर्शन 152 और उसके बाद के वर्शन में, DevTools पेज वाले एक्सटेंशन, browser नेमस्पेस का इस्तेमाल कर सकते हैं.
Chrome के वर्शन 152 से पहले, browser नेमस्पेस
के बारे में बताने वाले एक्सटेंशन के लिए,
devtools_page बंद कर दिया गया था. ऑप्ट-आउट की सुविधा, पूरे एक्सटेंशन पर लागू होती थी. यह सुविधा सिर्फ़ DevTools पेज पर ही नहीं, बल्कि हर स्क्रिप्ट कॉन्टेक्स्ट पर लागू होती थी, जहां एक्सटेंशन एपीआई चलते थे.
इसकी वजह,
webextension-polyfill के साथ काम न कर पाने की समस्या थी.
Chrome 152 से पहले, chrome.devtools.* एपीआई सिर्फ़ कॉलबैक वाले थे. वे नेटिव तौर पर प्रॉमिस नहीं दिखाते थे. इसलिए, DevTools एक्सटेंशन आम तौर पर उन्हें रैप करने के लिए, पॉलीफ़िल पर निर्भर रहते थे. जब भी browser तय किया जाता है, तो पॉलीफ़िल रैप करना छोड़ देता है. ऐसा इसलिए, क्योंकि वह यह मान लेता है कि होस्ट ने पहले ही यह काम कर लिया है. अगर Chrome ने इन एक्सटेंशन के लिए browser चालू किया होता, तो पॉलीफ़िल काम नहीं करता और chrome.devtools.* कॉल, प्रॉमिस दिखाना बंद कर देते. browser को बंद रखने से, पॉलीफ़िल रैप करता रहता.
इसी ऑप्ट-आउट की वजह से, इन एक्सटेंशन के लिए Chrome 148 के मैसेजिंग एपीआई में किए गए अन्य बदलाव भी बंद हो गए थे
इन एक्सटेंशन के लिए, जिनमें
प्रॉमिस रिस्पॉन्स शामिल हैं runtime.onMessage.
जब DevTools एपीआई, नेटिव तौर पर प्रॉमिस को सपोर्ट करने लगे, तब यह पाबंदी हटा दी गई.
DevTools यूज़र इंटरफ़ेस (यूआई) एलिमेंट: पैनल और साइडबार पेन
एक्सटेंशन के सामान्य यूज़र इंटरफ़ेस (यूआई) एलिमेंट के अलावा, जैसे कि ब्राउज़र ऐक्शन, कॉन्टेक्स्ट मेन्यू, और पॉप-अप, DevTools एक्सटेंशन, DevTools विंडो में यूज़र इंटरफ़ेस (यूआई) एलिमेंट जोड़ सकता है:
- पैनल एक टॉप-लेवल टैब होता है. जैसे, एलिमेंट, सोर्स, और नेटवर्क पैनल.
- साइडबार पेन किसी पैनल से जुड़ा सप्लीमेंट्री यूज़र इंटरफ़ेस (यूआई) दिखाता है. एलिमेंट पैनल पर मौजूद स्टाइल, कंप्यूटेड स्टाइल, और इवेंट लिसनर पेन, साइडबार पेन के उदाहरण हैं. आपके इस्तेमाल किए जा रहे Chrome के वर्शन और DevTools विंडो के डॉक किए जाने की जगह के हिसाब से, आपके साइडबार पेन, यहां दी गई उदाहरण वाली इमेज की तरह दिख सकते हैं:
हर पैनल, अपनी एचटीएमएल फ़ाइल होती है. इसमें अन्य रिसॉर्स (JavaScript, सीएसएस, इमेज वगैरह) शामिल हो सकते हैं. कोई सामान्य पैनल बनाने के लिए, यह कोड इस्तेमाल करें:
chrome.devtools.panels.create("My Panel",
"MyPanelIcon.png",
"Panel.html",
function(panel) {
// code invoked on panel creation
}
);
किसी पैनल या साइडबार पेन में एक्ज़ीक्यूट किए गए JavaScript के पास, DevTools पेज के जैसे ही एपीआई का ऐक्सेस होता है.
कोई सामान्य साइडबार पेन बनाने के लिए, यह कोड इस्तेमाल करें:
chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
function(sidebar) {
// sidebar initialization code here
sidebar.setObject({ some_data: "Some data to show" });
});
साइडबार पेन में कॉन्टेंट दिखाने के कई तरीके हैं:
- एचटीएमएल कॉन्टेंट: पेन में दिखाने के लिए, किसी एचटीएमएल पेज को तय करने के लिए,
setPage()को कॉल करें. - JSON डेटा: कोई JSON ऑब्जेक्ट
setObject()को पास करें. - JavaScript एक्सप्रेशन:
setExpression()को कोई एक्सप्रेशन पास करें. DevTools, जांच किए जा रहे पेज के कॉन्टेक्स्ट में एक्सप्रेशन की जांच करता है. इसके बाद, रिटर्न वैल्यू दिखाता है.
setObject() और setExpression() दोनों के लिए, पेन में वैल्यू उसी तरह दिखती है जिस तरह वह DevTools कंसोल में दिखती है. हालांकि, setExpression() की मदद से, DOM एलिमेंट और आर्बिट्ररी JavaScript ऑब्जेक्ट दिखाए जा सकते हैं. वहीं, setObject() सिर्फ़ JSON ऑब्जेक्ट को सपोर्ट करता है.
एक्सटेंशन कॉम्पोनेंट के बीच कम्यूनिकेट करना
यहां कुछ ऐसे मददगार तरीकों के बारे में बताया गया है जिनकी मदद से, DevTools एक्सटेंशन कॉम्पोनेंट एक-दूसरे से कम्यूनिकेट कर सकते हैं.
कॉन्टेंट स्क्रिप्ट इंजेक्ट करना
कॉन्टेंट स्क्रिप्ट इंजेक्ट करने के लिए, scripting.executeScript() का इस्तेमाल करें:
// DevTools page -- devtools.js
chrome.scripting.executeScript({
target: {
tabId: chrome.devtools.inspectedWindow.tabId
},
files: ["content_script.js"]
});
inspectedWindow.tabId प्रॉपर्टी का इस्तेमाल करके, जांच की जा रही विंडो का टैब आईडी वापस पाया जा सकता है.
अगर कोई कॉन्टेंट स्क्रिप्ट पहले से इंजेक्ट की गई है, तो उससे कम्यूनिकेट करने के लिए, मैसेजिंग एपीआई का इस्तेमाल किया जा सकता है.
जांच की जा रही विंडो में JavaScript की जांच करना
जांच किए जा रहे पेज के कॉन्टेक्स्ट में JavaScript
कोड को एक्ज़ीक्यूट करने के लिए, inspectedWindow.eval() तरीके का इस्तेमाल किया जा सकता है. eval() तरीके को, DevTools पेज, पैनल या साइडबार पेन से शुरू किया जा सकता है.
डिफ़ॉल्ट रूप से, एक्सप्रेशन की जांच, पेज के मुख्य फ़्रेम के कॉन्टेक्स्ट में की जाती है.
inspectedWindow.eval() स्क्रिप्ट को एक्ज़ीक्यूट करने के लिए उसी कॉन्टेक्स्ट और विकल्पों का इस्तेमाल करता है जिनका इस्तेमाल, DevTools कंसोल में डाला गया कोड
करता है. इससे, DevTools कंसोल यूटिलिटीज़
एपीआई की सुविधाओं का ऐक्सेस मिलता है जब eval() का इस्तेमाल किया जाता है. उदाहरण के लिए, एचटीएमएल दस्तावेज़ के <head> सेक्शन में मौजूद पहले स्क्रिप्ट एलिमेंट की जांच करने के लिए, इसका इस्तेमाल करें:
chrome.devtools.inspectedWindow.eval(
"inspect($$('head script')[0])",
function(result, isException) { }
);
कॉन्टेंट स्क्रिप्ट के जैसे ही कॉन्टेक्स्ट में एक्सप्रेशन की जांच करने के लिए, inspectedWindow.eval() को कॉल करते समय, useContentScriptContext को true पर भी सेट किया जा सकता है. इस विकल्प का इस्तेमाल करने के लिए, स्टैटिक कॉन्टेंट स्क्रिप्ट के बारे में बताएं. इसके लिए, eval() को कॉल करने से पहले, executeScript() को कॉल करें या manifest.json फ़ाइल में कोई कॉन्टेंट
स्क्रिप्ट तय करें. कॉन्टेंट स्क्रिप्ट कॉन्टेक्स्ट लोड होने के बाद, इस विकल्प का इस्तेमाल करके, अतिरिक्त कॉन्टेंट स्क्रिप्ट भी इंजेक्ट की जा सकती हैं.
चुने गए एलिमेंट को कॉन्टेंट स्क्रिप्ट में पास करना
कॉन्टेंट स्क्रिप्ट के पास, फ़िलहाल चुने गए एलिमेंट का सीधे तौर पर ऐक्सेस नहीं होता. हालांकि,
inspectedWindow.eval()का इस्तेमाल करके एक्ज़ीक्यूट किए गए किसी भी कोड के पास, DevTools
कंसोल और कंसोल यूटिलिटीज़ एपीआई का ऐक्सेस होता है. उदाहरण के लिए, जांच किए गए कोड में, चुने गए एलिमेंट को ऐक्सेस करने के लिए $0 का इस्तेमाल किया जा सकता है.
चुने गए एलिमेंट को कॉन्टेंट स्क्रिप्ट में पास करने के लिए:
कॉन्टेंट स्क्रिप्ट में एक ऐसा तरीका बनाएं जो चुने गए एलिमेंट को आर्ग्युमेंट के तौर पर लेता हो.
function setSelectedElement(el) { // do something with the selected element }useContentScriptContext: trueविकल्प के साथ,inspectedWindow.eval()का इस्तेमाल करके, DevTools पेज से इस तरीके को कॉल करें.chrome.devtools.inspectedWindow.eval("setSelectedElement($0)", { useContentScriptContext: true });
useContentScriptContext: true विकल्प से यह तय होता है कि एक्सप्रेशन की जांच, कॉन्टेंट स्क्रिप्ट के जैसे ही कॉन्टेक्स्ट में की जानी चाहिए. इसलिए, यह setSelectedElement तरीके को ऐक्सेस कर सकता है.
रेफ़रंस पैनल का window पाना
devtools पैनल से postMessage() को कॉल करने के लिए, आपको उसके window ऑब्जेक्ट का रेफ़रंस चाहिए. panel.onShown इवेंट हैंडलर से, किसी पैनल की iframe विंडो पाएं:
extensionPanel.onShown.addListener(function (extPanelWindow) {
extPanelWindow instanceof Window; // true
extPanelWindow.postMessage( // …
});
इंजेक्ट की गई स्क्रिप्ट से DevTools पेज पर मैसेज भेजना
कॉन्टेंट स्क्रिप्ट के बिना, सीधे तौर पर पेज में इंजेक्ट किया गया कोड, runtime.sendMessage() का इस्तेमाल करके,
DevTools पेज पर मैसेज नहीं भेज सकता. इसमें, <script>
tag जोड़कर या inspectedWindow.eval() को कॉल करके इंजेक्ट किया गया कोड शामिल है. इसके बजाय, हमारा सुझाव है कि इंजेक्ट की गई स्क्रिप्ट को किसी ऐसी कॉन्टेंट स्क्रिप्ट के साथ मिलाएं जो इंटरमीडियरी के तौर पर काम कर सकती है. साथ ही, window.postMessage() तरीके का इस्तेमाल करें. यहां दिए गए उदाहरण में, पिछले सेक्शन की बैकग्राउंड स्क्रिप्ट का इस्तेमाल किया गया है:
// injected-script.js
window.postMessage({
greeting: 'hello there!',
source: 'my-devtools-extension'
}, '*');
// content-script.js
window.addEventListener('message', function(event) {
// Only accept messages from the same frame
if (event.source !== window) {
return;
}
var message = event.data;
// Only accept messages that we know are ours. Note that this is not foolproof
// and the page can easily spoof messages if it wants to.
if (typeof message !== 'object' || message === null ||
message.source !== 'my-devtools-extension') {
return;
}
chrome.runtime.sendMessage(message);
});
मैसेज पास करने की अन्य तकनीकों के बारे में जानने के लिए, GitHub पर जाएं.
DevTools के खुलने और बंद होने का पता लगाना
यह ट्रैक करने के लिए कि DevTools विंडो खुली है या नहीं, सर्विस वर्कर में onConnect लिसनर जोड़ें और DevTools पेज से connect() को कॉल करें. हर टैब के लिए, DevTools विंडो खुली हो सकती है. इसलिए, आपको एक से ज़्यादा कनेक्ट इवेंट मिल सकते हैं. यह ट्रैक करने के लिए कि कोई DevTools विंडो खुली है या नहीं, कनेक्ट और डिसकनेक्ट इवेंट की गिनती करें. इसके लिए, यहां दिया गया उदाहरण देखें:
// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
if (port.name == "devtools-page") {
if (openCount == 0) {
alert("DevTools window opening.");
}
openCount++;
port.onDisconnect.addListener(function(port) {
openCount--;
if (openCount == 0) {
alert("Last DevTools window closing.");
}
});
}
});
DevTools पेज, इस तरह कनेक्शन बनाता है:
// devtools.js
// Create a connection to the service worker
const serviceWorkerConnection = chrome.runtime.connect({
name: "devtools-page"
});
// Send a periodic heartbeat to keep the port open.
setInterval(() => {
port.postMessage("heartbeat");
}, 15000);
DevTools एक्सटेंशन के उदाहरण
इस पेज पर दिए गए उदाहरण, इन पेजों से लिए गए हैं:
- Polymer Devtools Extension - DOM/JS की स्थिति के बारे में क्वेरी करने और उसे कस्टम पैनल पर वापस भेजने के लिए, होस्ट पेज में चलने वाले कई हेल्पर का इस्तेमाल करता है.
- React DevTools Extension - DevTools यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को फिर से इस्तेमाल करने के लिए, रेंडरर के सबमॉड्यूल का इस्तेमाल करता है.
- Ember Inspector \- Chrome और Firefox दोनों के लिए, अडैप्टर के साथ शेयर किया गया एक्सटेंशन कोर.
- Coquette-inspect - React पर आधारित एक साफ़-सुथरा एक्सटेंशन. इसमें, डीबग करने वाला एजेंट, होस्ट पेज में इंजेक्ट किया जाता है .
- Sample Extensions में, इंस्टॉल करने, आज़माने, और सीखने के लिए ज़्यादा काम के एक्सटेंशन मौजूद हैं.
ज़्यादा जानकारी
एक्सटेंशन, स्टैंडर्ड एपीआई का इस्तेमाल कर सकते हैं. इनके बारे में जानने के लिए, chrome.* एपीआई और वेब एपीआई देखें.
हमें सुझाव, राय दें या शिकायत करें! आपकी टिप्पणियों और सुझावों से हमें एपीआई को बेहतर बनाने में मदद मिलती है.
उदाहरण
आपको Samples में, DevTools एपीआई का इस्तेमाल करने वाले उदाहरण मिल सकते हैं.