Deze pagina is vertaald door de Cloud Translation API.

chrome.devtools.panels

Beschrijving

Gebruik de chrome.devtools.panels API om uw extensie te integreren in de gebruikersinterface van het venster Ontwikkelaarstools: maak uw eigen panelen, krijg toegang tot bestaande panelen en voeg zijbalken toe.

Elk extensiepaneel en elke zijbalk wordt weergegeven als een aparte HTML-pagina. Alle extensiepagina's die in het venster Ontwikkelaarstools worden weergegeven, hebben toegang tot alle onderdelen van de chrome.devtools API, evenals alle andere extensie-API's.

U kunt de methode devtools.panels.setOpenResourceHandler gebruiken om een callbackfunctie te installeren die gebruikersverzoeken afhandelt om een resource te openen (meestal een klik op een resourcelink in het venster Ontwikkelaarstools). Er wordt maximaal één van de geïnstalleerde handlers aangeroepen; gebruikers kunnen (via het dialoogvenster Instellingen Ontwikkelaarstools) het standaardgedrag of een extensie specificeren om verzoeken voor het openen van resources af te handelen. Als een extensie ` setOpenResourceHandler() meerdere keren aanroept, wordt alleen de laatste handler behouden.

Zie het overzicht van de DevTools API's voor een algemene introductie tot het gebruik van de Developer Tools API's.

Manifest

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

"devtools_page"

Voorbeeld

De volgende code voegt een paneel uit Panel.html toe, weergegeven door FontPicker.png , aan de werkbalk van de ontwikkelaarstools en gelabeld als Font Picker :

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

De volgende code voegt een zijbalkpaneel met de titel 'Lettertype-eigenschappen' , zoals opgenomen in Sidebar.html , toe aan het paneel 'Elementen' en stelt de hoogte ervan in op 8ex :

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

De schermafbeelding illustreert het effect dat dit voorbeeld zou hebben op het venster Ontwikkelaarstools:

Extensiepictogrampaneel op de DevTools-werkbalk.

Om deze API uit te proberen, installeer je het API-voorbeeld voor ontwikkelaarstools uit de chrome-extension-samples- repository.

Soorten

Button

Een knop die door de extensie is aangemaakt.

Eigenschappen

aangeklikt
Event<functionvoidvoid>
Wordt geactiveerd wanneer er op de knop wordt geklikt.
De functie onClicked.addListener ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbelverzoek
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
update
leegte
Werkt de eigenschappen van de knop bij. Als sommige argumenten ontbreken of null zijn, worden de bijbehorende eigenschappen niet bijgewerkt.
De update ziet er als volgt uit:
```
(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
```
- pictogramPad
  string optioneel
  Pad naar het nieuwe pictogram van de knop.
- tooltipTekst
  string optioneel
  De tekst die als tooltip verschijnt wanneer de gebruiker de muis over de knop beweegt.
- gehandicapt
  boolean optioneel
  Of de knop is uitgeschakeld.

ElementsPanel

Dit vertegenwoordigt het paneel Elementen.

Eigenschappen

bijSelectieGewijzigd
Event<functionvoidvoid>
Wordt geactiveerd wanneer een object in het paneel wordt geselecteerd.
De functie onSelectionChanged.addListener ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbelverzoek
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
createSidebarPane
leegte
Hiermee wordt een venster in de zijbalk van het paneel gemaakt.
De functie createSidebarPane ziet er als volgt uit:
```
(title: string) => {...}
```
- titel
  snaar
  Tekst die wordt weergegeven in de zijbalk.
- retourneert
  Promise< ExtensionSidebarPane >
  In behandeling
  Een callback die wordt aangeroepen wanneer de zijbalk wordt aangemaakt.

ExtensionPanel

Geeft een paneel weer dat is gemaakt door een extensie.

Eigenschappen

verborgen
Event<functionvoidvoid>
Wordt geactiveerd wanneer de gebruiker het paneel verlaat.
De functie onHidden.addListener ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbelverzoek
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
onZoeken
Event<functionvoidvoid>
Wordt geactiveerd bij een zoekopdracht (start van een nieuwe zoekopdracht, navigatie door zoekresultaten of annulering van een zoekopdracht).
De functie onSearch.addListener ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbelverzoek
  functie
  De callback parameter ziet er als volgt uit:
```
(action: string, queryString?: string) => void
```
  - actie
    snaar
  - queryString
    string optioneel
getoond
Event<functionvoidvoid>
Wordt geactiveerd wanneer de gebruiker naar het paneel overschakelt.
De functie onShown.addListener ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbelverzoek
  functie
  De callback parameter ziet er als volgt uit:
```
(window: Window) => void
```
  - raam
    Raam
createStatusBarButton
leegte
Voegt een knop toe aan de statusbalk van het paneel.
De functie createStatusBarButton ziet er als volgt uit:
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- pictogramPad
  snaar
  Pad naar het pictogram van de knop. Het bestand moet een afbeelding van 64x24 pixels bevatten, bestaande uit twee pictogrammen van 32x24 pixels. Het linker pictogram wordt weergegeven wanneer de knop inactief is; het rechter pictogram wordt weergegeven wanneer de knop is ingedrukt.
- tooltipTekst
  snaar
  De tekst die als tooltip verschijnt wanneer de gebruiker de muis over de knop beweegt.
- gehandicapt
  booleaans
  Of de knop is uitgeschakeld.
- retourneert
  Knop
show
leegte
Chrome 140+
Het paneel wordt weergegeven door het bijbehorende tabblad te activeren.
De show ziet er als volgt uit:
```
() => {...}
```

ExtensionSidebarPane

Een zijbalk die door de extensie is aangemaakt.

Eigenschappen

verborgen
Event<functionvoidvoid>
Deze gebeurtenis wordt geactiveerd wanneer het zijbalkvenster verborgen raakt doordat de gebruiker overschakelt naar een ander paneel waarin het zijbalkvenster zich bevindt.
De functie onHidden.addListener ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbelverzoek
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
getoond
Event<functionvoidvoid>
Deze gebeurtenis wordt geactiveerd wanneer het zijbalkvenster zichtbaar wordt doordat de gebruiker overschakelt naar het paneel waarin het zich bevindt.
De functie onShown.addListener ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbelverzoek
  functie
  De callback parameter ziet er als volgt uit:
```
(window: Window) => void
```
  - raam
    Raam
setExpression
leegte
Hiermee wordt een expressie ingesteld die binnen de geïnspecteerde pagina wordt geëvalueerd. Het resultaat wordt weergegeven in het zijpaneel.
De functie setExpression ziet er als volgt uit:
```
(expression: string, rootTitle?: string) => {...}
```
- uitdrukking
  snaar
  Een expressie die moet worden geëvalueerd in de context van de geïnspecteerde pagina. JavaScript-objecten en DOM-nodes worden weergegeven in een uitklapbare boomstructuur, vergelijkbaar met de console/watch.
- rootTitle
  string optioneel
  Een optionele titel voor de wortel van de expressieboom.
- retourneert
  Promise<void>
  In behandeling
  Een callbackfunctie die wordt aangeroepen nadat het zijpaneel is bijgewerkt met de resultaten van de expressie-evaluatie.
setHeight
leegte
Hiermee wordt de hoogte van de zijbalk ingesteld.
De functie setHeight ziet er als volgt uit:
```
(height: string) => {...}
```
- hoogte
  snaar
  Een CSS-achtige afmetingsspecificatie, zoals '100px' of '12ex' .
setObject
leegte
Hiermee wordt een JSON-compatibel object ingesteld dat in het zijpaneel moet worden weergegeven.
De functie setObject ziet er als volgt uit:
```
(jsonObject: string, rootTitle?: string) => {...}
```
- jsonObject
  snaar
  Een object dat moet worden weergegeven in de context van de geïnspecteerde pagina. De evaluatie vindt plaats in de context van de aanroeper (API-client).
- rootTitle
  string optioneel
  Een optionele titel voor de wortel van de expressieboom.
- retourneert
  Promise<void>
  In behandeling
  Een callback die wordt aangeroepen nadat de zijbalk is bijgewerkt met het object.
setPage
leegte
Hiermee wordt een HTML-pagina ingesteld die in het zijpaneel moet worden weergegeven.
De setPage functie ziet er als volgt uit:
```
(path: string) => {...}
```
- pad
  snaar
  Relatief pad van een extensiepagina die in de zijbalk moet worden weergegeven.

SourcesPanel

Dit vertegenwoordigt het paneel 'Bronnen'.

Eigenschappen

bijSelectieGewijzigd
Event<functionvoidvoid>
Wordt geactiveerd wanneer een object in het paneel wordt geselecteerd.
De functie onSelectionChanged.addListener ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbelverzoek
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
createSidebarPane
leegte
Hiermee wordt een venster in de zijbalk van het paneel gemaakt.
De functie createSidebarPane ziet er als volgt uit:
```
(title: string) => {...}
```
- titel
  snaar
  Tekst die wordt weergegeven in de zijbalk.
- retourneert
  Promise< ExtensionSidebarPane >
  In behandeling
  Een callback die wordt aangeroepen wanneer de zijbalk wordt aangemaakt.

Theme

Chrome 99+

Thema gebruikt door DevTools.

Enum

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

"donker"
Donker thema.

Eigenschappen

elements

Elementenpaneel.

Type

Elementenpaneel

sources

Bronnenpaneel.

Type

Bronnenpaneel

themeName

Chrome 59+

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

Type

snaar

Methoden

create()

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

Hiermee wordt een uitbreidingspaneel aangemaakt.

Parameters

titel
snaar
De titel die naast het extensiepictogram in de werkbalk van de ontwikkelaarstools wordt weergegeven.
pictogramPad
snaar
Het pad van het paneelpictogram ten opzichte van de extensiemap.
paginapad
snaar
Het pad van de HTML-pagina van het paneel, relatief ten opzichte van de extensiemap.

Retourneert

Promise< ExtensionPanel >
In behandeling
Een functie die wordt aangeroepen wanneer het paneel wordt aangemaakt.

openResource()

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

Verzoek aan DevTools om een URL te openen in een ontwikkelaarstools-paneel.

Parameters

URL
snaar
De URL van de te openen bron.
regelnummer
nummer
Hiermee wordt het regelnummer opgegeven waarnaar gescrold moet worden wanneer de bron wordt geladen.
kolomnummer
nummer optioneel
Chrome 114+
Hiermee wordt het kolomnummer opgegeven waarnaar gescrold moet worden bij het laden van de bron.

Retourneert

Promise<void>
In behandeling
Een functie die wordt aangeroepen wanneer de bron succesvol is geladen.

setOpenResourceHandler()

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

Hiermee wordt de functie gespecificeerd die moet worden aangeroepen wanneer de gebruiker op een link in het venster Ontwikkelaarstools klikt. Om de handler uit te schakelen, roept u de methode aan zonder parameters of geeft u null als parameter door.

Parameters

terugbelverzoek
functie optioneel
De callback parameter ziet er als volgt uit:
```
(resource: Resource, lineNumber: number) => void
```
- bron
  Bron
  Een devtools.inspectedWindow.Resource -object voor de bron waarop is geklikt.
- regelnummer
  nummer
  Geeft het regelnummer aan binnen de bron waarop is geklikt.

setThemeChangeHandler()

Chrome 99+

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

Hiermee wordt de functie gespecificeerd die moet worden aangeroepen wanneer het huidige thema in DevTools verandert. Om de handler uit te schakelen, roept u de methode aan zonder parameters of geeft u null als parameter door.

Parameters

terugbelverzoek
functie optioneel
De callback parameter ziet er als volgt uit:
```
(theme: Theme) => void
```
- thema
  Thema
  Huidig thema in DevTools.

chrome.devtools.panels Stay organized with collections Save and categorize content based on your preferences.

Beschrijving

Manifest

Voorbeeld

Soorten

Button

Eigenschappen

ElementsPanel

Eigenschappen

ExtensionPanel

Eigenschappen

ExtensionSidebarPane

Eigenschappen

SourcesPanel

Eigenschappen

Theme

Enum

Eigenschappen

elements

Type

sources

Type

themeName

Type

Methoden

create()

Parameters

Retourneert

openResource()

Parameters

Retourneert

setOpenResourceHandler()

Parameters

setThemeChangeHandler()

Parameters

chrome.devtools.panels