Men-debug ekstensi

Ekstensi dapat mengakses Chrome DevTools yang sama dengan halaman web. Untuk menjadi ahli dalam men-debug ekstensi, Anda perlu mengetahui cara menemukan log dan error dari berbagai komponen ekstensi. Tutorial ini memberikan teknik dasar untuk men-debug ekstensi Anda.

Sebelum memulai

Panduan ini mengasumsikan bahwa Anda memiliki pengalaman pengembangan web dasar. Sebaiknya baca Dasar-Dasar Pengembangan untuk pengantar alur kerja pengembangan ekstensi. Mendesain antarmuka pengguna memperkenalkan elemen antarmuka pengguna yang tersedia di ekstensi.

Memutuskan ekstensi

Tutorial ini akan merusak satu komponen ekstensi dalam satu waktu dan kemudian menunjukkan cara memperbaikinya. Ingatlah untuk mengurungkan bug yang diperkenalkan di satu bagian sebelum melanjutkan ke bagian berikutnya. Mulai dengan mendownload contoh Pecah Warna di GitHub.

Men-debug manifes

Pertama, mari kita pecahkan file manifes dengan mengubah kunci "version" menjadi "versions":

manifest.json:

{
  "name": "Broken Background Color",
  "version": "1.0",
  "versions": "1.0",
  "description": "Fix an Extension!",
  ...
}

Sekarang, mari kita coba memuat ekstensi secara lokal. Anda akan melihat kotak dialog error yang mengarah ke masalah tersebut:

Failed to load extension
Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.
Could not load manifest.

Dialog error kunci manifes yang tidak valid.

Jika kunci manifes tidak valid, ekstensi akan gagal dimuat, tetapi Chrome akan memberi Anda petunjuk cara memperbaiki masalah tersebut.

Urungkan perubahan tersebut dan masukkan izin yang tidak valid untuk melihat apa yang terjadi. Ubah izin "activeTab" menjadi huruf kecil "activetab":

manifest.json:

{
  ...
  "permissions": ["activeTab", "scripting", "storage"],
  "permissions": ["activetab", "scripting", "storage"],
  ...
}

Simpan ekstensi dan coba muat lagi. URL tersebut akan berhasil dimuat kali ini. Di halaman Pengelolaan ekstensi, Anda akan melihat tiga tombol: Details, Remove, dan Error. Label tombol Error berubah menjadi merah saat terjadi error. Klik tombol Error untuk melihat error berikut:

Permission 'activetab' is unknown or URL pattern is malformed.

Menemukan pesan error dengan mengklik tombol Error.

Sebelum melanjutkan, ubah kembali izin, klik Hapus semua di sudut kanan atas untuk menghapus log, lalu muat ulang ekstensi.

Cara menghapus error ekstensi.

Catatan: Menggunakan skema manifes di editor kode adalah cara untuk memastikan bahwa manifes memiliki format yang benar dan kolom yang diperlukan.

Men-debug pekerja layanan

Menemukan log

Pekerja layanan menetapkan warna default ke penyimpanan dan mencatatnya ke konsol. Untuk melihat log ini, buka panel Chrome DevTools dengan memilih link biru di samping Inspect views.

Log pekerja layanan di panel Chrome DevTools.

Poin penting: Memeriksa pekerja layanan akan membuatnya tetap aktif. Untuk memastikan ekstensi berperilaku dengan benar saat pekerja layanan dihentikan, jangan lupa untuk menutup DevTools.

Menemukan error

Mari kita hentikan pekerja layanan dengan mengubah onInstalled menjadi huruf kecil oninstalled:

service-worker.js:

// There's a typo in the line below;
// ❌ oninstalled should be ✅ onInstalled.
chrome.runtime.onInstalled.addListener(() => { 
chrome.runtime.oninstalled.addListener(() => { 
  chrome.storage.sync.set({ color: '#3aa757' }, () => {
    console.log('The background color is green.');
  });
});

Muat ulang dan klik Error untuk melihat log error. Error pertama memberi tahu Anda bahwa pekerja layanan gagal mendaftar. Ini berarti ada yang tidak beres selama inisiasi:

Service worker registration failed. Status code: 15.

Pesan error pendaftaran pekerja layanan.

Catatan: Jika pekerja layanan gagal mendaftar, Anda tidak akan dapat mengakses Chrome DevTools hingga memperbaiki bug pendaftaran.

Error yang sebenarnya muncul setelah:

Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

Pesan TypeError yang tidak tertangkap.

Urungkan bug yang kami perkenalkan, klik Hapus semua di pojok kanan atas, lalu muat ulang ekstensi.

Memeriksa status pekerja layanan

Anda bisa mengidentifikasi kapan pekerja layanan aktif untuk melakukan tugas dengan mengikuti langkah-langkah ini:

1. Salin ID ekstensi yang terletak di atas "Inspect views".

   

   ID ekstensi di halaman Pengelolaan Ekstensi.

2. Buka file manifes di browser. Contoh: text chrome-extension://YOUR_EXTENSION_ID/manifest.json
3. Periksa filenya.
4. Buka panel Application.
5. Buka panel Service Workers.

Untuk menguji kode Anda, mulai atau hentikan pekerja layanan menggunakan link di samping status.

Status Service worker di panel Application. (Klik untuk memperbesar gambar.)

Selain itu, jika telah membuat perubahan pada kode pekerja layanan, Anda dapat mengklik Update atau skipMenunggu perubahan tersebut.

Memuat ulang pekerja layanan di panel Application. (Klik untuk memperbesar gambar.)

Catatan: Perhatikan bahwa tindakan ini tidak akan memuat ulang komponen ekstensi lainnya.

Men-debug pop-up

Setelah ekstensi diinisialisasi dengan benar, mari kita pecah pop-up dengan menjadikan baris yang ditandai di bawah sebagai komentar:

popup.js:

...
changeColorButton.addEventListener('click', (event) => {
  const color = event.target.value;

  // Query the active tab before injecting the content script
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { 
    // Use the Scripting API to execute a script
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      args: [color],
      func: setColor
    });
  });
});

Kembali ke halaman Extensions Management. Tombol Error akan muncul kembali. Klik tombol tersebut untuk melihat log yang baru. Ini menunjukkan pesan error berikut:

Uncaught ReferenceError: tabs is not defined

Halaman Pengelolaan Ekstensi yang menampilkan error pop-up.

Anda dapat membuka DevTools pop-up dengan memeriksa pop-up.

DevTools menampilkan error pop-up.

Error ini, tabs is undefined, menyatakan bahwa ekstensi tidak tahu di mana harus memasukkan skrip konten. Perbaiki hal ini dengan memanggil tabs.query(), lalu memilih tab aktif.

Untuk memperbarui kode, klik tombol Clear all di sudut kanan atas, lalu muat ulang ekstensi.

Catatan: Untuk halaman ekstensi lain yang ditampilkan sebagai tab, seperti ganti halaman dan opsi halaman penuh, Anda dapat menemukan log dengan memeriksa halaman tersebut atau dengan mengunjungi halaman Pengelolaan Ekstensi.

Men-debug skrip konten

Sekarang, mari kita pecahkan skrip konten dengan mengubah variabel "color" menjadi "colors":

content.js:

...
function setColor(color) {
  // There's a typo in the line below;
  // ❌ colors should be ✅ color.
  document.body.style.backgroundColor = color;
  document.body.style.backgroundColor = colors;
}  

Muat ulang halaman, buka pop-up, dan klik kotak hijau. Tidak ada yang terjadi.

Jika Anda membuka halaman Pengelolaan Ekstensi, tombol Error tidak akan muncul. Hal ini karena hanya error runtime, console.warning, dan console.error yang dicatat di halaman Pengelolaan Ekstensi.

Skrip konten berjalan di dalam situs. Jadi, untuk menemukan error ini, kita harus memeriksa halaman web yang coba diubah oleh ekstensi:

Uncaught ReferenceError: colors is not defined

Error ekstensi ditampilkan di konsol halaman web.

Untuk menggunakan DevTools dari dalam skrip konten, klik panah dropdown di samping atas dan pilih ekstensi.

ResourceError Tidak Tertangkap: warna tidak ditentukan.

Error menyatakan colors tidak ditentukan. Ekstensi tidak boleh meneruskan variabel dengan benar. Perbaiki skrip yang dimasukkan untuk meneruskan variabel warna ke dalam kode.

Memantau permintaan jaringan

Pop-up sering kali membuat semua permintaan jaringan yang diperlukan bahkan sebelum developer yang paling cepat dapat membuka DevTools. Untuk melihat permintaan ini, muat ulang dari dalam panel jaringan. Tindakan ini akan memuat ulang pop-up tanpa menutup panel DevTools.

Muat ulang di dalam panel jaringan untuk melihat permintaan jaringan pop-up.

Mendeklarasikan izin

Beberapa API ekstensi memerlukan izin. Lihat artikel izin dan Chrome API untuk memastikan ekstensi meminta izin yang benar di manifes.

  {
    "name": "Broken Background Color",
    ...
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
  ...
  }

Poin penting: Untuk melakukan panggilan fetch() ke server eksternal, Anda harus mendeklarasikan URL sebagai izin host.

Bacaan lebih lanjut

Pelajari lebih lanjut Chrome Devtools dengan membaca dokumentasi.