chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

ब्यौरा

अपने एक्सटेंशन को डेवलपर टूल विंडो के यूज़र इंटरफ़ेस (यूआई) में इंटिग्रेट करने के लिए, chrome.devtools.panels एपीआई का इस्तेमाल करें: अपने पैनल बनाएं, मौजूदा पैनल ऐक्सेस करें, और साइडबार जोड़ें.

मेनिफ़ेस्ट

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

"devtools_page"

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

खास जानकारी

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

devtools.panels.setOpenResourceHandler तरीके का इस्तेमाल करके, कॉलबैक फ़ंक्शन इंस्टॉल किया जा सकता है. यह फ़ंक्शन, किसी संसाधन को खोलने के लिए उपयोगकर्ता के अनुरोधों को हैंडल करता है. आम तौर पर, यह अनुरोध तब किया जाता है, जब उपयोगकर्ता डेवलपर टूल विंडो में किसी संसाधन के लिंक पर क्लिक करता है. इंस्टॉल किए गए ज़्यादा से ज़्यादा एक हैंडलर को कॉल किया जाता है. उपयोगकर्ता, डेवलपर टूल की सेटिंग वाले डायलॉग का इस्तेमाल करके, डिफ़ॉल्ट व्यवहार या संसाधन खोलने के अनुरोधों को हैंडल करने के लिए एक्सटेंशन तय कर सकते हैं. अगर कोई एक्सटेंशन setOpenResourceHandler() को कई बार कॉल करता है, तो सिर्फ़ आखिरी हैंडलर को बनाए रखा जाता है.

उदाहरण

नीचे दिए गए कोड में, Panel.html में मौजूद एक पैनल जोड़ा गया है. इसे डेवलपर टूल टूलबार पर FontPicker.png के तौर पर दिखाया गया है और इसे फ़ॉन्ट पिकर के तौर पर लेबल किया गया है:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

यहां दिए गए कोड से, Elements पैनल में Sidebar.html में शामिल और Font Properties नाम वाला साइडबार पैन जोड़ा जाता है. इसके बाद, इसकी ऊंचाई 8ex पर सेट की जाती है:

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

इस स्क्रीनशॉट में दिखाया गया है कि ऊपर दिए गए उदाहरणों का, डेवलपर टूल विंडो पर क्या असर पड़ेगा:

DevTools टूलबार पर मौजूद एक्सटेंशन आइकॉन पैनल

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

टाइप

Button

एक्सटेंशन की मदद से बनाया गया बटन.

प्रॉपर्टी

  • onClicked

    Event<functionvoidvoid>

    बटन पर क्लिक करने पर ट्रिगर होता है.

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • अपडेट करें

    void

    यह बटन के एट्रिब्यूट अपडेट करता है. अगर कुछ आर्ग्युमेंट छोड़ दिए जाते हैं या null का इस्तेमाल किया जाता है, तो उनसे जुड़े एट्रिब्यूट अपडेट नहीं होते.

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

    (iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}

    • iconPath

      string ज़रूरी नहीं है

      बटन के नए आइकॉन का पाथ.

    • tooltipText

      string ज़रूरी नहीं है

      जब उपयोगकर्ता बटन पर माउस घुमाता है, तब टूलटिप के तौर पर दिखने वाला टेक्स्ट.

    • बंद है

      boolean ज़रूरी नहीं है

      क्या बटन बंद है.

ElementsPanel

यह एलिमेंट पैनल को दिखाता है.

प्रॉपर्टी

  • onSelectionChanged

    Event<functionvoidvoid>

    यह इवेंट तब ट्रिगर होता है, जब पैनल में कोई ऑब्जेक्ट चुना जाता है.

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • createSidebarPane

    void

    Promise

    यह पैनल के साइडबार में एक पैनल बनाता है.

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

    (title: string, callback?: function) => {...}

    • title

      स्ट्रिंग

      साइडबार के कैप्शन में दिखने वाला टेक्स्ट.

    • कॉलबैक

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

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

      (result: ExtensionSidebarPane) => void

      • नतीजा

        ExtensionSidebarPane

        बनाए गए साइडबार पैनल के लिए ExtensionSidebarPane ऑब्जेक्ट.

    • returns

      Promise<ExtensionSidebarPane>

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

      साइडबार बनाए जाने पर, इस कॉलबैक को शुरू किया जाता है.

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

ExtensionPanel

यह एक्सटेंशन से बनाए गए पैनल को दिखाता है.

प्रॉपर्टी

  • onHidden

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • onSearch

    Event<functionvoidvoid>

    यह इवेंट, खोज से जुड़ी कार्रवाई (नई खोज शुरू करना, खोज के नतीजों पर नेविगेट करना या खोज रद्द करना) पर ट्रिगर होता है.

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

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

    • कॉलबैक

      फ़ंक्शन

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

      (action: string, queryString?: string) => void

      • ऐक्शन गेम

        स्ट्रिंग

      • queryString

        string ज़रूरी नहीं है

  • onShown

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      (window: Window) => void

      • विंडो

        विंडो

  • createStatusBarButton

    void

    यह पैनल की स्टेटस बार में एक बटन जोड़ता है.

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

    (iconPath: string, tooltipText: string, disabled: boolean) => {...}

    • iconPath

      स्ट्रिंग

      बटन के आइकॉन का पाथ. फ़ाइल में 64x24 पिक्सल की इमेज होनी चाहिए. इसमें 32x24 पिक्सल के दो आइकॉन होने चाहिए. बटन के काम न करने पर बाईं ओर मौजूद आइकॉन का इस्तेमाल किया जाता है. बटन दबाने पर, दाईं ओर मौजूद आइकॉन दिखता है.

    • tooltipText

      स्ट्रिंग

      जब उपयोगकर्ता बटन पर माउस घुमाता है, तब टूलटिप के तौर पर दिखने वाला टेक्स्ट.

    • बंद है

      बूलियन

      क्या बटन बंद है.

  • दिखाएं

    void

    Chrome 140+

    यह पैनल, उससे जुड़े टैब को चालू करके दिखाता है.

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

    () => {...}

ExtensionSidebarPane

एक्सटेंशन की मदद से बनाया गया साइडबार.

प्रॉपर्टी

  • onHidden

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • onShown

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      (window: Window) => void

      • विंडो

        विंडो

  • setExpression

    void

    Promise

    यह कुकी, एक ऐसा एक्सप्रेशन सेट करती है जिसका आकलन, जांच किए गए पेज पर किया जाता है. नतीजा, साइडबार वाले पैनल में दिखता है.

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

    (expression: string, rootTitle?: string, callback?: function) => {...}

    • एक्सप्रेशन

      स्ट्रिंग

      वह एक्सप्रेशन जिसका आकलन, जांचे गए पेज के हिसाब से करना है. JavaScript ऑब्जेक्ट और डीओएम नोड को कंसोल/वॉच की तरह, बड़े किए जा सकने वाले ट्री में दिखाया जाता है.

    • rootTitle

      string ज़रूरी नहीं है

      एक्सप्रेशन ट्री के रूट के लिए कोई टाइटल. हालांकि, यह टाइटल देना ज़रूरी नहीं है.

    • कॉलबैक

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

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

      () => void

    • returns

      Promise<void>

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

      यह एक कॉलबैक है. इसे तब शुरू किया जाता है, जब एक्सप्रेशन के आकलन के नतीजों के साथ साइडबार पैन अपडेट हो जाता है.

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

  • setHeight

    void

    इससे साइडबार की ऊंचाई सेट की जाती है.

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

    (height: string) => {...}

    • ऊंचाई

      स्ट्रिंग

      सीएसएस जैसा साइज़ स्पेसिफ़िकेशन, जैसे कि '100px' या '12ex'.

  • setObject

    void

    Promise

    यह फ़ंक्शन, JSON के साथ काम करने वाला ऑब्जेक्ट सेट करता है, ताकि उसे साइडबार पैन में दिखाया जा सके.

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

    (jsonObject: string, rootTitle?: string, callback?: function) => {...}

    • jsonObject

      स्ट्रिंग

      जांचे गए पेज के संदर्भ में दिखाया जाने वाला ऑब्जेक्ट. इसका आकलन, कॉलर (एपीआई क्लाइंट) के हिसाब से किया जाता है.

    • rootTitle

      string ज़रूरी नहीं है

      एक्सप्रेशन ट्री के रूट के लिए कोई टाइटल. हालांकि, यह टाइटल देना ज़रूरी नहीं है.

    • कॉलबैक

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

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

      () => void

    • returns

      Promise<void>

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

      यह कॉलबैक, साइडबार को ऑब्जेक्ट के साथ अपडेट करने के बाद शुरू होता है.

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

  • setPage

    void

    यह कुकी, साइडबार पैन में दिखाए जाने वाले एचटीएमएल पेज को सेट करती है.

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

    (path: string) => {...}

    • पाथ

      स्ट्रिंग

      साइडबार में दिखाने के लिए, एक्सटेंशन पेज का रिलेटिव पाथ.

SourcesPanel

यह सोर्स पैनल को दिखाता है.

प्रॉपर्टी

  • onSelectionChanged

    Event<functionvoidvoid>

    यह इवेंट तब ट्रिगर होता है, जब पैनल में कोई ऑब्जेक्ट चुना जाता है.

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • createSidebarPane

    void

    Promise

    यह पैनल के साइडबार में एक पैनल बनाता है.

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

    (title: string, callback?: function) => {...}

    • title

      स्ट्रिंग

      साइडबार के कैप्शन में दिखने वाला टेक्स्ट.

    • कॉलबैक

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

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

      (result: ExtensionSidebarPane) => void

      • नतीजा

        ExtensionSidebarPane

        बनाए गए साइडबार पैनल के लिए ExtensionSidebarPane ऑब्जेक्ट.

    • returns

      Promise<ExtensionSidebarPane>

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

      साइडबार बनाए जाने पर, इस कॉलबैक को शुरू किया जाता है.

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

Theme

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

DevTools में इस्तेमाल की गई थीम.

Enum

"default"
DevTools की डिफ़ॉल्ट थीम. यह हमेशा हल्के रंग वाली थीम होती है.

"dark"
गहरे रंग वाली थीम.

प्रॉपर्टी

elements

'तत्व' पैनल में.

टाइप

ElementsPanel

sources

सोर्स पैनल.

टाइप

SourcesPanel

themeName

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

उपयोगकर्ता की DevTools सेटिंग में सेट की गई रंग वाली थीम का नाम. इन वैल्यू का इस्तेमाल किया जा सकता है: default (डिफ़ॉल्ट) और dark.

टाइप

स्ट्रिंग

तरीके

create()

Promise 
chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): Promise<ExtensionPanel>

एक्सटेंशन पैनल बनाता है.

पैरामीटर

  • title

    स्ट्रिंग

    यह टाइटल, डेवलपर टूल के टूलबार में एक्सटेंशन आइकॉन के बगल में दिखता है.

  • iconPath

    स्ट्रिंग

    एक्सटेंशन डायरेक्ट्री के हिसाब से, पैनल के आइकॉन का पाथ.

  • pagePath

    स्ट्रिंग

    एक्सटेंशन डायरेक्ट्री के हिसाब से, पैनल के एचटीएमएल पेज का पाथ.

  • कॉलबैक

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

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

    (panel: ExtensionPanel) => void

    • पैनल

      ExtensionPanel

      बनाए गए पैनल को दिखाने वाला ExtensionPanel ऑब्जेक्ट.

रिटर्न

  • Promise<ExtensionPanel>

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

    पैनल बनाए जाने पर इस फ़ंक्शन को कॉल किया जाता है.

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

openResource()

Promise 
chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): Promise<void>

यह DevTools से, डेवलपर टूल के पैनल में कोई यूआरएल खोलने का अनुरोध करता है.

पैरामीटर

  • url

    स्ट्रिंग

    खोलने के लिए संसाधन का यूआरएल.

  • lineNumber

    संख्या

    इस कुकी से यह तय होता है कि रिसॉर्स लोड होने पर, किस लाइन नंबर पर स्क्रोल करना है.

  • columnNumber

    number optional

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

    इससे यह तय किया जाता है कि रिसॉर्स लोड होने पर, किस कॉलम नंबर पर स्क्रोल करना है.

  • कॉलबैक

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

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

    () => void

रिटर्न

  • Promise<void>

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

    यह फ़ंक्शन तब कॉल किया जाता है, जब संसाधन लोड हो जाता है.

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

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

इससे उस फ़ंक्शन के बारे में पता चलता है जिसे उपयोगकर्ता के Developer Tools विंडो में मौजूद संसाधन लिंक पर क्लिक करने पर कॉल किया जाना है. हैंडलर को अनसेट करने के लिए, बिना किसी पैरामीटर के तरीके को कॉल करें या पैरामीटर के तौर पर null पास करें.

पैरामीटर

  • कॉलबैक

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

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

    (resource: Resource, lineNumber: number) => void

    • रिसॉर्स

      संसाधन

      क्लिक किए गए संसाधन के लिए, devtools.inspectedWindow.Resource ऑब्जेक्ट.

    • lineNumber

      संख्या

      इससे उस संसाधन में लाइन नंबर के बारे में पता चलता है जिस पर क्लिक किया गया था.

setThemeChangeHandler()

Chrome 99 या इसके बाद का वर्शन 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

यह विकल्प, उस फ़ंक्शन के बारे में बताता है जिसे DevTools में मौजूदा थीम बदलने पर कॉल किया जाना है. हैंडलर को हटाने के लिए, बिना किसी पैरामीटर के तरीके को कॉल करें या null को पैरामीटर के तौर पर पास करें.

पैरामीटर

  • कॉलबैक

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

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

    (theme: Theme) => void

    • थीम

      थीम

      DevTools में मौजूद मौजूदा थीम.