chrome.devtools.network

refresh date: 2026-09-25 robots: noindex

Deskripsi

Gunakan chrome.devtools.network API untuk mengambil informasi tentang permintaan jaringan yang ditampilkan oleh Developer Tools di panel Jaringan.

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

Informasi permintaan jaringan direpresentasikan dalam format HTTP Archive (HAR). Deskripsi HAR berada di luar cakupan dokumen ini, lihat Spesifikasi HAR v1.2.

Dalam hal HAR, metode chrome.devtools.network.getHAR() menampilkan seluruh log HAR, sedangkan peristiwa chrome.devtools.network.onRequestFinished menyediakan entri HAR sebagai argumen untuk callback peristiwa.

Perhatikan bahwa konten permintaan tidak disediakan sebagai bagian dari HAR karena alasan efisiensi. Anda dapat memanggil metode getContent() permintaan untuk mengambil konten.

Jika jendela Developer Tools dibuka setelah halaman dimuat, beberapa permintaan mungkin tidak ada dalam array entri yang ditampilkan oleh getHAR(). Muat ulang halaman untuk mendapatkan semua permintaan. Secara umum, daftar permintaan yang ditampilkan oleh getHAR() harus cocok dengan yang ditampilkan di panel Jaringan.

Contoh

Kode berikut mencatat URL semua gambar yang berukuran lebih dari 40 KB saat dimuat:

chrome.devtools.network.onRequestFinished.addListener(
  function(request) {
    if (request.response.bodySize > 40*1024) {
      chrome.devtools.inspectedWindow.eval(
          'console.log("Large image: " + unescape("' +
          escape(request.request.url) + '"))');
    }
  }
);

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

Jenis

Request

Merepresentasikan permintaan jaringan untuk resource dokumen (skrip, gambar, dan sebagainya). Lihat Spesifikasi HAR untuk referensi.

Properti

  • getContent

    void

    Promise

    Menampilkan konten isi respons.

    Fungsi getContent terlihat seperti: 

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

    • callback

      fungsi opsional

      Parameter callback terlihat seperti: 

      (response: object) => void

      • respons

        objek

        Chrome 151+

        Objek yang berisi isi respons dan encoding-nya.

        • konten

          string

          Konten isi respons (berpotensi dienkode).

        • encoding

          string

          Kosong jika konten tidak dienkode, atau nama encoding jika dienkode. Saat ini, hanya base64 yang didukung.

    • return

      Promise<object>

      Chrome 151+

      Fungsi yang menerima isi respons saat permintaan selesai.

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

Metode

getHAR()

Promise 
chrome.devtools.network.getHAR(
  callback?: function,
): Promise<object>

Menampilkan log HAR yang berisi semua permintaan jaringan yang diketahui.

Parameter

  • callback

    fungsi opsional

    Parameter callback terlihat seperti: 

    (harLog: object) => void

    • harLog

      objek

      Log HAR. Lihat spesifikasi HAR untuk mengetahui detailnya.

Hasil

  • Promise<object>

    Chrome 151+

    Fungsi yang menerima log HAR saat permintaan selesai.

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

Acara

onNavigated

chrome.devtools.network.onNavigated.addListener(
  callback: function,
)

Diaktifkan saat jendela yang diperiksa membuka halaman baru.

Parameter

  • callback

    fungsi

    Parameter callback terlihat seperti: 

    (url: string) => void

    • url

      string

onRequestFinished

chrome.devtools.network.onRequestFinished.addListener(
  callback: function,
)

Diaktifkan saat permintaan jaringan selesai dan semua data permintaan tersedia.

Parameter

  • callback

    fungsi

    Parameter callback terlihat seperti: 

    (request: Request) => void