Halaman ini diterjemahkan oleh Cloud Translation API.

chrome.devtools.panels

Deskripsi

Gunakan chrome.devtools.panels API untuk mengintegrasikan ekstensi Anda ke UI jendela Developer Tools: membuat panel sendiri, mengakses panel yang ada, dan menambahkan sidebar.

Manifes

Kunci berikut harus dideklarasikan dalam manifes untuk menggunakan API ini.

"devtools_page"

Lihat ringkasan API DevTools untuk pengantar umum tentang penggunaan API Developer Tools.

Ringkasan

Setiap panel ekstensi dan sidebar ditampilkan sebagai halaman HTML terpisah. Semua halaman ekstensi ditampilkan di jendela Developer Tools memiliki akses ke semua modul di chrome.devtools API, serta API chrome.extension. API ekstensi lainnya tidak tersedia untuk halaman dalam Developer jendela alat, namun Anda dapat mengaktifkannya dengan mengirim 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 sumber daya (biasanya, klik pada tautan sumber daya di jendela Developer Tools). Maksimal satu pengendali yang diinstal akan dipanggil; ditentukan pengguna (menggunakan dialog Setelan Developer Tools) perilaku default atau ekstensi untuk menangani resource membuka permintaan. Jika ekstensi memanggil setOpenResourceHandler() beberapa kali, hanya panggilan terakhir dipertahankan.

Contoh

Kode berikut menambahkan panel yang terdapat dalam Panel.html, yang diwakili oleh FontPicker.png di Toolbar Developer Tools dan diberi label sebagai Pemilih Font:

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

Kode berikut menambahkan panel sidebar yang ada di Sidebar.html dan berjudul Font Properties untuk panel Elements, lalu menyetel tingginya ke 8ex:

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

Screenshot ini menunjukkan pengaruh contoh di atas terhadap jendela Developer Tools:

Panel ikon ekstensi di toolbar DevTools

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

Jenis

Button

Tombol yang dibuat oleh ekstensi.

Properti

onClicked

Peristiwa<functionvoidvoid>

Diaktifkan saat tombol diklik.

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

void

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

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

ElementsPanel

Mewakili panel Elements.

Properti

onSelectionChanged

Peristiwa<functionvoidvoid>

Diaktifkan saat sebuah objek dipilih di panel.

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

void

Membuat panel dalam sidebar panel.

Fungsi createSidebarPane akan terlihat seperti ini:
```
(title: string, callback?: function) => {...}
```
- judul
  
  string
  
  Teks yang ditampilkan di teks sidebar.
- callback
  
  fungsi opsional
  
  Parameter callback terlihat seperti ini:
```
(result: ExtensionSidebarPane) => void
```
  - hasil
    
    ExtensionSidebarPane
    
    Objek ExtensionSidebarPane untuk panel sidebar yang dibuat.

ExtensionPanel

Mewakili panel yang dibuat oleh ekstensi.

Properti

onHidden

Peristiwa<functionvoidvoid>

Diaktifkan saat pengguna beralih dari panel.

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

Peristiwa<functionvoidvoid>

Diaktifkan berdasarkan tindakan penelusuran (awal penelusuran baru, navigasi hasil penelusuran, atau penelusuran dibatalkan).

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

Peristiwa<functionvoidvoid>

Diaktifkan saat pengguna beralih ke panel.

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

void

Menambahkan tombol ke status bar panel.

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

ExtensionSidebarPane

Sidebar yang dibuat oleh ekstensi.

Properti

onHidden

Peristiwa<functionvoidvoid>

Diaktifkan saat panel sidebar disembunyikan karena pengguna beralih dari panel yang menghosting panel sidebar.

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

Peristiwa<functionvoidvoid>

Diaktifkan saat panel sidebar terlihat sebagai akibat dari peralihan ke panel yang menghostingnya.

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

void

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

Fungsi setExpression akan terlihat seperti ini:
```
(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 yang mirip dengan konsol/smartwatch.
- rootTitle
  
  string opsional
  
  Judul opsional untuk akar hierarki ekspresi.
- callback
  
  fungsi opsional
  
  Parameter callback terlihat seperti ini:
```
() => void
```
setHeight

void

Menetapkan tinggi sidebar.

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

void

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

Fungsi setObject akan terlihat seperti ini:
```
(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 akar hierarki ekspresi.
- callback
  
  fungsi opsional
  
  Parameter callback terlihat seperti ini:
```
() => void
```
setPage

void

Menyetel halaman HTML untuk ditampilkan di panel sidebar.

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

SourcesPanel

Mewakili panel Sources.

Properti

onSelectionChanged

Peristiwa<functionvoidvoid>

Diaktifkan saat sebuah objek dipilih di panel.

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

void

Membuat panel dalam sidebar panel.

Fungsi createSidebarPane akan terlihat seperti ini:
```
(title: string, callback?: function) => {...}
```
- judul
  
  string
  
  Teks yang ditampilkan di teks sidebar.
- callback
  
  fungsi opsional
  
  Parameter callback terlihat seperti ini:
```
(result: ExtensionSidebarPane) => void
```
  - hasil
    
    ExtensionSidebarPane
    
    Objek ExtensionSidebarPane untuk panel sidebar yang dibuat.

Properti

elements

Panel elemen.

Jenis

ElementsPanel

sources

Panel sumber.

Jenis

SourcesPanel

themeName

Chrome 59 dan yang lebih baru

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

Jenis

string

Metode

create()

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

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 ini:
```
(panel: ExtensionPanel) => void
```
- panel
  
  ExtensionPanel
  
  Objek ExtensionPanel yang mewakili panel yang dibuat.

openResource()

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

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

angka opsional

Chrome 114 dan yang lebih baru

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

fungsi opsional

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

setOpenResourceHandler()

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

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

Parameter

callback

fungsi opsional

Parameter callback terlihat seperti ini:
```
(resource: Resource) => void
```
- referensi
  
  Resource
  
  Objek devtools.inspectedWindow.Resource untuk resource yang diklik.