chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

Beschrijving

Gebruik de chrome.devtools.panels API om je extensie te integreren in de UI van het venster Ontwikkelaarstools: maak je eigen deelvensters, open bestaande deelvensters en voeg zijbalken toe.

Manifest

De volgende sleutels moeten in het manifest worden gedefinieerd om deze API te gebruiken.

"devtools_page"

Ga naar Overzicht van DevTools API's voor een algemene inleiding over het gebruik van API's voor ontwikkelaarstools.

Overzicht

Elk extensievenster en elke zijbalk wordt getoond als een afzonderlijke HTML-pagina. Alle extensiepagina's die worden weergegeven in het venster Tools voor ontwikkelaars hebben toegang tot alle modules in de chrome.devtools API en tot de chrome.extension API. Andere extensie-API's zijn niet beschikbaar voor de pagina's in het venster Ontwikkelaarstools, maar je kunt ze aanroepen door een verzoek naar de achtergrondpagina van je extensie te sturen, vergelijkbaar met hoe dit wordt gedaan in de contentscripts.

Je kunt de methode devtools.panels.setOpenResourceHandler gebruiken om een callbackfunctie te installeren die gebruikersverzoeken verwerkt om een bron te openen (meestal een klik op een bronlink in het venster Tools voor ontwikkelaars). Maximaal één van de geïnstalleerde handlers wordt aangeroepen. Gebruikers kunnen (via het dialoogvenster Instellingen voor tools voor ontwikkelaars) het standaardgedrag of een extensie opgeven om openstaande verzoeken voor bronnen te verwerken. Als een extensie setOpenResourceHandler() meerdere keren aanroept, wordt alleen de laatste handler bewaard.

Voorbeelden

De volgende code voegt een deelvenster toe dat is opgenomen in Panel.html, vertegenwoordigd door FontPicker.png op de werkbalk Hulpprogramma's voor ontwikkelaars en gelabeld als Lettertypekiezer:

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

De volgende code voegt een zijbalkvenster toe dat is opgenomen in Sidebar.html en de titel Font Properties heeft aan het deelvenster Elementen en stelt de hoogte in op 8ex:

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

Dit screenshot toont het effect van de bovenstaande voorbeelden op het venster Hulpprogramma's voor ontwikkelaars:

Deelvenster met extensie-icoon op de DevTools-werkbalk

Als je deze API wilt proberen, installeer je het voorbeeld van de devtools panels API uit de repository chrome-extension-samples.

Typen

Button

Een knop die door de extensie is gemaakt.

Eigenschappen

  • onClicked

    Event<functionvoidvoid>

    Wordt geactiveerd als er op de knop wordt geklikt.

    De functie onClicked.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • update

    ongeldig

    Updatet de kenmerken van de knop. Als sommige argumenten worden weggelaten of null zijn, worden de bijbehorende kenmerken niet geüpdatet.

    De functie update ziet er zo uit: 

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

    • iconPath

      tekenreeks optioneel

      Pad naar het nieuwe icoon van de knop.

    • tooltipText

      tekenreeks optioneel

      Tekst die als tooltip wordt getoond wanneer de gebruiker de muisaanwijzer op de knop plaatst.

    • uitgezet

      booleaans optioneel

      Of de knop is uitgezet.

ElementsPanel

Vertegenwoordigt het deelvenster Elementen.

Eigenschappen

  • onSelectionChanged

    Event<functionvoidvoid>

    Wordt geactiveerd als er een object wordt geselecteerd in het deelvenster.

    De functie onSelectionChanged.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • createSidebarPane

    ongeldig

    Promise

    Maakt een deelvenster in de zijbalk van het deelvenster.

    De functie createSidebarPane ziet er zo uit: 

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

    • titel

      tekenreeks

      Tekst die wordt getoond in het bijschrift van de zijbalk.

    • callback

      functie optioneel

      De parameter callback ziet er zo uit: 

      (result: ExtensionSidebarPane) => void

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152+

      Een callback die wordt aangeroepen als de zijbalk wordt gemaakt.

      Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

ExtensionPanel

Staat voor een deelvenster dat is gemaakt door een extensie.

Eigenschappen

  • onHidden

    Event<functionvoidvoid>

    Wordt geactiveerd als de gebruiker het deelvenster verlaat.

    De functie onHidden.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • onSearch

    Event<functionvoidvoid>

    Wordt geactiveerd bij een zoekactie (start van een nieuwe zoekopdracht, navigatie door zoekresultaten of annulering van een zoekopdracht).

    De functie onSearch.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

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

      • actie

        tekenreeks

      • queryString

        tekenreeks optioneel

  • onShown

    Event<functionvoidvoid>

    Wordt geactiveerd als de gebruiker naar het deelvenster overschakelt.

    De functie onShown.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      (window: Window) => void

      • venster

        Venster

  • createStatusBarButton

    ongeldig

    Voegt een knop toe aan de statusbalk van het deelvenster.

    De functie createStatusBarButton ziet er zo uit: 

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

    • iconPath

      tekenreeks

      Pad naar het icoon van de knop. Het bestand moet een afbeelding van 64 x 24 pixels bevatten die bestaat uit 2 iconen van 32 x 24 pixels. Het linkericoon wordt gebruikt als de knop inactief is. Het rechtericoon wordt getoond als de knop wordt ingedrukt.

    • tooltipText

      tekenreeks

      Tekst die als tooltip wordt getoond wanneer de gebruiker de muisaanwijzer op de knop plaatst.

    • uitgezet

      booleaans

      Of de knop is uitgezet.

  • weergeven

    ongeldig

    Chrome 140+

    Toont het deelvenster door het bijbehorende tabblad te activeren.

    De functie show ziet er zo uit: 

    () => {...}

ExtensionSidebarPane

Een zijbalk die is gemaakt door de extensie.

Eigenschappen

  • onHidden

    Event<functionvoidvoid>

    Wordt geactiveerd als het zijbalkdeelvenster wordt verborgen omdat de gebruiker overschakelt van het deelvenster dat het zijbalkdeelvenster host.

    De functie onHidden.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Wordt geactiveerd als het zijbalkvenster zichtbaar wordt omdat de gebruiker overschakelt naar het deelvenster waarin het wordt gehost.

    De functie onShown.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      (window: Window) => void

      • venster

        Venster

  • setExpression

    ongeldig

    Promise

    Stelt een expressie in die wordt geëvalueerd op de geïnspecteerde pagina. Het resultaat wordt getoond in het zijbalkvenster.

    De functie setExpression ziet er zo uit: 

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

    • expressie

      tekenreeks

      Een expressie die moet worden geëvalueerd in de context van de geïnspecteerde pagina. JavaScript-objecten en DOM-nodes worden getoond in een uitvouwbare boomstructuur die lijkt op de console/watch.

    • rootTitle

      tekenreeks optioneel

      Een optionele titel voor de root van de expressiestructuur.

    • callback

      functie optioneel

      De parameter callback ziet er zo uit: 

      () => void

    • returns

      Promise<void>

      Chrome 152+

      Een callback die wordt aangeroepen nadat het zijbalkvenster is geüpdatet met de resultaten van de expressie-evaluatie.

      Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

  • setHeight

    ongeldig

    Hiermee stel je de hoogte van de zijbalk in.

    De functie setHeight ziet er zo uit: 

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

    • hoogte

      tekenreeks

      Een CSS-achtige groottespecificatie, zoals '100px' of '12ex'.

  • setObject

    ongeldig

    Promise

    Stelt een JSON-compatibel object in dat moet worden weergegeven in het zijbalkvenster.

    De functie setObject ziet er zo uit: 

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

    • jsonObject

      tekenreeks

      Een object dat moet worden getoond in de context van de geïnspecteerde pagina. Geëvalueerd in de context van de beller (API-client).

    • rootTitle

      tekenreeks optioneel

      Een optionele titel voor de root van de expressiestructuur.

    • callback

      functie optioneel

      De parameter callback ziet er zo uit: 

      () => void

    • returns

      Promise<void>

      Chrome 152+

      Een callback die wordt aangeroepen nadat de zijbalk is geüpdatet met het object.

      Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

  • setPage

    ongeldig

    Stelt een HTML-pagina in die moet worden weergegeven in het zijbalkdeelvenster.

    De functie setPage ziet er zo uit: 

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

    • pad

      tekenreeks

      Relatief pad van een extensiepagina die in de zijbalk moet worden getoond.

SourcesPanel

Het deelvenster Bronnen.

Eigenschappen

  • onSelectionChanged

    Event<functionvoidvoid>

    Wordt geactiveerd als er een object wordt geselecteerd in het deelvenster.

    De functie onSelectionChanged.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • createSidebarPane

    ongeldig

    Promise

    Maakt een deelvenster in de zijbalk van het deelvenster.

    De functie createSidebarPane ziet er zo uit: 

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

    • titel

      tekenreeks

      Tekst die wordt getoond in het bijschrift van de zijbalk.

    • callback

      functie optioneel

      De parameter callback ziet er zo uit: 

      (result: ExtensionSidebarPane) => void

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152+

      Een callback die wordt aangeroepen als de zijbalk wordt gemaakt.

      Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

Theme

Chrome 99 of hoger

Thema dat wordt gebruikt door DevTools.

Enum

"default"
Standaard DevTools-thema. Dit is altijd het lichte thema.

"dark"
Donker thema.

Eigenschappen

elements

Het deelvenster Elementen.

Type

ElementsPanel

sources

deelvenster Bronnen.

Type

SourcesPanel

themeName

Chrome 59+

De naam van het kleurenthema dat is ingesteld in de DevTools-instellingen van de gebruiker. Mogelijke waarden: default (de standaardwaarde) en dark.

Type

tekenreeks

Methoden

create()

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

Maakt een extensievenster.

Parameters

  • titel

    tekenreeks

    Titel die naast het extensie-icoon wordt getoond in de werkbalk van de tools voor ontwikkelaars.

  • iconPath

    tekenreeks

    Pad van het icoon van het deelvenster ten opzichte van de extensiemap.

  • pagePath

    tekenreeks

    Pad van de HTML-pagina van het deelvenster ten opzichte van de extensiemap.

  • callback

    functie optioneel

    De parameter callback ziet er zo uit: 

    (panel: ExtensionPanel) => void

    • venster

      ExtensionPanel

      Een ExtensionPanel-object dat het gemaakte deelvenster vertegenwoordigt.

Retourzendingen

  • Promise<ExtensionPanel>

    Chrome 152+

    Een functie die wordt aangeroepen als het deelvenster wordt gemaakt.

    Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

openResource()

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

Vraagt DevTools om een URL te openen in een deelvenster met tools voor ontwikkelaars.

Parameters

  • url

    tekenreeks

    De URL van de bron die moet worden geopend.

  • lineNumber

    getal

    Hiermee geef je het regelnummer aan waarnaar moet worden gescrold als de bron is geladen.

  • columnNumber

    number optioneel

    Chrome 114+

    Geeft het kolomnummer aan waarnaar moet worden gescrold als de bron is geladen.

  • callback

    functie optioneel

    De parameter callback ziet er zo uit: 

    () => void

Retourzendingen

  • Promise<void>

    Chrome 152+

    Een functie die wordt aangeroepen als de bron is geladen.

    Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

setOpenResourceHandler()

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

Hiermee geef je de functie aan die moet worden aangeroepen als de gebruiker op een bronlink klikt in het venster Tools voor ontwikkelaars. Als u de handler wilt verwijderen, roept u de methode aan zonder parameters of geeft u null door als parameter.

Parameters

  • callback

    functie optioneel

    De parameter callback ziet er zo uit: 

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

setThemeChangeHandler()

Chrome 99 of hoger 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

Hiermee wordt de functie aangegeven die moet worden aangeroepen als het huidige thema verandert in DevTools. Als u de handler ongedaan wilt maken, roept u de methode aan zonder parameters of geeft u null door als parameter.

Parameters

  • callback

    functie optioneel

    De parameter callback ziet er zo uit: 

    (theme: Theme) => void

    • thema

      Thema

      Huidig thema in DevTools.