इस पेज का अनुवाद Cloud Translation API से किया गया है.

DevTools को बड़ा करें

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

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

DevTools पेज

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

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

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

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

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

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

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

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

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

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

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

DevTools विंडो और एलिमेंट पैनल और स्टाइल का साइडबार पैनल. — DevTool की विंडो, जिसमें एलिमेंट पैनल और स्टाइल का साइडबार पैनल दिख रहा है.

हर पैनल अपनी खुद की एचटीएमएल फ़ाइल होती है, जिसमें दूसरे संसाधन (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() से आपको डीओएम एलिमेंट और आर्बिट्रेरी 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() तरीके को शुरू किया जा सकता है.

चेतावनी: eval() का इस्तेमाल सिर्फ़ तब करें, जब आपको जांच किए गए किसी पेज के JavaScript कॉन्टेंट का ऐक्सेस चाहिए. अगर ऐसा नहीं है, तो हमारा सुझाव है कि स्क्रिप्ट चलाने के लिए, scripting.executeScript() तरीके का इस्तेमाल करें. ज़्यादा जानकारी के लिए, inspectedWindow देखें.

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

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

कॉन्टेंट स्क्रिप्ट में, ऐसा तरीका बनाएं जो चुने गए एलिमेंट को आर्ग्युमेंट के तौर पर लेता हो.
```
function setSelectedElement(el) {
    // do something with the selected element
}
```
DevTools पेज पर बताए गए तरीके को कॉल करने के लिए, useContentScriptContext: true विकल्प वाले inspectedWindow.eval() का इस्तेमाल करें.
```
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 एक्सटेंशन के उदाहरण

इस पेज पर दिए गए उदाहरण, इन पेजों से लिए गए हैं:

पॉलीमर Devtools एक्सटेंशन - कस्टम पैनल पर वापस भेजने के लिए, होस्ट पेज पर चल रहे कई हेल्पर का इस्तेमाल DOM/JS स्थिति के बारे में क्वेरी करने के लिए करता है.
React DevTools एक्सटेंशन - DevTools यूज़र इंटरफ़ेस (यूआई) के कॉम्पोनेंट का फिर से इस्तेमाल करने के लिए, रेंडरर के सबमॉड्यूल का इस्तेमाल करता है.
Ember Inspector - यह Chrome और Firefox दोनों के लिए अडैप्टर के साथ शेयर किया गया एक्सटेंशन कोर है.
कोकेट की जांच करना - यह प्रतिक्रिया पर आधारित एक बेहतर एक्सटेंशन है, जिसमें डीबग करने वाले एजेंट को होस्ट पेज में इंजेक्ट किया जाता है.
सैंपल एक्सटेंशन ऐसे एक्सटेंशन इंस्टॉल करने, उन्हें आज़माने, और उनसे सीखने के लिए ज़्यादा फ़ायदेमंद होते हैं.

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

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

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

उदाहरण

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