Ekstensi Manifest V2 dihapus dari Chrome Web Store pada 31 Agustus 2026. Migrasikan ekstensi Anda ke Manifest V3 agar tersedia lagi bagi pengguna.

Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

Deskripsi

Gunakan chrome.devtools.panels API untuk mengintegrasikan ekstensi Anda ke UI jendela Alat Developer: buat panel Anda sendiri, akses panel yang ada, dan tambahkan sidebar.

Manifes

Kunci berikut harus dideklarasikan dalam manifes untuk menggunakan API ini.

"devtools_page"

Lihat Ringkasan API DevTools untuk pengantar umum tentang penggunaan API Alat Developer.

Ringkasan

Setiap panel dan sidebar ekstensi ditampilkan sebagai halaman HTML terpisah. Semua halaman ekstensi yang ditampilkan di jendela Developer Tools memiliki akses ke semua modul di chrome.devtools API, serta ke chrome.extension API. API ekstensi lainnya tidak tersedia untuk halaman dalam jendela Developer Tools, tetapi Anda dapat memanggilnya dengan mengirimkan permintaan ke halaman latar belakang ekstensi, mirip dengan cara yang dilakukan dalam skrip konten.

Anda dapat menggunakan metode devtools.panels.setOpenResourceHandler untuk menginstal fungsi callback yang menangani permintaan pengguna untuk membuka resource (biasanya, klik pada link resource di jendela Alat Developer). Maksimal satu pengendali yang diinstal akan dipanggil; pengguna dapat menentukan (menggunakan dialog Setelan Alat Developer) perilaku default atau ekstensi untuk menangani permintaan pembukaan resource. Jika ekstensi memanggil setOpenResourceHandler() beberapa kali, hanya pengendali terakhir yang dipertahankan.

Contoh

Kode berikut menambahkan panel yang terdapat dalam Panel.html, yang diwakili oleh FontPicker.png di toolbar Alat Developer dan diberi label sebagai Font Picker:

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

Kode berikut menambahkan panel sidebar yang terdapat dalam Sidebar.html dan berjudul Font Properties ke panel Elements, lalu menetapkan tingginya ke 8ex:

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

Screenshot ini menunjukkan efek yang akan diberikan contoh di atas pada jendela Developer Tools:

Panel ikon ekstensi di toolbar DevTools

Untuk mencoba API ini, instal contoh API panel devtools dari repositori chrome-extension-samples.

Jenis

Button

Tombol yang dibuat oleh ekstensi.

Properti

onClicked

Event<functionvoidvoid>

Diaktifkan saat tombol diklik.

Fungsi onClicked.addListener terlihat seperti:
```
(callback: function) => {...}
```
- callback
  
  fungsi
  
  Parameter callback terlihat seperti:
```
() => void
```
update

void

Memperbarui atribut tombol. Jika beberapa argumen dihilangkan atau null, atribut yang sesuai tidak akan diperbarui.

Fungsi update terlihat seperti:
```
(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
```
- iconPath
  
  string opsional
  
  Jalur ke ikon baru tombol.
- tooltipText
  
  string opsional
  
  Teks ditampilkan sebagai tooltip saat pengguna mengarahkan kursor ke tombol.
- nonaktif
  
  boolean opsional
  
  Apakah tombol dinonaktifkan.

ElementsPanel

Mewakili panel Elemen.

Properti

onSelectionChanged

Event<functionvoidvoid>

Diaktifkan saat objek dipilih di panel.

Fungsi onSelectionChanged.addListener terlihat seperti:
```
(callback: function) => {...}
```
- callback
  
  fungsi
  
  Parameter callback terlihat seperti:
```
() => void
```
createSidebarPane

void

Promise

Membuat panel di dalam sidebar panel.

Fungsi createSidebarPane terlihat seperti:
```
(title: string, callback?: function) => {...}
```
- judul
  
  string
  
  Teks yang ditampilkan di teks sidebar.
- callback
  
  fungsi opsional
  
  Parameter callback terlihat seperti:
```
(result: ExtensionSidebarPane) => void
```
  - hasil
    
    ExtensionSidebarPane
    
    Objek ExtensionSidebarPane untuk panel sidebar yang dibuat.
- return
  Promise<ExtensionSidebarPane>
  
  Chrome 152+
  
  Callback yang dipanggil saat sidebar dibuat.
  
  Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain harus menggunakan callback.

ExtensionPanel

Mewakili panel yang dibuat oleh ekstensi.

Properti

onHidden

Event<functionvoidvoid>

Diaktifkan saat pengguna beralih dari panel.

Fungsi onHidden.addListener terlihat seperti:
```
(callback: function) => {...}
```
- callback
  
  fungsi
  
  Parameter callback terlihat seperti:
```
() => void
```
onSearch

Event<functionvoidvoid>

Diaktifkan saat tindakan penelusuran (memulai penelusuran baru, navigasi hasil penelusuran, atau penelusuran dibatalkan).

Fungsi onSearch.addListener terlihat seperti:
```
(callback: function) => {...}
```
- callback
  
  fungsi
  
  Parameter callback terlihat seperti:
```
(action: string, queryString?: string) => void
```
  - tindakan
    
    string
  - queryString
    
    string opsional
onShown

Event<functionvoidvoid>

Diaktifkan saat pengguna beralih ke panel.

Fungsi onShown.addListener terlihat seperti:
```
(callback: function) => {...}
```
- callback
  
  fungsi
  
  Parameter callback terlihat seperti:
```
(window: Window) => void
```
  - jendela
    
    Jendela
createStatusBarButton

void

Menambahkan tombol ke status bar panel.

Fungsi createStatusBarButton terlihat seperti:
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPath
  
  string
  
  Jalur ke ikon tombol. File harus berisi gambar berukuran 64x24 piksel yang terdiri dari dua ikon berukuran 32x24. Ikon kiri digunakan saat tombol tidak aktif; ikon kanan ditampilkan saat tombol ditekan.
- tooltipText
  
  string
  
  Teks ditampilkan sebagai tooltip saat pengguna mengarahkan kursor ke tombol.
- nonaktif
  
  boolean
  
  Apakah tombol dinonaktifkan.
- return
  Tombol
tunjukkan

void

Chrome 140+

Menampilkan panel dengan mengaktifkan tab yang sesuai.

Fungsi show terlihat seperti:
```
() => {...}
```

ExtensionSidebarPane

Sidebar yang dibuat oleh ekstensi.

Properti

onHidden

Event<functionvoidvoid>

Diaktifkan saat panel sidebar menjadi tersembunyi akibat pengguna beralih dari panel yang menghosting panel sidebar.

Fungsi onHidden.addListener terlihat seperti:
```
(callback: function) => {...}
```
- callback
  
  fungsi
  
  Parameter callback terlihat seperti:
```
() => void
```
onShown

Event<functionvoidvoid>

Diaktifkan saat panel sidebar terlihat sebagai hasil dari pengguna yang beralih ke panel yang menghostingnya.

Fungsi onShown.addListener terlihat seperti:
```
(callback: function) => {...}
```
- callback
  
  fungsi
  
  Parameter callback terlihat seperti:
```
(window: Window) => void
```
  - jendela
    
    Jendela
setExpression

void

Promise

Menetapkan ekspresi yang dievaluasi dalam halaman yang diperiksa. Hasilnya akan ditampilkan di panel sidebar.

Fungsi setExpression terlihat seperti:
```
(expression: string, rootTitle?: string, callback?: function) => {...}
```
- ekspresi
  
  string
  
  Ekspresi yang akan dievaluasi dalam konteks halaman yang diperiksa. Objek JavaScript dan node DOM ditampilkan dalam hierarki yang dapat diperluas, mirip dengan konsol/watch.
- rootTitle
  
  string opsional
  
  Judul opsional untuk root hierarki ekspresi.
- callback
  
  fungsi opsional
  
  Parameter callback terlihat seperti:
```
() => void
```
- return
  Promise<void>
  
  Chrome 152+
  
  Callback yang dipanggil setelah panel sidebar diperbarui dengan hasil evaluasi ekspresi.
  
  Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain harus menggunakan callback.
setHeight

void

Menetapkan tinggi sidebar.

Fungsi setHeight terlihat seperti:
```
(height: string) => {...}
```
- tinggi
  
  string
  
  Spesifikasi ukuran seperti CSS, misalnya '100px' atau '12ex'.
setObject

void

Promise

Menetapkan objek yang sesuai dengan JSON untuk ditampilkan di panel sidebar.

Fungsi setObject terlihat seperti:
```
(jsonObject: string, rootTitle?: string, callback?: function) => {...}
```
- jsonObject
  
  string
  
  Objek yang akan ditampilkan dalam konteks halaman yang diperiksa. Dievaluasi dalam konteks pemanggil (klien API).
- rootTitle
  
  string opsional
  
  Judul opsional untuk root hierarki ekspresi.
- callback
  
  fungsi opsional
  
  Parameter callback terlihat seperti:
```
() => void
```
- return
  Promise<void>
  
  Chrome 152+
  
  Callback yang dipanggil setelah sidebar diperbarui dengan objek.
  
  Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain harus menggunakan callback.
setPage

void

Menetapkan halaman HTML yang akan ditampilkan di panel sidebar.

Fungsi setPage terlihat seperti:
```
(path: string) => {...}
```
- jalur
  
  string
  
  Jalur relatif halaman ekstensi yang akan ditampilkan di sidebar.

SourcesPanel

Mewakili panel Sources.

Properti

onSelectionChanged

Event<functionvoidvoid>

Diaktifkan saat objek dipilih di panel.

Fungsi onSelectionChanged.addListener terlihat seperti:
```
(callback: function) => {...}
```
- callback
  
  fungsi
  
  Parameter callback terlihat seperti:
```
() => void
```
createSidebarPane

void

Promise

Membuat panel di dalam sidebar panel.

Fungsi createSidebarPane terlihat seperti:
```
(title: string, callback?: function) => {...}
```
- judul
  
  string
  
  Teks yang ditampilkan di teks sidebar.
- callback
  
  fungsi opsional
  
  Parameter callback terlihat seperti:
```
(result: ExtensionSidebarPane) => void
```
  - hasil
    
    ExtensionSidebarPane
    
    Objek ExtensionSidebarPane untuk panel sidebar yang dibuat.
- return
  Promise<ExtensionSidebarPane>
  
  Chrome 152+
  
  Callback yang dipanggil saat sidebar dibuat.
  
  Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain harus menggunakan callback.

Theme

Chrome 99+

Tema yang digunakan oleh DevTools.

Enum

"default"
Tema DevTools default. Tema ini selalu berupa tema terang.

"dark"
Tema gelap.

Properti

elements

Panel Elements.

Jenis

ElementsPanel

sources

Panel Sources.

Jenis

SourcesPanel

themeName

Chrome 59+

Nama tema warna yang ditetapkan di setelan DevTools pengguna. Nilai yang mungkin: default (default) dan dark.

Jenis

string

Metode

create()

Promise

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

Membuat panel ekstensi.

Parameter

judul

string

Judul yang ditampilkan di samping ikon ekstensi di toolbar Developer Tools.
iconPath

string

Jalur ikon panel yang relatif terhadap direktori ekstensi.
pagePath

string

Jalur halaman HTML panel yang relatif terhadap direktori ekstensi.
callback

fungsi opsional

Parameter callback terlihat seperti:
```
(panel: ExtensionPanel) => void
```
- panel
  
  ExtensionPanel
  
  Objek ExtensionPanel yang mewakili panel yang dibuat.

Hasil

Promise<ExtensionPanel>

Chrome 152+

Fungsi yang dipanggil saat panel dibuat.

Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain harus menggunakan callback.

openResource()

Promise

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

Meminta DevTools untuk membuka URL di panel Developer Tools.

Parameter

url

string

URL resource yang akan dibuka.
lineNumber

angka

Menentukan nomor baris yang akan di-scroll saat resource dimuat.
columnNumber

number opsional

Chrome 114+

Menentukan nomor kolom yang akan di-scroll saat resource dimuat.
callback

fungsi opsional

Parameter callback terlihat seperti:
```
() => void
```

Hasil

Promise<void>

Chrome 152+

Fungsi yang dipanggil saat resource berhasil dimuat.

Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain harus menggunakan callback.

setOpenResourceHandler()

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

Menentukan fungsi yang akan dipanggil saat pengguna mengklik link resource di jendela alat developer. Untuk membatalkan penetapan pengendali, panggil metode tanpa parameter atau teruskan null sebagai parameter.

Parameter

callback

fungsi opsional

Parameter callback terlihat seperti:
```
(resource: Resource, lineNumber: number) => void
```
- resource
  
  Resource
  
  Objek devtools.inspectedWindow.Resource untuk resource yang diklik.
- lineNumber
  
  angka
  
  Menentukan nomor baris dalam resource yang diklik.

setThemeChangeHandler()

Chrome 99+

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

Menentukan fungsi yang akan dipanggil saat tema saat ini berubah di DevTools. Untuk membatalkan penetapan pengendali, panggil metode tanpa parameter atau teruskan null sebagai parameter.

Parameter

callback

fungsi opsional

Parameter callback terlihat seperti:
```
(theme: Theme) => void
```
- tema
  
  Tema
  
  Tema saat ini di DevTools.

chrome.devtools.panels Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Deskripsi

Manifes

Ringkasan

Contoh

Jenis

Button

Properti

ElementsPanel

Properti

ExtensionPanel

Properti

ExtensionSidebarPane

Properti

SourcesPanel

Properti

Theme

Enum

Properti

elements

Jenis

sources

Jenis

themeName

Jenis

Metode

create()

Parameter

Hasil

openResource()

Parameter

Hasil

setOpenResourceHandler()

Parameter

setThemeChangeHandler()

Parameter

chrome.devtools.panels