Halaman ini diterjemahkan oleh Cloud Translation API.

Memperluas DevTools

Ekstensi DevTools menambahkan fitur ke Chrome DevTools dengan mengakses DevTools khusus API ekstensi melalui halaman DevTools yang ditambahkan ke ekstensi.

API ekstensi khusus DevTools mencakup hal berikut:

Halaman DevTools

Saat jendela DevTools terbuka, ekstensi DevTools akan membuat instance halaman DevTools yang ada selama jendela terbuka. Halaman ini memiliki akses ke DevTools API dan API ekstensi, serta dapat melakukan hal berikut:

Buat dan berinteraksi dengan panel menggunakan devtools.panels API, termasuk menambahkan halaman ekstensi lainnya sebagai panel atau sidebar ke jendela DevTools.
Dapatkan informasi tentang jendela yang diperiksa dan evaluasi kode di jendela yang diperiksa menggunakan devtools.inspectedWindow API.
Mendapatkan informasi tentang permintaan jaringan menggunakan devtools.network API.
Perluas panel Perekam Suara menggunakan devtools.recorder API.
Dapatkan informasi tentang status perekaman panel Performa menggunakan devtools.performance API.

Halaman DevTools dapat langsung mengakses API ekstensi. Hal ini mencakup kemampuan berkomunikasi dengan pekerja layanan menggunakan penyampaian pesan.

Membuat ekstensi DevTools

Untuk membuat halaman DevTools bagi ekstensi Anda, tambahkan kolom devtools_page di ekstensi manifes:

{
  "name": ...
  "version": "1.0",
  "devtools_page": "devtools.html",
  ...
}

Kolom devtools_page harus mengarah ke halaman HTML. Karena DevTools harus lokal untuk ekstensi Anda, sebaiknya tentukan menggunakan URL relatif.

Anggota chrome.devtools API hanya tersedia untuk halaman yang dimuat di dalam DevTools saat jendela tersebut terbuka. Skrip konten dan halaman ekstensi lainnya tidak memiliki akses ke API ini.

Elemen UI DevTools: panel dan panel sidebar

Selain elemen UI ekstensi yang biasa, seperti tindakan browser, menu konteks, dan pop-up, Ekstensi DevTools dapat menambahkan elemen UI ke jendela DevTools:

Panel adalah tab tingkat atas, seperti panel Elemen, Sumber, dan Jaringan.
Panel sidebar menampilkan UI tambahan terkait panel. {i>Styles<i}, {i>Computed Styles<i}, dan Panel Pemroses Peristiwa di panel Elemen adalah contoh panel sidebar. Bergantung pada versi Chrome yang Anda gunakan dan di mana jendela DevTools dipasang ke dok, panel bilah sisi Anda mungkin terlihat seperti gambar contoh berikut:

Jendela DevTools menampilkan panel Elements dan panel sidebar Styles.

Setiap panel adalah file HTML-nya sendiri, yang dapat mencakup sumber daya lain (JavaScript, CSS, gambar, dan sebagainya ). Untuk membuat panel dasar, gunakan kode berikut:

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
      // code invoked on panel creation
    }
);

JavaScript yang dieksekusi di panel atau panel sidebar memiliki akses ke API yang sama dengan halaman DevTools.

Untuk membuat panel sidebar dasar, gunakan kode berikut:

chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

Ada beberapa cara untuk menampilkan konten di panel sidebar:

Konten HTML: Panggil setPage() untuk menentukan halaman HTML yang akan ditampilkan di panel.
Data JSON: Teruskan objek JSON ke setObject().
Ekspresi JavaScript: Meneruskan ekspresi ke setExpression(). DevTools mengevaluasi ekspresi dalam konteks halaman yang diperiksa, lalu menampilkan nilai yang ditampilkan.

Untuk setObject() dan setExpression(), panel menampilkan nilai seperti yang akan muncul di konsol DevTools. Namun, setExpression() memungkinkan Anda menampilkan elemen DOM dan JavaScript arbitrer sedangkan setObject() hanya mendukung objek JSON.

Berkomunikasi antarkomponen ekstensi

Bagian berikut menjelaskan beberapa cara bermanfaat untuk mengizinkan komponen ekstensi DevTools berkomunikasi satu sama lain.

Memasukkan skrip konten

Untuk memasukkan skrip konten, gunakan scripting.executeScript():

// DevTools page -- devtools.js
chrome.scripting.executeScript({
  target: {
    tabId: chrome.devtools.inspectedWindow.tabId
  },
  files: ["content_script.js"]
});

Anda dapat mengambil ID tab jendela yang diperiksa menggunakan Properti inspectedWindow.tabId.

Jika skrip konten sudah dimasukkan, Anda dapat menggunakan API pesan untuk berkomunikasi dengannya.

Evaluasi JavaScript di jendela yang diperiksa

Anda dapat menggunakan metode inspectedWindow.eval() untuk menjalankan JavaScript dalam konteks halaman yang diperiksa. Anda dapat memanggil metode eval() dari halaman DevTools, panel, atau panel sidebar.

Perhatian: Gunakan eval() hanya jika Anda memerlukan akses ke konten JavaScript pada halaman yang diperiksa. Jika tidak, sebaiknya gunakan metode scripting.executeScript() untuk menjalankan skrip. Untuk mengetahui informasi selengkapnya, lihat inspectedWindow.

Secara default, ekspresi dievaluasi dalam konteks bingkai utama halaman. inspectedWindow.eval() menggunakan konteks dan opsi eksekusi skrip yang sama dengan kode dimasukkan di konsol DevTools, yang memungkinkan akses ke Utilitas Konsol DevTools API saat menggunakan eval(). Misalnya, SOAK menggunakannya untuk memeriksa elemen:

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script[data-soak=main]')[0])",
  function(result, isException) { }
);

Anda juga dapat menetapkan useContentScriptContext ke true saat memanggil inspectedWindow.eval() ke mengevaluasi ekspresi dalam konteks yang sama dengan skrip konten. Untuk menggunakan opsi ini, gunakan deklarasi skrip konten statis sebelum memanggil eval(), baik dengan memanggil executeScript() atau dengan menentukan konten dalam file manifest.json. Setelah konteks skrip konteks dimuat, Anda juga dapat menggunakan opsi ini untuk memasukkan skrip konten tambahan.

Meneruskan elemen yang dipilih ke skrip konten

Skrip konten tidak memiliki akses langsung ke elemen yang dipilih saat ini. Namun, setiap kode yang Anda mengeksekusi menggunakan inspectedWindow.eval() yang memiliki akses ke DevTools Console dan Console Utilitas API. Misalnya, dalam kode yang dievaluasi, Anda dapat menggunakan $0 untuk mengakses elemen yang dipilih.

Untuk meneruskan elemen yang dipilih ke skrip konten:

Membuat metode dalam skrip konten yang menggunakan elemen yang dipilih sebagai argumen.

function setSelectedElement(el) {
    // do something with the selected element
}

Panggil metode dari halaman DevTools menggunakan inspectedWindow.eval() dengan opsi useContentScriptContext: true.

chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });

Opsi useContentScriptContext: true menetapkan bahwa ekspresi harus dievaluasi dalam kolom konteks yang sama dengan skrip konten, sehingga dapat mengakses metode setSelectedElement.

Mendapatkan `window` panel referensi

Untuk memanggil postMessage() dari panel devtools, Anda memerlukan referensi ke objek window. Dapatkan jendela iframe panel dari pengendali peristiwa panel.onShown:

extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

Mengirim pesan dari skrip yang dimasukkan ke halaman DevTools

Kode yang dimasukkan langsung ke halaman tanpa skrip konten, termasuk dengan menambahkan <script> memberi tag atau memanggil inspectedWindow.eval(), tidak dapat mengirim pesan ke Halaman DevTools menggunakan runtime.sendMessage(). Sebagai gantinya, kami merekomendasikan menggabungkan skrip yang dimasukkan dengan skrip konten yang dapat bertindak sebagai perantara, dan menggunakan metode window.postMessage(). Contoh berikut menggunakan skrip latar belakang dari bagian sebelumnya:

// injected-script.js

window.postMessage({
  greeting: 'hello there!',
  source: 'my-devtools-extension'
}, '*');

// content-script.js

window.addEventListener('message', function(event) {
  // Only accept messages from the same frame
  if (event.source !== window) {
    return;
  }

  var message = event.data;

  // Only accept messages that we know are ours. Note that this is not foolproof
  // and the page can easily spoof messages if it wants to.
  if (typeof message !== 'object' || message === null ||
      message.source !== 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

Teknik penerusan pesan alternatif lainnya dapat ditemukan di GitHub.

Mendeteksi kapan DevTools membuka dan menutup

Untuk melacak apakah jendela DevTools terbuka, tambahkan pemroses onConnect ke pekerja layanan dan panggil connect() dari halaman DevTools. Karena setiap tab bisa membuka jendela DevTools sendiri, Anda mungkin menerima beberapa peristiwa koneksi. Untuk melacak apakah jendela DevTools terbuka, hitung peristiwa koneksi dan putuskan koneksi seperti yang ditunjukkan dalam contoh berikut:

// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name == "devtools-page") {
      if (openCount == 0) {
        alert("DevTools window opening.");
      }
      openCount++;

      port.onDisconnect.addListener(function(port) {
          openCount--;
          if (openCount == 0) {
            alert("Last DevTools window closing.");
          }
      });
    }
});

Halaman DevTools membuat koneksi seperti ini:

// devtools.js

// Create a connection to the service worker
const serviceWorkerConnection = chrome.runtime.connect({
    name: "devtools-page"
});

// Send a periodic heartbeat to keep the port open.
setInterval(() => {
  port.postMessage("heartbeat");
}, 15000);

Contoh ekstensi DevTools

Contoh di halaman ini berasal dari halaman berikut:

Polymer Devtools Extension - Menggunakan banyak helper yang berjalan di halaman host untuk membuat kueri Status DOM/JS untuk dikirim kembali ke panel kustom.
React DevTools Extension - Menggunakan submodul perender untuk menggunakan kembali UI DevTools komponen.
Ember Inspector - Core ekstensi bersama dengan adaptor untuk Chrome dan Firefox.
Coquette-inspect - Ekstensi bersih berbasis React dengan agen proses debug yang dimasukkan ke halaman {i>host<i}.
Ekstensi Contoh memiliki ekstensi yang lebih bermanfaat untuk diinstal, dicoba, dan dipelajari dari mereka.

Informasi selengkapnya

Untuk mengetahui informasi tentang API standar yang dapat digunakan ekstensi, lihat chrome.* API dan web Google Cloud API.

Beri kami masukan. Komentar dan saran Anda membantu kami meningkatkan kualitas API.

Contoh

Anda dapat menemukan contoh yang menggunakan DevTools API di Sample.

Memperluas DevTools

Halaman DevTools

Membuat ekstensi DevTools

Elemen UI DevTools: panel dan panel sidebar

Berkomunikasi antarkomponen ekstensi

Memasukkan skrip konten

Evaluasi JavaScript di jendela yang diperiksa

Meneruskan elemen yang dipilih ke skrip konten

Mendapatkan window panel referensi

Mengirim pesan dari skrip yang dimasukkan ke halaman DevTools

Mendeteksi kapan DevTools membuka dan menutup

Contoh ekstensi DevTools

Informasi selengkapnya

Contoh

Mendapatkan `window` panel referensi