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.
![Ekstensi dengan kunci manifes yang tidak valid memicu dialog error saat mencoba memuat.](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/an-extension-an-invalid-9ab91f867f94c.png?authuser=6&hl=id)
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.
![Tombol error diklik dan menampilkan error](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/error-button-is-clicked-a7713a11553a.gif?authuser=6&hl=id)
Sebelum melanjutkan, ubah kembali izin, klik Hapus semua di sudut kanan atas untuk menghapus log, lalu muat ulang ekstensi.
![Tombol hapus semua](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/clear-button-2f67dd9230519.png?authuser=6&hl=id)
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.
![Membuka DevTools untuk pekerja layanan ekstensi.](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/opening-devtools-the-ex-685e204e20773.png?authuser=6&hl=id)
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.
![Pendaftaran pekerja layanan gagal. Kode status: pesan error 15](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/service-worker-registrati-9791df79120e6.png?authuser=6&hl=id)
Error yang sebenarnya muncul setelah:
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
![TypeError yang Tidak Tertangkap: Tidak dapat membaca properti pesan error yang tidak ditentukan](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/uncaught-typeerror-canno-45ae014961338.png?authuser=6&hl=id)
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:
- Salin ID ekstensi yang terletak di atas "Inspect views".
ID ekstensi di halaman Pengelolaan Ekstensi. - Buka file manifes di browser. Contoh:
text chrome-extension://YOUR_EXTENSION_ID/manifest.json
- Periksa filenya.
- Buka panel Application.
- Buka panel Service Workers.
Untuk menguji kode Anda, mulai atau hentikan pekerja layanan menggunakan link di samping status.
![Status service worker di panel Application](https://developer.chrome.com/docs/extensions/get-started/tutorial/debug/image/start-stop-service-worker.png?auto=format&w=845&authuser=6&hl=id)
Selain itu, jika telah membuat perubahan pada kode pekerja layanan, Anda dapat mengklik Update atau skipMenunggu perubahan tersebut.
![Status service worker di panel Application](https://developer.chrome.com/docs/extensions/get-started/tutorial/debug/image/update-or-skipwaiting.png?auto=format&w=845&authuser=6&hl=id)
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](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/extensions-management-pag-00a0f48a76239.png?authuser=6&hl=id)
Anda dapat membuka DevTools pop-up dengan memeriksa pop-up.
![DevTools menampilkan error pop-up.](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/devtools-displaying-popup-0ed24fd80361a.png?authuser=6&hl=id)
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.
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](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/extension-error-displayed-ca9d8c6c336b.png?authuser=6&hl=id)
Untuk menggunakan DevTools dari dalam skrip konten, klik panah dropdown di samping atas dan pilih ekstensi.
![Tidak tertangkap ReferenceError: warna tidak ditentukan](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/uncaught-referenceerror-e5847be3a7de9.png?authuser=6&hl=id)
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](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/refresh-inside-network-p-43993068e650e.gif?authuser=6&hl=id)
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"
],
...
}
Bacaan lebih lanjut
Pelajari lebih lanjut Chrome Devtools dengan membaca dokumentasi.