DevTools को बड़ा किया जा रहा है

खास जानकारी

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

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

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

DevTools पेज

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

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

DevTools पेज पर ज़्यादातर एक्सटेंशन एपीआई सीधे तौर पर इस्तेमाल नहीं किए जा सकते. इसके पास extension और runtime एपीआई के उन ही सबसेट का ऐक्सेस है जिनका ऐक्सेस कॉन्टेंट स्क्रिप्ट के पास है. कॉन्टेंट स्क्रिप्ट की तरह, DevTools पेज भी मैसेज पासिंग का इस्तेमाल करके, बैकग्राउंड पेज से संपर्क कर सकता है. उदाहरण के लिए, कॉन्टेंट स्क्रिप्ट इंजेक्ट करना देखें.

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

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

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

आपके एक्सटेंशन के मेनिफ़ेस्ट में बताए गए devtools_page का एक इंस्टेंस, खोली गई हर DevTools विंडो के लिए बनाया जाता है. पेज, devtools.panels एपीआई का इस्तेमाल करके, अन्य एक्सटेंशन पेजों को DevTool विंडो में पैनल और साइडबार के तौर पर जोड़ सकता है.

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

कुछ DevTools एपीआई ऐसे भी हैं जिन पर अब भी प्रयोग जारी है. chrome.experimental* पर जाएं एपीआई का इस्तेमाल किया जा सकता है.

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

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

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

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 एक्सटेंशन के अलग-अलग कॉम्पोनेंट के बीच कम्यूनिकेट करने के कुछ सामान्य मामलों के बारे में बताते हैं.

कॉन्टेंट स्क्रिप्ट इंजेक्ट करना

DevTools पेज से सीधे tabs.executeScript को कॉल नहीं किया जा सकता. DevTools पेज से कॉन्टेंट स्क्रिप्ट इंजेक्ट करने के लिए, आपको inspectedWindow.tabId प्रॉपर्टी का इस्तेमाल करके, जांच की गई विंडो के टैब का आईडी फिर से पाना होगा. इसके बाद, बैकग्राउंड पेज पर मैसेज भेजना होगा. बैकग्राउंड पेज से, स्क्रिप्ट इंजेक्ट करने के लिए tabs.executeScript को कॉल करें.

नीचे दिए गए कोड स्निपेट, executeScript का इस्तेमाल करके कॉन्टेंट स्क्रिप्ट इंजेक्ट करने का तरीका बताते हैं.

// DevTools page -- devtools.js
// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

backgroundPageConnection.onMessage.addListener(function (message) {
    // Handle responses from the background page, if any
});

// Relay the tab ID to the background page
chrome.runtime.sendMessage({
    tabId: chrome.devtools.inspectedWindow.tabId,
    scriptToInject: "content_script.js"
});

बैकग्राउंड पेज के लिए कोड:

// Background page -- background.js
chrome.runtime.onConnect.addListener(function(devToolsConnection) {
    // assign the listener function to a variable so we can remove it later
    var devToolsListener = function(message, sender, sendResponse) {
        // Inject a content script into the identified tab
        chrome.tabs.executeScript(message.tabId,
            { file: message.scriptToInject });
    }
    // add the listener
    devToolsConnection.onMessage.addListener(devToolsListener);

    devToolsConnection.onDisconnect.addListener(function() {
         devToolsConnection.onMessage.removeListener(devToolsListener);
    });
});

जांच की गई विंडो में JavaScript की जांच करना

जिस पेज की जांच की गई है उसके हिसाब से JavaScript कोड चलाने के लिए, inspectedWindow.eval तरीके का इस्तेमाल किया जा सकता है. किसी DevTools पेज, पैनल या साइडबार पैनल से eval तरीके को शुरू किया जा सकता है.

डिफ़ॉल्ट रूप से, एक्सप्रेशन का आकलन पेज के मुख्य फ़्रेम के संदर्भ में किया जाता है. अब आपने DevTools commandline API की सुविधाओं के बारे में जान लिया है. जैसे, एलिमेंट की जांच करना (inspect(elem)), फ़ंक्शन को तोड़ना (debug(fn)), क्लिपबोर्ड पर कॉपी करना (copy()) वगैरह. inspectedWindow.eval(), स्क्रिप्ट पर काम करने के उसी कॉन्टेक्स्ट और विकल्पों का इस्तेमाल करता है जो DevTools कंसोल पर टाइप किए गए कोड के मुताबिक होता है. इससे, इन एपीआई को eval में ऐक्सेस किया जा सकता है. उदाहरण के लिए, SOAK इसका इस्तेमाल किसी एलिमेंट की जांच करने के लिए करता है:

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

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

कॉन्टेक्स्ट स्क्रिप्ट का कॉन्टेक्स्ट मौजूद होने पर, इस विकल्प का इस्तेमाल करके अतिरिक्त कॉन्टेंट स्क्रिप्ट इंजेक्ट की जा सकती है.

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

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

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

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

  • कॉन्टेंट स्क्रिप्ट में ऐसा तरीका बनाएं जो चुने गए एलिमेंट को आर्ग्युमेंट के तौर पर लेता हो.
  • DevTools पेज पर मौजूद तरीके को कॉल करने के लिए, useContentScriptContext: true विकल्प वाले inspectedWindow.eval का इस्तेमाल करें.

आपकी कॉन्टेंट स्क्रिप्ट में, कोड कुछ इस तरह दिख सकता है:

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

DevTools पेज से इस तरह का तरीका शुरू करें:

chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });

useContentScriptContext: true विकल्प से पता चलता है कि एक्सप्रेशन का आकलन उसी कॉन्टेक्स्ट में किया जाना चाहिए जो कॉन्टेंट स्क्रिप्ट के लिए है, ताकि यह setSelectedElement तरीके को ऐक्सेस कर सके.

रेफ़रंस पैनल का window फ़ेच किया जा रहा है

किसी DevTools पैनल से postMessage करने के लिए, आपको उसके window ऑब्जेक्ट का रेफ़रंस चाहिए. panel.onShown इवेंट हैंडलर से किसी पैनल की iframe विंडो पाएं:

onShown.addListener(function callback)
extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

कॉन्टेंट स्क्रिप्ट से लेकर DevTools पेज पर मैसेज भेजने की सुविधा

DevTools पेज और कॉन्टेंट स्क्रिप्ट के बीच, सीधे तौर पर बैकग्राउंड पेज से मैसेज भेजने की सुविधा नहीं है.

किसी कॉन्टेंट स्क्रिप्ट को मैसेज भेजते समय, बैकग्राउंड पेज tabs.sendMessage तरीके का इस्तेमाल कर सकता है. यह एक खास टैब में मौजूद कॉन्टेंट स्क्रिप्ट पर मैसेज भेजता है, जैसा कि कॉन्टेंट स्क्रिप्ट इंजेक्ट करना में दिखाया गया है.

किसी कॉन्टेंट स्क्रिप्ट से मैसेज भेजते समय, मौजूदा टैब से जुड़े सही DevTools पेज पर मैसेज डिलीवर करने का कोई पहले से तैयार तरीका नहीं होता है. वैकल्पिक हल के तौर पर, आपके पास यह सुविधा है कि DevTools पेज को बैकग्राउंड पेज के साथ लंबे समय तक कनेक्ट किया जा सके. साथ ही, बैकग्राउंड पेज को कनेक्शन से टैब आईडी का मैप रखने की सुविधा दें, ताकि यह हर मैसेज को सही कनेक्शन पर रूट कर सके.

// background.js
var connections = {};

chrome.runtime.onConnect.addListener(function (port) {

    var extensionListener = function (message, sender, sendResponse) {

        // The original connection event doesn't include the tab ID of the
        // DevTools page, so we need to send it explicitly.
        if (message.name == "init") {
          connections[message.tabId] = port;
          return;
        }

    // other message handling
    }

    // Listen to messages sent from the DevTools page
    port.onMessage.addListener(extensionListener);

    port.onDisconnect.addListener(function(port) {
        port.onMessage.removeListener(extensionListener);

        var tabs = Object.keys(connections);
        for (var i=0, len=tabs.length; i < len; i++) {
          if (connections[tabs[i]] == port) {
            delete connections[tabs[i]]
            break;
          }
        }
    });
});

// Receive message from content script and relay to the devTools page for the
// current tab
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // Messages from content scripts should have sender.tab set
    if (sender.tab) {
      var tabId = sender.tab.id;
      if (tabId in connections) {
        connections[tabId].postMessage(request);
      } else {
        console.log("Tab not found in connection list.");
      }
    } else {
      console.log("sender.tab not defined.");
    }
    return true;
});

DevTools पेज (या पैनल या साइडबार पैनल) इस तरह से कनेक्शन बनाता है:

// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "panel"
});

backgroundPageConnection.postMessage({
    name: 'init',
    tabId: chrome.devtools.inspectedWindow.tabId
});

इंजेक्ट की गई स्क्रिप्ट से लेकर DevTools पेज पर मैसेज भेजने की सुविधा

ऊपर दिया गया तरीका, कॉन्टेंट स्क्रिप्ट के लिए काम करता है. हालांकि, सीधे पेज में इंजेक्ट किए जाने वाले कोड के लिए अलग रणनीति की ज़रूरत होती है, जैसे कि <script> टैग जोड़कर या inspectedWindow.eval की मदद से. इस संदर्भ में, runtime.sendMessage मैसेज को बैकग्राउंड स्क्रिप्ट में उम्मीद के मुताबिक पास नहीं करेगा.

समाधान के तौर पर, अपनी इंजेक्ट की गई स्क्रिप्ट को ऐसी कॉन्टेंट स्क्रिप्ट के साथ जोड़ा जा सकता है जो इंटरमीडियरी के तौर पर काम करती है. कॉन्टेंट स्क्रिप्ट को मैसेज भेजने के लिए, 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
  if (typeof message !== 'object' || message === null ||
      !message.source === 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

आपका मैसेज अब इंजेक्ट की गई स्क्रिप्ट से कॉन्टेंट स्क्रिप्ट, बैकग्राउंड स्क्रिप्ट, और आखिर में DevTools पेज पर जाएगा.

यहां मैसेज पास करने की दो वैकल्पिक तकनीकों पर भी विचार किया जा सकता है.

DevTools के खुलने और बंद होने का पता लगाया जा रहा है

अगर आपके एक्सटेंशन को यह ट्रैक करने की ज़रूरत है कि DevTools विंडो खुली है या नहीं, तो आपके पास बैकग्राउंड पेज में onConnect लिसर जोड़ने और DevTools पेज से कनेक्ट करने का विकल्प है. हर टैब में अपनी 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 background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

DevTools एक्सटेंशन के उदाहरण

DevTools एक्सटेंशन के इन उदाहरणों के सोर्स ब्राउज़ करें:

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

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

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

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

उदाहरण

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