Chrome kini mendukung namespace browser.* standar (tersedia mulai Chrome 148). Kami memperbarui dokumentasi secara bertahap. Baca selengkapnya di panduan transisi kami.

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

chrome.devtools.panels

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.

Setiap panel dan sidebar ekstensi ditampilkan sebagai halaman HTML terpisah. Semua halaman ekstensi yang ditampilkan di jendela Alat Developer memiliki akses ke semua bagian chrome.devtools API, serta semua API ekstensi lainnya.

Anda dapat menggunakan metode devtools.panels.setOpenResourceHandler untuk menginstal fungsi callback yang menangani permintaan pengguna untuk membuka resource (biasanya, mengklik 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.

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

Manifes

Kunci berikut harus dideklarasikan dalam manifes untuk menggunakan API ini.

"devtools_page"

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 mengilustrasikan efek yang akan dihasilkan contoh ini 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

Membuat panel di dalam sidebar panel.

Fungsi createSidebarPane terlihat seperti:
```
(title: string) => {...}
```
- judul
  
  string
  
  Teks yang ditampilkan di teks sidebar.
- return
  Promise<ExtensionSidebarPane>
  
  Chrome 152+
  
  Callback yang dipanggil saat sidebar dibuat.

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+ browser.* sejak Chrome 152

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

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

Fungsi setExpression terlihat seperti:
```
(expression: string, rootTitle?: string) => {...}
```
- 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.
- return
  Promise<void>
  
  Chrome 152+
  
  Callback yang dipanggil setelah panel sidebar diperbarui dengan hasil evaluasi ekspresi.
setHeight

void

Menetapkan tinggi sidebar.

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

void

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

Fungsi setObject terlihat seperti:
```
(jsonObject: string, rootTitle?: string) => {...}
```
- 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.
- return
  Promise<void>
  
  Chrome 152+
  
  Callback yang dipanggil setelah sidebar diperbarui dengan objek.
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

Membuat panel di dalam sidebar panel.

Fungsi createSidebarPane terlihat seperti:
```
(title: string) => {...}
```
- judul
  
  string
  
  Teks yang ditampilkan di teks sidebar.
- return
  Promise<ExtensionSidebarPane>
  
  Chrome 152+
  
  Callback yang dipanggil saat sidebar dibuat.

Theme

Chrome 99+ browser.* sejak Chrome 152

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+ browser.* sejak Chrome 152

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

Jenis

string

Metode

create()

browser.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
): 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.

Hasil

Promise<ExtensionPanel>

Chrome 152+

Fungsi yang dipanggil saat panel dibuat.

openResource()

browser.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
): 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+ browser.* sejak Chrome 152

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

Hasil

Promise<void>

Chrome 152+

Fungsi yang dipanggil saat resource berhasil dimuat.

setOpenResourceHandler()

browser.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+ browser.* sejak Chrome 152

browser.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

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