DevTools को बड़ा करें

DevTools एक्सटेंशन, Chrome DevTools में सुविधाएं जोड़ते हैं. इसके लिए, वे DevTools के लिए खास तौर पर बनाए गए एक्सटेंशन एपीआई को ऐक्सेस करते हैं. ये एपीआई, एक्सटेंशन में जोड़े गए DevTools पेज के ज़रिए ऐक्सेस किए जाते हैं.

आर्किटेक्चर डायग्राम में दिखाया गया है कि DevTools पेज, जांच की गई विंडो और सर्विस वर्कर से कैसे कम्यूनिकेट करता है. इस इमेज में, सर्विस वर्कर को कॉन्टेंट स्क्रिप्ट के साथ कम्यूनिकेट करते हुए और एक्सटेंशन एपीआई को ऐक्सेस करते हुए दिखाया गया है. DevTools पेज के पास DevTools API का ऐक्सेस होता है. उदाहरण के लिए, पैनल बनाना.
DevTools एक्सटेंशन का आर्किटेक्चर.

DevTools के लिए खास तौर पर बनाए गए एक्सटेंशन एपीआई में ये शामिल हैं:

DevTools पेज

DevTools विंडो खुलने पर, DevTools एक्सटेंशन अपने DevTools पेज का एक इंस्टेंस बनाता है. यह इंस्टेंस तब तक मौजूद रहता है, जब तक विंडो खुली रहती है. इस पेज के पास DevTools API और एक्सटेंशन API का ऐक्सेस होता है. साथ ही, यह ये काम कर सकता है:

  • devtools.panels एपीआई का इस्तेमाल करके पैनल बनाएं और उनसे इंटरैक्ट करें. इसमें DevTools विंडो में पैनल या साइडबार के तौर पर अन्य एक्सटेंशन पेज जोड़ना भी शामिल है.
  • devtools.inspectedWindow एपीआई का इस्तेमाल करके, जांच की गई विंडो के बारे में जानकारी पाएं और उसमें मौजूद कोड का आकलन करें.
  • devtools.network एपीआई का इस्तेमाल करके, नेटवर्क अनुरोधों के बारे में जानकारी पाएं.
  • devtools.recorder एपीआई का इस्तेमाल करके, Recorder पैनल को बड़ा करें.
  • devtools.performance एपीआई का इस्तेमाल करके, परफ़ॉर्मेंस पैनल की रिकॉर्डिंग की स्थिति के बारे में जानकारी पाएं.

DevTools पेज, एक्सटेंशन के एपीआई को सीधे तौर पर ऐक्सेस कर सकता है. इसमें, मैसेज पास करने की सुविधा का इस्तेमाल करके, सर्विस वर्कर से कम्यूनिकेट करने की सुविधा शामिल है.

DevTools एक्सटेंशन बनाना

अपने एक्सटेंशन के लिए DevTools पेज बनाने के लिए, एक्सटेंशन मेनिफ़ेस्ट में devtools_page फ़ील्ड जोड़ें:

{
  "name": ...
  "version": "1.0",
  "devtools_page": "devtools.html",
  ...
}

devtools_page फ़ील्ड, किसी एचटीएमएल पेज पर ले जाना चाहिए. DevTools पेज को आपके एक्सटेंशन के लिए लोकल होना चाहिए. इसलिए, हमारा सुझाव है कि इसे रिलेटिव यूआरएल का इस्तेमाल करके तय करें.

chrome.devtools एपीआई के सदस्य, सिर्फ़ उन पेजों के लिए उपलब्ध होते हैं जो DevTools विंडो में लोड किए जाते हैं. ऐसा तब होता है, जब वह विंडो खुली हो. कॉन्टेंट स्क्रिप्ट और अन्य एक्सटेंशन पेजों के पास इन एपीआई का ऐक्सेस नहीं होता.

ब्राउज़र नेमस्पेस और DevTools एक्सटेंशन

Chrome 148 में पेश किया गया browser नेमस्पेस, उन एक्सटेंशन के लिए बंद कर दिया गया है जो devtools_page का एलान करते हैं. ऑप्ट-आउट करने का विकल्प पूरे एक्सटेंशन पर लागू होता है. यह सिर्फ़ DevTools पेज पर नहीं, बल्कि हर स्क्रिप्ट कॉन्टेक्स्ट पर लागू होता है, जहां एक्सटेंशन एपीआई काम करते हैं. इन एक्सटेंशन में chrome.* का इस्तेमाल जारी रखें.

इसकी वजह, webextension-polyfill के साथ काम न करना है. chrome.devtools.* एपीआई सिर्फ़ कॉलबैक वाले होते हैं. ये अभी तक नेटिव तौर पर प्रॉमिस नहीं देते. इसलिए, DevTools एक्सटेंशन आम तौर पर इन्हें रैप करने के लिए पॉलीफ़िल पर निर्भर करते हैं. जब browser को तय किया जाता है, तब पॉलीफ़िल रैपिंग को छोड़ देता है. ऐसा इसलिए होता है, क्योंकि यह माना जाता है कि होस्ट ने पहले ही काम कर लिया है. अगर Chrome ने इन एक्सटेंशन के लिए browser चालू किया है, तो पॉलीफ़िल कोई कार्रवाई नहीं करेगा और chrome.devtools.* कॉल, प्रॉमिस वापस नहीं करेंगे. browser को बंद रखने पर, पॉलीफ़िल रैप करता रहता है.

ऑप्ट-आउट करने पर, इन एक्सटेंशन के लिए Chrome 148 के मैसेजिंग एपीआई में हुए अन्य बदलाव भी बंद हो जाते हैं. इनमें runtime.onMessage में प्रॉमिस रिस्पॉन्स शामिल हैं. DevTools API में नेटिव तौर पर प्रॉमिस की सुविधा काम करने के बाद, यह पाबंदी हटा दी जाएगी.

DevTools के यूज़र इंटरफ़ेस (यूआई) एलिमेंट: पैनल और साइडबार पेन

एक्सटेंशन के सामान्य यूज़र इंटरफ़ेस (यूआई) एलिमेंट के अलावा, DevTools एक्सटेंशन, DevTools विंडो में यूज़र इंटरफ़ेस (यूआई) एलिमेंट जोड़ सकता है. जैसे, ब्राउज़र ऐक्शन, कॉन्टेक्स्ट मेन्यू, और पॉप-अप.

  • पैनल, टॉप-लेवल का टैब होता है. जैसे, Elements, Sources, और Network पैनल.
  • साइडबार पैन, पैनल से जुड़ा अतिरिक्त यूज़र इंटरफ़ेस (यूआई) दिखाता है. साइडबार पैन के उदाहरण: एलिमेंट पैनल पर मौजूद स्टाइल, कंप्यूटेड स्टाइल, और इवेंट लिसनर पैन. Chrome के इस्तेमाल किए जा रहे वर्शन और DevTools विंडो के डॉक किए जाने की जगह के आधार पर, आपकी साइडबार पैन इस उदाहरण इमेज की तरह दिख सकते हैं:
DevTools विंडो में, Elements पैनल और Styles साइडबार पैन दिखाया गया है.
DevTools विंडो में Elements पैनल और Styles साइडबार पैन दिख रहा है.

हर पैनल, अपनी एचटीएमएल फ़ाइल होती है. इसमें अन्य रिसॉर्स (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 डेटा: setObject() को JSON ऑब्जेक्ट पास करें.
  • 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() तरीके का इस्तेमाल किया जा सकता है. DevTools पेज, पैनल या साइडबार पैनल से eval() तरीके को लागू किया जा सकता है.

डिफ़ॉल्ट रूप से, एक्सप्रेशन का आकलन पेज के मुख्य फ़्रेम के कॉन्टेक्स्ट में किया जाता है. inspectedWindow.eval(), स्क्रिप्ट को एक्ज़ीक्यूट करने के लिए उसी कॉन्टेक्स्ट और विकल्पों का इस्तेमाल करता है जो DevTools कंसोल में डाले गए कोड के लिए इस्तेमाल किए जाते हैं. इससे eval() का इस्तेमाल करते समय, DevTools Console Utilities API की सुविधाओं को ऐक्सेस किया जा सकता है. उदाहरण के लिए, इसका इस्तेमाल एचटीएमएल दस्तावेज़ के <head> सेक्शन में मौजूद पहले स्क्रिप्ट एलिमेंट की जांच करने के लिए करें:

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script')[0])",
  function(result, isException) { }
);

कॉन्टेंट स्क्रिप्ट के कॉन्टेक्स्ट में एक्सप्रेशन का आकलन करने के लिए, inspectedWindow.eval() को कॉल करते समय useContentScriptContext को true पर भी सेट किया जा सकता है. इस विकल्प का इस्तेमाल करने के लिए, eval() को कॉल करने से पहले स्टैटिक कॉन्टेंट स्क्रिप्ट का एलान करें. इसके लिए, executeScript() को कॉल करें या manifest.json फ़ाइल में कॉन्टेंट स्क्रिप्ट तय करें. कॉन्टेंट स्क्रिप्ट का कॉन्टेक्स्ट लोड होने के बाद, इस विकल्प का इस्तेमाल करके अतिरिक्त कॉन्टेंट स्क्रिप्ट भी डाली जा सकती हैं.

चुने गए एलिमेंट को कॉन्टेंट स्क्रिप्ट में पास करना

कॉन्टेंट स्क्रिप्ट के पास, चुने गए मौजूदा एलिमेंट का सीधा ऐक्सेस नहीं है. हालांकि, inspectedWindow.eval() का इस्तेमाल करके एक्ज़ीक्यूट किए गए किसी भी कोड के पास DevTools कंसोल और Console Utilities API का ऐक्सेस होता है. उदाहरण के लिए, कोड का आकलन करते समय, चुने गए एलिमेंट को ऐक्सेस करने के लिए $0 का इस्तेमाल किया जा सकता है.

चुने गए एलिमेंट को कॉन्टेंट स्क्रिप्ट में पास करने के लिए:

  1. कॉन्टेंट स्क्रिप्ट में एक ऐसा तरीका बनाएं जो चुने गए एलिमेंट को आर्ग्युमेंट के तौर पर लेता हो.

    function setSelectedElement(el) {
    // do something with the selected element
}

  2. 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> टैग जोड़कर या 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 एक्सटेंशन - यह रेंडरर के सबमॉड्यूल का इस्तेमाल करता है, ताकि DevTools के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट का फिर से इस्तेमाल किया जा सके.
  • Ember Inspector - यह Chrome और Firefox, दोनों के लिए अडैप्टर के साथ एक्सटेंशन कोर शेयर करता है.
  • Coquette-inspect - यह React पर आधारित एक साफ़-सुथरा एक्सटेंशन है. इसमें डीबग करने वाला एजेंट, होस्ट पेज में इंजेक्ट किया जाता है.
  • एक्सटेंशन के सैंपल में, इंस्टॉल करने, आज़माने, और सीखने के लिए ज़्यादा काम के एक्सटेंशन होते हैं.

ज़्यादा जानकारी

एक्सटेंशन के लिए उपलब्ध स्टैंडर्ड एपीआई के बारे में जानने के लिए, chrome.* एपीआई और वेब एपीआई.

हमें सुझाव/राय दें या शिकायत करें! आपकी टिप्पणियों और सुझावों से हमें एपीआई को बेहतर बनाने में मदद मिलती है.

उदाहरण

आपको सैंपल में, DevTools API का इस्तेमाल करने वाले उदाहरण मिल सकते हैं.