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 Developer Tools-venster: maak uw eigen panelen, krijg toegang tot bestaande panelen en voeg zijbalken toe.

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

U kunt de methode devtools.panels.setOpenResourceHandler gebruiken om een callback-functie te installeren die gebruikersverzoeken om een bron te openen afhandelt (meestal klikt u op een bronkoppeling in het venster Developer Tools). Hooguit wordt één van de geïnstalleerde handlers aangeroepen; gebruikers kunnen (met behulp van het dialoogvenster Instellingen voor ontwikkelaarstools) het standaardgedrag of een extensie opgeven om open verzoeken voor bronnen af te handelen. Als een extensie setOpenResourceHandler() meerdere keren aanroept, wordt alleen de laatste handler behouden.

Zie het overzicht van DevTools API's voor een algemene inleiding tot het gebruik van 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 toe in Panel.html , vertegenwoordigd door FontPicker.png op de werkbalk Developer Tools en gelabeld als Font Picker :

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

De volgende code voegt een zijbalkvenster in Sidebar.html met de titel Lettertype-eigenschappen toe aan het paneel Elementen, en stelt vervolgens de hoogte 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 Developer Tools:

Extensiepictogrampaneel op de DevTools-werkbalk.

Om deze API te proberen, installeert u het devtools panels API-voorbeeld uit de chrome-extension-samples- repository.

Soorten

Button

Een knop gemaakt door de extensie.

Eigenschappen

opgeklikt
Gebeurtenis<functionvoidvoid>
Wordt geactiveerd wanneer op de knop wordt geklikt.
De onClicked.addListener -functie ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
update
leegte
Werkt de kenmerken van de knop bij. Als sommige argumenten worden weggelaten of null zijn, worden de overeenkomstige attributen niet bijgewerkt.
De update ziet er als volgt uit:
```
(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
```
- iconPad
  tekenreeks optioneel
  Pad naar het nieuwe pictogram van de knop.
- tooltipTekst
  tekenreeks optioneel
  Tekst die wordt weergegeven als tooltip wanneer de gebruiker de muis over de knop beweegt.
- gehandicapt
  Booleaans optioneel
  Of de knop is uitgeschakeld.

ElementsPanel

Vertegenwoordigt het paneel Elementen.

Eigenschappen

onSelectieGewijzigd
Gebeurtenis<functionvoidvoid>
Wordt geactiveerd wanneer een object in het paneel wordt geselecteerd.
De onSelectionChanged.addListener -functie ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
createSidebarPane
leegte
Creëert een venster in de zijbalk van het paneel.
De createSidebarPane functie ziet er als volgt uit:
```
(title: string, callback?: function) => {...}
```
- titel
  snaar
  Tekst die wordt weergegeven in het bijschrift in de zijbalk.
- terugbellen
  functie optioneel
  De callback parameter ziet er als volgt uit:
```
(result: ExtensionSidebarPane) => void
```
  - resultaat
    ExtensieZijbalkPaan
    Een ExtensionSidebarPane-object voor het gemaakte zijbalkvenster.

ExtensionPanel

Vertegenwoordigt een paneel dat is gemaakt door uitbreiding.

Eigenschappen

opVerborgen
Gebeurtenis<functionvoidvoid>
Wordt geactiveerd wanneer de gebruiker het paneel verlaat.
De onHidden.addListener -functie ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
opZoeken
Gebeurtenis<functionvoidvoid>
Wordt geactiveerd na een zoekactie (start van een nieuwe zoekopdracht, navigatie in zoekresultaten of zoekopdracht die wordt geannuleerd).
De onSearch.addListener functie ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  functie
  De callback parameter ziet er als volgt uit:
```
(action: string, queryString?: string) => void
```
  - actie
    snaar
  - queryString
    tekenreeks optioneel
opGetoond
Gebeurtenis<functionvoidvoid>
Wordt geactiveerd wanneer de gebruiker naar het paneel overschakelt.
De onShown.addListener -functie ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  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 createStatusBarButton -functie ziet er als volgt uit:
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPad
  snaar
  Pad naar het pictogram van de knop. Het bestand moet een afbeelding van 64x24 pixels bevatten, bestaande uit twee pictogrammen van 32x24. Het linkerpictogram wordt gebruikt als de knop inactief is; het rechterpictogram wordt weergegeven wanneer de knop wordt ingedrukt.
- tooltipTekst
  snaar
  Tekst die wordt weergegeven als tooltip wanneer de gebruiker de muis over de knop beweegt.
- gehandicapt
  Booleaans
  Of de knop is uitgeschakeld.
- retourneert
  Knop

ExtensionSidebarPane

Een zijbalk gemaakt door de extensie.

Eigenschappen

opVerborgen
Gebeurtenis<functionvoidvoid>
Wordt geactiveerd wanneer het zijbalkvenster verborgen raakt als gevolg van het feit dat de gebruiker overschakelt van het paneel dat het zijbalkvenster bevat.
De onHidden.addListener -functie ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
opGetoond
Gebeurtenis<functionvoidvoid>
Wordt geactiveerd wanneer het zijbalkvenster zichtbaar wordt als gevolg van het overschakelen van de gebruiker naar het paneel waarin het wordt gehost.
De onShown.addListener -functie ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  functie
  De callback parameter ziet er als volgt uit:
```
(window: Window) => void
```
  - raam
    Raam
setExpressie
leegte
Stelt een expressie in die wordt geëvalueerd binnen de geïnspecteerde pagina. Het resultaat wordt weergegeven in het zijbalkvenster.
De setExpression functie ziet er als volgt uit:
```
(expression: string, rootTitle?: string, callback?: function) => {...}
```
- uitdrukking
  snaar
  Een expressie die moet worden geëvalueerd in de context van de geïnspecteerde pagina. JavaScript-objecten en DOM-knooppunten worden weergegeven in een uitbreidbare boom, vergelijkbaar met de console/watch.
- hoofdtitel
  tekenreeks optioneel
  Een optionele titel voor de hoofdmap van de expressieboom.
- terugbellen
  functie optioneel
  De callback parameter ziet er als volgt uit:
```
() => void
```
setHoogte
leegte
Stelt de hoogte van de zijbalk in.
De setHeight functie ziet er als volgt uit:
```
(height: string) => {...}
```
- hoogte
  snaar
  Een CSS-achtige groottespecificatie, zoals '100px' of '12ex' .
setObject
leegte
Stelt een JSON-compatibel object in dat wordt weergegeven in het zijbalkvenster.
De setObject functie ziet er als volgt uit:
```
(jsonObject: string, rootTitle?: string, callback?: function) => {...}
```
- jsonObject
  snaar
  Een object dat moet worden weergegeven in de context van de geïnspecteerde pagina. Geëvalueerd in de context van de beller (API-client).
- hoofdtitel
  tekenreeks optioneel
  Een optionele titel voor de hoofdmap van de expressieboom.
- terugbellen
  functie optioneel
  De callback parameter ziet er als volgt uit:
```
() => void
```
setPagina
leegte
Stelt in dat een HTML-pagina wordt weergegeven in het zijbalkvenster.
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

Vertegenwoordigt het paneel Bronnen.

Eigenschappen

onSelectieGewijzigd
Gebeurtenis<functionvoidvoid>
Wordt geactiveerd wanneer een object in het paneel wordt geselecteerd.
De onSelectionChanged.addListener -functie ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
createSidebarPane
leegte
Creëert een venster in de zijbalk van het paneel.
De createSidebarPane functie ziet er als volgt uit:
```
(title: string, callback?: function) => {...}
```
- titel
  snaar
  Tekst die wordt weergegeven in het bijschrift in de zijbalk.
- terugbellen
  functie optioneel
  De callback parameter ziet er als volgt uit:
```
(result: ExtensionSidebarPane) => void
```
  - resultaat
    ExtensieZijbalkPaan
    Een ExtensionSidebarPane-object voor het gemaakte zijbalkvenster.

Eigenschappen

elements

Elementen paneel.

Type

ElementenPanel

sources

Bronnenpaneel.

Type

BronnenPanel

themeName

Chroom 59+

De naam van het kleurthema 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,
  callback?: function,
)

Creëert een uitbreidingspaneel.

Parameters

titel
snaar
Titel die wordt weergegeven naast het extensiepictogram op de werkbalk Ontwikkelaarstools.
iconPad
snaar
Pad van het paneelpictogram ten opzichte van de extensiemap.
paginaPad
snaar
Pad van de HTML-pagina van het paneel ten opzichte van de extensiemap.
terugbellen
functie optioneel
De callback parameter ziet er als volgt uit:
```
(panel: ExtensionPanel) => void
```
- paneel
  Extensiepaneel
  Een ExtensionPanel-object dat het gemaakte paneel vertegenwoordigt.

openResource()

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

Vraagt DevTools om een URL te openen in een paneel met ontwikkelaarstools.

Parameters

URL
snaar
De URL van de bron die moet worden geopend.
lijnnummer
nummer
Specificeert het regelnummer waarnaar moet worden gescrolld wanneer de bron wordt geladen.
kolomNummer
nummer optioneel
Chroom 114+
Specificeert het kolomnummer waarnaar moet worden gescrolld wanneer de bron wordt geladen.
terugbellen
functie optioneel
De callback parameter ziet er als volgt uit:
```
() => void
```

setOpenResourceHandler()

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

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

Parameters

terugbellen
functie optioneel
De callback parameter ziet er als volgt uit:
```
(resource: Resource) => void
```
- bron
  Bron
  Een devtools.inspectedWindow.Resource -object voor de bron waarop is geklikt.