browser.devtools.network

ब्यौरा

chrome.devtools.network एपीआई का इस्तेमाल करके, नेटवर्क पैनल में डेवलपर टूल से दिखाए गए नेटवर्क अनुरोधों की जानकारी हासिल करें.

नेटवर्क के अनुरोधों की जानकारी, एचटीटीपी संग्रह फ़ॉर्मैट (HAR) में दिखाई जाती है. एचएआर के बारे में जानकारी इस दस्तावेज़ के दायरे से बाहर है. इसके बारे में जानने के लिए, एचएआर v1.2 की खास जानकारी देखें.

एचएआर के मामले में, browser.devtools.network.getHAR() तरीका पूरा एचएआर लॉग दिखाता है. वहीं, browser.devtools.network.onRequestFinished इवेंट, इवेंट कॉलबैक के लिए आर्ग्युमेंट के तौर पर एचएआर एंट्री उपलब्ध कराता है.

ध्यान दें कि बेहतर परफ़ॉर्मेंस के लिए, अनुरोध का कॉन्टेंट एचएआर के हिस्से के तौर पर नहीं दिया जाता. कॉन्टेंट को वापस पाने के लिए, अनुरोध के getContent() तरीके को कॉल किया जा सकता है.

अगर पेज लोड होने के बाद डेवलपर टूल विंडो खोली जाती है, तो हो सकता है कि getHAR() से मिले एंट्री के कलेक्शन में कुछ अनुरोध मौजूद न हों. सभी अनुरोध देखने के लिए, पेज को फिर से लोड करें. आम तौर पर, getHAR() से मिले अनुरोधों की सूची, नेटवर्क पैनल में दिखने वाली सूची से मैच होनी चाहिए.

डेवलपर टूल एपीआई इस्तेमाल करने के बारे में सामान्य जानकारी पाने के लिए, DevTools एपीआई की खास जानकारी देखें.

मेनिफ़ेस्ट

इस एपीआई का इस्तेमाल करने के लिए, मेनिफ़ेस्ट में इन कुंजियों का एलान करना ज़रूरी है.

"devtools_page"

उदाहरण

यहां दिया गया कोड, 40 केबी से बड़ी सभी इमेज के यूआरएल को लोड होने पर लॉग करता है:

browser.devtools.network.onRequestFinished.addListener(
  function(request) {
    if (request.response.bodySize > 40*1024) {
      browser.devtools.inspectedWindow.eval(
          'console.log("Large image: " + unescape("' +
          escape(request.request.url) + '"))');
    }
  }
);

इस एपीआई को आज़माने के लिए, chrome-extension-samples रिपॉज़िटरी से devtools API के उदाहरण इंस्टॉल करें.

टाइप

Request

यह किसी दस्तावेज़ के संसाधन (स्क्रिप्ट, इमेज वगैरह) के लिए नेटवर्क के अनुरोध को दिखाता है. रेफ़रंस के लिए, एचएआर स्पेसिफ़िकेशन देखें.

प्रॉपर्टी

  • getContent

    void

    यह रिस्पॉन्स बॉडी का कॉन्टेंट दिखाता है.

    getContent फ़ंक्शन इस तरह दिखता है: 

    () => {...}

    • returns

      Promise<object>

      Chrome 151+ browser.* Chrome 152 से

      यह एक ऐसा फ़ंक्शन है जो अनुरोध पूरा होने पर, रिस्पॉन्स बॉडी को रिसीव करता है.

तरीके

getHAR()

browser.devtools.network.getHAR(): Promise<object>

यह HAR लॉग दिखाता है. इसमें नेटवर्क के सभी अनुरोध शामिल होते हैं.

रिटर्न

  • Promise<object>

    Chrome 151+ browser.* Chrome 152 से

    यह एक ऐसा फ़ंक्शन है जो अनुरोध पूरा होने पर, एचएआर लॉग को रिसीव करता है.

इवेंट

onNavigated

browser.devtools.network.onNavigated.addListener(
  callback: function,
)

यह इवेंट तब ट्रिगर होता है, जब जांच की जा रही विंडो किसी नए पेज पर जाती है.

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

    callback पैरामीटर कुछ ऐसा दिखता है: 

    (url: string) => void

    • url

      स्ट्रिंग

onRequestFinished

browser.devtools.network.onRequestFinished.addListener(
  callback: function,
)

यह इवेंट तब ट्रिगर होता है, जब नेटवर्क का अनुरोध पूरा हो जाता है और अनुरोध का सारा डेटा उपलब्ध हो जाता है.

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

    callback पैरामीटर कुछ ऐसा दिखता है: 

    (request: Request) => void