DevTools को बड़ा करें

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

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

• devtools.inspectedWindow
• devtools.network
• devtools.panels
• devtools.recorder
• devtools.performance

DevTools पेज

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

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

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

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

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

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

devtools_page फ़ील्ड को किसी एचटीएमएल पेज पर ले जाना चाहिए. क्योंकि DevTools पृष्ठ आपके एक्सटेंशन के लिए स्थानीय होना चाहिए, तो हम अनुशंसा करते है कि आप इसे किसी सापेक्षिक URL का उपयोग करके निर्दिष्ट करें.

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

setObject() और setExpression(), दोनों के लिए पैनल में वह वैल्यू दिखती है जो DevTools कंसोल. हालांकि, setExpression() से आपको डीओएम एलिमेंट और आर्बिट्रेरी 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 कंसोल में डाला गया. इससे DevTools कंसोल यूटिलिटीज़ को ऐक्सेस करने की अनुमति मिल जाएगी eval() का इस्तेमाल करते समय एपीआई की सुविधाओं का इस्तेमाल करें. उदाहरण के लिए, SOAK इसका इस्तेमाल एलिमेंट की जांच करने के लिए करता है:

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

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

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

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

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

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

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

2. inspectedWindow.eval() का इस्तेमाल करके, DevTools पेज पर दिए गए तरीके को कॉल करें useContentScriptContext: true विकल्प के साथ.

   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 पेज पर मैसेज भेजें

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

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

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

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

उदाहरण

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