chrome.devtools.network

ब्यौरा

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

मेनिफ़ेस्ट

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

"devtools_page"

Developer Tools API इस्तेमाल करने के बारे में सामान्य जानकारी पाने के लिए, DevTools API की खास जानकारी देखें.

खास जानकारी

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

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

ध्यान दें कि अनुरोध का कॉन्टेंट, HAR के हिस्से के तौर पर नहीं दिया जाता है. ऐसा इसलिए किया जाता है, ताकि HAR को ज़्यादा असरदार बनाया जा सके. कॉन्टेंट वापस पाने के लिए, request's getContent() तरीके का इस्तेमाल किया जा सकता है.

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

उदाहरण

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

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

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

टाइप

Request

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

प्रॉपर्टी

  • getContent

    अमान्य

    Promise

    जवाब के मुख्य हिस्से का कॉन्टेंट दिखाता है.

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

    (callback?: function) => {...}

    • कॉलबैक

      फ़ंक्शन ज़रूरी नहीं

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

      (response: object) => void

      • जवाब

        ऑब्जेक्ट

        Chrome 151 या इसके बाद का वर्शन

        यह एक ऐसा ऑब्जेक्ट होता है जिसमें जवाब का मुख्य हिस्सा और उसकी एन्कोडिंग होती है.

        • कॉन्टेंट

          स्ट्रिंग

          जवाब के मुख्य हिस्से का कॉन्टेंट (कोड में बदला जा सकता है).

        • एन्कोडिंग

          स्ट्रिंग

          अगर कॉन्टेंट को कोड में नहीं बदला गया है, तो यह फ़ील्ड खाली होता है. अगर कॉन्टेंट को कोड में बदला गया है, तो इसमें कोड में बदलने वाले का नाम होता है. फ़िलहाल, सिर्फ़ base64 फ़ॉर्मैट इस्तेमाल किया जा सकता है.

    • returns

      Promise<object>

      Chrome 151 या इसके बाद का वर्शन

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

      प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म को कॉलबैक का इस्तेमाल करना होगा.

तरीके

getHAR()

Promise 
chrome.devtools.network.getHAR(
  callback?: function,
): Promise<object>

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

पैरामीटर

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं

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

    (harLog: object) => void

    • harLog

      ऑब्जेक्ट

      HAR लॉग. ज़्यादा जानकारी के लिए, HAR स्पेसिफ़िकेशन देखें.

रिटर्न

  • Promise<object>

    Chrome 151 या इसके बाद का वर्शन

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

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म को कॉलबैक का इस्तेमाल करना होगा.

इवेंट

onNavigated

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

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

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

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

    (url: string) => void

    • url

      स्ट्रिंग

onRequestFinished

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

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

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

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

    (request: Request) => void