chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

ब्यौरा

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

मेनिफ़ेस्ट

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

"devtools_page"

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

खास जानकारी

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

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

उदाहरण

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

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

यहां दिया गया कोड, एलिमेंट पैनल में Sidebar.html में मौजूद साइडबार पैनल जोड़ता है. इसका टाइटल फ़ॉन्ट प्रॉपर्टी है. इसके बाद, इसकी ऊंचाई 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 ज़रूरी नहीं

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

    • बंद है

      बूलियन ज़रूरी नहीं

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

ElementsPanel

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

प्रॉपर्टी

  • onSelectionChanged

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • createSidebarPane

    void

    वादा

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

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

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

    • title

      स्ट्रिंग

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

    • कॉलबैक

      function ज़रूरी नहीं

      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

    वादा

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

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

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

    • एक्सप्रेशन

      स्ट्रिंग

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

    • rootTitle

      string ज़रूरी नहीं

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

    • कॉलबैक

      function ज़रूरी नहीं

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

      () => void

    • returns

      वादा<शून्य>

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

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

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

  • setHeight

    void

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

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

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

    • ऊंचाई

      स्ट्रिंग

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

  • setObject

    void

    वादा

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

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

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

    • jsonObject

      स्ट्रिंग

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

    • rootTitle

      string ज़रूरी नहीं

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

    • कॉलबैक

      function ज़रूरी नहीं

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

      () => void

    • returns

      वादा<शून्य>

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

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

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

  • setPage

    void

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

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

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

    • पाथ

      स्ट्रिंग

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

SourcesPanel

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

प्रॉपर्टी

  • onSelectionChanged

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • createSidebarPane

    void

    वादा

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

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

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

    • title

      स्ट्रिंग

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

    • कॉलबैक

      function ज़रूरी नहीं

      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()

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

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

पैरामीटर

  • title

    स्ट्रिंग

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

  • iconPath

    स्ट्रिंग

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

  • pagePath

    स्ट्रिंग

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

  • कॉलबैक

    function ज़रूरी नहीं

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

    (panel: ExtensionPanel) => void

    • फलक

      ExtensionPanel

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

रिटर्न

  • Promise<ExtensionPanel>

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

    पैनल बनने पर कॉल किया जाने वाला फ़ंक्शन.

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

openResource()

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

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

पैरामीटर

  • url

    स्ट्रिंग

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

  • lineNumber

    संख्या

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

  • columnNumber

    number ज़रूरी नहीं

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

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

  • कॉलबैक

    function ज़रूरी नहीं

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

    () => void

रिटर्न

  • वादा<शून्य>

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

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

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

setOpenResourceHandler()

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

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

पैरामीटर

  • कॉलबैक

    function ज़रूरी नहीं

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

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

    • रिसॉर्स

      संसाधन

      जिस संसाधन पर क्लिक किया गया था उसके लिए devtools.inspectedWindow.Resource ऑब्जेक्ट.

    • lineNumber

      संख्या

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

setThemeChangeHandler()

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

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

पैरामीटर

  • कॉलबैक

    function ज़रूरी नहीं

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

    (theme: Theme) => void

    • थीम

      थीम

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