chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

Descrizione

Utilizza l'API chrome.devtools.panels per integrare l'estensione nell'interfaccia utente della finestra Strumenti per sviluppatori: crea i tuoi riquadri, accedi a quelli esistenti e aggiungi barre laterali.

Manifest

Per utilizzare questa API, le seguenti chiavi devono essere dichiarate nel file manifest.

"devtools_page"

Consulta il riepilogo delle API DevTools per un'introduzione generale all'utilizzo delle API Strumenti per sviluppatori.

Panoramica

Ogni riquadro e barra laterale dell'estensione viene visualizzato come pagina HTML separata. Tutte le pagine delle estensioni visualizzate nella finestra Strumenti per sviluppatori hanno accesso a tutti i moduli dell'API chrome.devtools, nonché all'API chrome.extension. Altre API di estensione non sono disponibili per le pagine all'interno della finestra Strumenti per sviluppatori, ma puoi richiamarle inviando una richiesta alla pagina in background dell'estensione, in modo simile a come avviene negli script di contenuti.

Puoi utilizzare il metodo devtools.panels.setOpenResourceHandler per installare una funzione di callback che gestisce le richieste degli utenti di aprire una risorsa (in genere, un clic su un link della risorsa nella finestra degli strumenti per sviluppatori). Viene chiamato al massimo uno dei gestori installati; gli utenti possono specificare (utilizzando la finestra di dialogo Impostazioni degli strumenti per sviluppatori) il comportamento predefinito o un'estensione per gestire le richieste di apertura delle risorse. Se un'estensione chiama setOpenResourceHandler() più volte, viene conservato solo l'ultimo gestore.

Esempi

Il seguente codice aggiunge un riquadro contenuto in Panel.html, rappresentato da FontPicker.png nella barra degli strumenti Strumenti per sviluppatori ed etichettato come Selettore di caratteri:

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

Il seguente codice aggiunge un riquadro della barra laterale contenuto in Sidebar.html e intitolato Proprietà carattere al riquadro Elementi, quindi imposta la sua altezza su 8ex:

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

Questo screenshot mostra l'effetto che gli esempi precedenti avrebbero sulla finestra degli strumenti per sviluppatori:

Riquadro dell'icona dell'estensione nella barra degli strumenti di DevTools

Per provare questa API, installa l'esempio di API dei riquadri di DevTools dal repository chrome-extension-samples.

Tipi

Button

Un pulsante creato dall'estensione.

Proprietà

  • onClicked

    Event<functionvoidvoid>

    Attivato quando si fa clic sul pulsante.

    La funzione onClicked.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • update

    void

    Aggiorna gli attributi del pulsante. Se alcuni argomenti vengono omessi o sono null, gli attributi corrispondenti non vengono aggiornati.

    La funzione update ha il seguente aspetto: 

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

    • iconPath

      stringa facoltativa

      Percorso della nuova icona del pulsante.

    • tooltipText

      stringa facoltativa

      Testo mostrato come descrizione comando quando l'utente passa il mouse sopra il pulsante.

    • disabilitato

      boolean facoltativo

      Indica se il pulsante è disattivato.

ElementsPanel

Rappresenta il riquadro Elementi.

Proprietà

  • onSelectionChanged

    Event<functionvoidvoid>

    Attivato quando un oggetto viene selezionato nel riquadro.

    La funzione onSelectionChanged.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • createSidebarPane

    void

    Promise

    Crea un riquadro all'interno della barra laterale del riquadro.

    La funzione createSidebarPane ha il seguente aspetto: 

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

    • titolo

      stringa

      Testo visualizzato nella didascalia della barra laterale.

    • callback

      funzione elemento facoltativo

      Il parametro callback ha il seguente aspetto: 

      (result: ExtensionSidebarPane) => void

      • Un oggetto ExtensionSidebarPane per il riquadro della barra laterale creato.

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152+

      Un callback richiamato quando viene creata la barra laterale.

      Le promise sono supportate solo per Manifest V3 e versioni successive, mentre le altre piattaforme devono utilizzare i callback.

ExtensionPanel

Rappresenta un riquadro creato da un'estensione.

Proprietà

  • onHidden

    Event<functionvoidvoid>

    Attivato quando l'utente esce dal riquadro.

    La funzione onHidden.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • onSearch

    Event<functionvoidvoid>

    Attivato in seguito a un'azione di ricerca (inizio di una nuova ricerca, navigazione nei risultati di ricerca o annullamento della ricerca).

    La funzione onSearch.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

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

      • azione

        stringa

      • queryString

        stringa facoltativa

  • onShown

    Event<functionvoidvoid>

    Attivato quando l'utente passa al riquadro.

    La funzione onShown.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      (window: Window) => void

      • finestra

        Finestra

  • createStatusBarButton

    void

    Aggiunge un pulsante alla barra di stato del riquadro.

    La funzione createStatusBarButton ha il seguente aspetto: 

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

    • iconPath

      stringa

      Percorso dell'icona del pulsante. Il file deve contenere un'immagine di 64 x 24 pixel composta da due icone di 32 x 24. L'icona a sinistra viene utilizzata quando il pulsante non è attivo; l'icona a destra viene visualizzata quando il pulsante viene premuto.

    • tooltipText

      stringa

      Testo mostrato come descrizione comando quando l'utente passa il mouse sopra il pulsante.

    • disabilitato

      booleano

      Indica se il pulsante è disattivato.

  • mostra

    void

    Chrome 140+

    Mostra il riquadro attivando la scheda corrispondente.

    La funzione show ha il seguente aspetto: 

    () => {...}

ExtensionSidebarPane

Una barra laterale creata dall'estensione.

Proprietà

  • onHidden

    Event<functionvoidvoid>

    Attivato quando il riquadro della barra laterale viene nascosto perché l'utente si allontana dal riquadro che lo ospita.

    La funzione onHidden.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Attivato quando il riquadro della barra laterale diventa visibile in seguito al passaggio dell'utente al riquadro che lo ospita.

    La funzione onShown.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      (window: Window) => void

      • finestra

        Finestra

  • setExpression

    void

    Promise

    Imposta un'espressione che viene valutata all'interno della pagina ispezionata. Il risultato viene visualizzato nel riquadro della barra laterale.

    La funzione setExpression ha il seguente aspetto: 

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

    • espressione

      stringa

      Un'espressione da valutare nel contesto della pagina ispezionata. Gli oggetti JavaScript e i nodi DOM vengono visualizzati in un albero espandibile simile alla console/watch.

    • rootTitle

      stringa facoltativa

      Un titolo facoltativo per la radice dell'albero delle espressioni.

    • callback

      funzione elemento facoltativo

      Il parametro callback ha il seguente aspetto: 

      () => void

    • returns

      Promise<void>

      Chrome 152+

      Un callback richiamato dopo l'aggiornamento del riquadro della barra laterale con i risultati della valutazione dell'espressione.

      Le promise sono supportate solo per Manifest V3 e versioni successive, mentre le altre piattaforme devono utilizzare i callback.

  • setHeight

    void

    Imposta l'altezza della barra laterale.

    La funzione setHeight ha il seguente aspetto: 

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

    • altezza

      stringa

      Una specifica delle dimensioni simile a CSS, ad esempio '100px' o '12ex'.

  • setObject

    void

    Promise

    Imposta un oggetto conforme a JSON da visualizzare nel riquadro della barra laterale.

    La funzione setObject ha il seguente aspetto: 

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

    • jsonObject

      stringa

      Un oggetto da visualizzare nel contesto della pagina ispezionata. Valutato nel contesto del chiamante (client API).

    • rootTitle

      stringa facoltativa

      Un titolo facoltativo per la radice dell'albero delle espressioni.

    • callback

      funzione elemento facoltativo

      Il parametro callback ha il seguente aspetto: 

      () => void

    • returns

      Promise<void>

      Chrome 152+

      Un callback richiamato dopo l'aggiornamento della barra laterale con l'oggetto.

      Le promise sono supportate solo per Manifest V3 e versioni successive, mentre le altre piattaforme devono utilizzare i callback.

  • setPage

    void

    Imposta una pagina HTML da visualizzare nel riquadro della barra laterale.

    La funzione setPage ha il seguente aspetto: 

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

    • percorso

      stringa

      Percorso relativo di una pagina dell'estensione da visualizzare nella barra laterale.

SourcesPanel

Rappresenta il riquadro Fonti.

Proprietà

  • onSelectionChanged

    Event<functionvoidvoid>

    Attivato quando un oggetto viene selezionato nel riquadro.

    La funzione onSelectionChanged.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • createSidebarPane

    void

    Promise

    Crea un riquadro all'interno della barra laterale del riquadro.

    La funzione createSidebarPane ha il seguente aspetto: 

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

    • titolo

      stringa

      Testo visualizzato nella didascalia della barra laterale.

    • callback

      funzione elemento facoltativo

      Il parametro callback ha il seguente aspetto: 

      (result: ExtensionSidebarPane) => void

      • Un oggetto ExtensionSidebarPane per il riquadro della barra laterale creato.

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152+

      Un callback richiamato quando viene creata la barra laterale.

      Le promise sono supportate solo per Manifest V3 e versioni successive, mentre le altre piattaforme devono utilizzare i callback.

Theme

Chrome 99 e versioni successive

Tema utilizzato da DevTools.

Enum

"default"
Tema predefinito di DevTools. Questo è sempre il tema chiaro.

"dark"
Tema scuro.

Proprietà

elements

Riquadro Elementi.

Tipo

ElementsPanel

sources

Riquadro Fonti.

Tipo

SourcesPanel

themeName

Chrome 59 e versioni successive

Il nome del tema cromatico impostato nelle impostazioni di DevTools dell'utente. I valori possibili sono: default (predefinito) e dark.

Tipo

stringa

Metodi

create()

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

Crea un riquadro delle estensioni.

Parametri

  • titolo

    stringa

    Titolo visualizzato accanto all'icona dell'estensione nella barra degli strumenti Strumenti per sviluppatori.

  • iconPath

    stringa

    Percorso dell'icona del riquadro relativo alla directory dell'estensione.

  • pagePath

    stringa

    Percorso della pagina HTML del riquadro relativo alla directory dell'estensione.

  • callback

    funzione elemento facoltativo

    Il parametro callback ha il seguente aspetto: 

    (panel: ExtensionPanel) => void

    • pannello

      ExtensionPanel

      Un oggetto ExtensionPanel che rappresenta il riquadro creato.

Resi

  • Promise<ExtensionPanel>

    Chrome 152+

    Una funzione che viene chiamata quando viene creato il riquadro.

    Le promise sono supportate solo per Manifest V3 e versioni successive, mentre le altre piattaforme devono utilizzare i callback.

openResource()

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

Richiede a DevTools di aprire un URL in un riquadro Strumenti per sviluppatori.

Parametri

  • url

    stringa

    L'URL della risorsa da aprire.

  • lineNumber

    numero

    Specifica il numero di riga a cui scorrere quando la risorsa viene caricata.

  • columnNumber

    number optional

    Chrome 114 e versioni successive

    Specifica il numero di colonna a cui scorrere quando la risorsa viene caricata.

  • callback

    funzione elemento facoltativo

    Il parametro callback ha il seguente aspetto: 

    () => void

Resi

  • Promise<void>

    Chrome 152+

    Una funzione che viene chiamata quando la risorsa è stata caricata correttamente.

    Le promise sono supportate solo per Manifest V3 e versioni successive, mentre le altre piattaforme devono utilizzare i callback.

setOpenResourceHandler()

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

Specifica la funzione da chiamare quando l'utente fa clic su un link alla risorsa nella finestra degli strumenti per sviluppatori. Per annullare l'impostazione del gestore, chiama il metodo senza parametri o passa null come parametro.

Parametri

  • callback

    funzione elemento facoltativo

    Il parametro callback ha il seguente aspetto: 

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

    • risorsa

      Risorsa

      Un oggetto devtools.inspectedWindow.Resource per la risorsa su cui è stato fatto clic.

    • lineNumber

      numero

      Specifica il numero di riga all'interno della risorsa su cui è stato fatto clic.

setThemeChangeHandler()

Chrome 99 e versioni successive 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

Specifica la funzione da chiamare quando il tema corrente cambia in DevTools. Per annullare l'impostazione del gestore, chiama il metodo senza parametri o passa null come parametro.

Parametri

  • callback

    funzione elemento facoltativo

    Il parametro callback ha il seguente aspetto: 

    (theme: Theme) => void

    • tema

      Tema

      Tema attuale in DevTools.