Deze pagina is vertaald door de Cloud Translation API.

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

Beschrijving

Gebruik de API chrome.devtools.panels om uw extensie te integreren in de gebruikersinterface van het Developer Tools-venster: maak uw eigen panelen, open bestaande panelen en voeg zijbalken toe.

Manifest

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

"devtools_page"

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

Overzicht

Elk extensiepaneel en elke zijbalk wordt weergegeven als een aparte HTML-pagina. Alle extensiepagina's die in het venster Developer Tools worden weergegeven, hebben toegang tot alle modules in de chrome.devtools API en de chrome.extension API. Andere extensie-API's zijn niet beschikbaar voor de pagina's in het venster Developer Tools, maar u kunt ze aanroepen door een verzoek te sturen naar de achtergrondpagina van uw extensie, net zoals dat gebeurt in de contentscripts .

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

Voorbeelden

De volgende code voegt een paneel toe dat is opgenomen in Panel.html , vertegenwoordigd door FontPicker.png op de werkbalk Developer Tools en is 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 de hoogte ervan in op 8ex :

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

Deze schermafbeelding toont welk effect de bovenstaande voorbeelden zouden hebben op het venster Developer Tools:

Extensiepictogrampaneel op de DevTools-werkbalk

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

Typen

Button

Een knop die door de extensie is gemaakt.

Eigenschappen

opGeklikt
Gebeurtenis<functievoidvoid>
Wordt geactiveerd wanneer op de knop wordt geklikt.
De functie onClicked.addListener 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 , worden de bijbehorende kenmerken 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
  Tekst die als knopinfo wordt weergegeven wanneer de gebruiker met de muis over de knop beweegt.
- gehandicapt
  boolean optioneel
  Of de knop is uitgeschakeld.

ElementsPanel

Vertegenwoordigt het Elementenpaneel.

Eigenschappen

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

ExtensionPanel

Geeft een paneel weer dat is gemaakt door een extensie.

Eigenschappen

onHidden
Gebeurtenis<functievoidvoid>
Wordt geactiveerd wanneer de gebruiker het paneel verlaat.
De functie onHidden.addListener ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
opZoeken
Gebeurtenis<functievoidvoid>
Wordt geactiveerd bij een zoekactie (start van een nieuwe zoekopdracht, navigatie door zoekresultaten of annulering van een zoekopdracht).
De functie onSearch.addListener 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
    string optioneel
opGetoond
Gebeurtenis<functievoidvoid>
Wordt geactiveerd wanneer de gebruiker naar het paneel overschakelt.
De functie onShown.addListener 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 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 linkerpictogram wordt gebruikt wanneer de knop inactief is; het rechterpictogram wordt weergegeven wanneer de knop wordt ingedrukt.
- tooltipTekst
  snaar
  Tekst die als knopinfo wordt weergegeven wanneer de gebruiker met de muis over de knop beweegt.
- gehandicapt
  Booleaanse
  Of de knop is uitgeschakeld.
- retouren
  Knop

ExtensionSidebarPane

Een zijbalk gemaakt door de extensie.

Eigenschappen

onHidden
Gebeurtenis<functievoidvoid>
Wordt geactiveerd wanneer het zijbalkvenster verborgen raakt doordat de gebruiker het paneel verlaat waarop het zijbalkvenster zich bevindt.
De functie onHidden.addListener ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  functie
  De callback parameter ziet er als volgt uit:
```
() => void
```
opGetoond
Gebeurtenis<functievoidvoid>
Wordt geactiveerd wanneer het zijbalkvenster zichtbaar wordt doordat de gebruiker overschakelt naar het paneel waarop het wordt gehost.
De functie onShown.addListener 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 binnen de geïnspecteerde pagina wordt geëvalueerd. 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 uitvouwbare boomstructuur, vergelijkbaar met de console/watch.
- rootTitle
  string optioneel
  Een optionele titel voor de root van de expressieboom.
- terugbellen
  functie optioneel
  De callback parameter ziet er als volgt uit:
```
() => void
```
ingestelde hoogte
leegte
Stelt de hoogte van de zijbalk in.
De setHeight -functie ziet er als volgt uit:
```
(height: string) => {...}
```
- hoogte
  snaar
  Een CSS-achtige specificatie van de grootte, zoals '100px' of '12ex' .
setObject
leegte
Hiermee stelt u in dat een JSON-compatibel object 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 aanroeper (API-client).
- rootTitle
  string optioneel
  Een optionele titel voor de root van de expressieboom.
- terugbellen
  functie optioneel
  De callback parameter ziet er als volgt uit:
```
() => void
```
setPagina
leegte
Hiermee stelt u in dat een HTML-pagina in het zijbalkvenster wordt 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

Vertegenwoordigt het paneel Bronnen.

Eigenschappen

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

Eigenschappen

elements

Elementenpaneel.

Type

Elementenpaneel

sources

Bronnenpaneel.

Type

Bronnenpaneel

themeName

Chroom 59+

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

Type

snaar

Methoden

create()

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

Maakt een extensiepaneel.

Parameters

titel
snaar
Titel die naast het extensiepictogram in de werkbalk Hulpmiddelen voor ontwikkelaars wordt weergegeven.
pictogramPad
snaar
Pad van het paneelpictogram relatief ten opzichte van de extensiemap.
paginapad
snaar
Pad van de HTML-pagina van het paneel relatief ten opzichte van de extensiemap.
terugbellen
functie optioneel
De callback parameter ziet er als volgt uit:
```
(panel: ExtensionPanel) => void
```
- paneel
  Uitbreidingspaneel
  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 Developer Tools-paneel.

Parameters

url
snaar
De URL van de te openen bron.
regelnummer
nummer
Geeft het regelnummer op waarnaar moet worden gescrold wanneer de resource is geladen.
kolomnummer
nummer optioneel
Chroom 114+
Geeft het kolomnummer op waarnaar moet worden gescrold wanneer de resource is geladen.
terugbellen
functie optioneel
De callback parameter ziet er als volgt uit:
```
() => void
```

setOpenResourceHandler()

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

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

Parameters

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

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

Beschrijving

Manifest

Overzicht

Voorbeelden

Typen

Button

Eigenschappen

ElementsPanel

Eigenschappen

ExtensionPanel

Eigenschappen

ExtensionSidebarPane

Eigenschappen

SourcesPanel

Eigenschappen

Eigenschappen

elements

Type

sources

Type

themeName

Type

Methoden

create()

Parameters

openResource()

Parameters

setOpenResourceHandler()

Parameters

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