Men-debug layanan latar belakang

Kayce Basques

Sofia Emelianova

Bagian Layanan latar belakang pada Chrome DevTools adalah kumpulan alat untuk JavaScript API yang memungkinkan situs Anda mengirim dan menerima update meskipun situs Anda tidak dibuka oleh pengguna. Layanan latar belakang secara fungsional mirip dengan proses latar belakang.

Bagian Layanan latar belakang memungkinkan Anda men-debug layanan latar belakang berikut:

• Pengambilan latar belakang
• Sinkronisasi di latar belakang
• Notifikasi
• Pemuatan spekulatif
• Pesan push

Chrome DevTools dapat mencatat peristiwa pengambilan, sinkronisasi, dan notifikasi selama tiga hari, bahkan saat DevTools tidak terbuka. Hal ini dapat membantu Anda memastikan bahwa peristiwa telah dikirim dan diterima seperti yang diharapkan.

Selain peristiwa layanan latar belakang, DevTools dapat:

• Menunjukkan laporan yang telah dikirim atau akan dikirim oleh Chrome menggunakan Reporting API.
• Memungkinkan Anda men-debug dan menguji back-forward cache dengan sekali klik.

Pengambilan latar belakang

Background Fetch API memungkinkan pekerja layanan dapat mendownload resource berukuran besar dengan andal, seperti film atau podcast, sebagai layanan latar belakang. Untuk mencatat peristiwa pengambilan di latar belakang ke dalam log selama tiga hari, bahkan saat DevTools tidak terbuka:

1. Buka DevTools, misalnya, pada halaman demo ini.

2. Buka Aplikasi > Layanan latar belakang > Pengambilan latar belakang, dan klik Rekam.

   

3. Di halaman demo, klik Simpan aset secara lokal. Hal ini memicu beberapa aktivitas pengambilan latar belakang. DevTools mencatat peristiwa ke tabel.

   

4. Klik peristiwa untuk melihat detailnya pada ruang di bawah tabel.

5. Anda dapat menutup DevTools dan membiarkan perekaman berjalan hingga tiga hari. Untuk berhenti merekam, klik Stop.

Sinkronisasi latar belakang

Background Sync API memungkinkan pekerja layanan offline untuk mengirim data ke server setelah terhubung kembali dengan koneksi internet yang andal. Untuk mencatat peristiwa sinkronisasi latar belakang ke dalam log selama tiga hari, bahkan saat DevTools tidak terbuka:

1. Buka DevTools, misalnya, pada halaman demo ini.

2. Buka Application > Background services > Background sync lalu klik Record.

   

3. Di halaman demo, klik Register background sync untuk mendaftarkan pekerja layanan masing-masing, lalu klik Allow saat diminta.

   Catatan: Untuk mempelajari cara men-debug service worker di DevTools, lihat Service worker.

   Pendaftaran pekerja layanan adalah aktivitas sinkronisasi latar belakang. DevTools mencatat peristiwa ke tabel.

   

4. Klik peristiwa untuk melihat detailnya pada ruang di bawah tabel.

5. Anda dapat menutup DevTools dan membiarkan perekaman berjalan hingga tiga hari. Untuk berhenti merekam, klik Stop.

(Eksperimental) Mitigasi pelacakan kembali

Catatan: Fitur ini eksperimental yang tersedia dari Chrome versi 115.

Eksperimen Mitigasi pelacakan kembali di Chrome memungkinkan Anda mengidentifikasi dan menghapus status situs yang tampaknya melakukan pelacakan lintas situs menggunakan teknik pelacakan kembali. Anda dapat memaksakan mitigasi pelacakan secara manual dan melihat daftar situs yang statusnya telah dihapus.

Untuk memaksa mitigasi pelacakan:

1. Blokir cookie pihak ketiga di Chrome. Buka dan aktifkan > Setelan > Privasi dan keamanan > Cookie dan data situs lainnya > Blokir cookie pihak ketiga.
2. Di chrome://flags, tetapkan eksperimen Mitigasi pelacakan kembali ke Diaktifkan Dengan Penghapusan.
3. Buka DevTools, misalnya, pada halaman demo, lalu buka Aplikasi > Layanan latar belakang > Mitigasi pelacakan kembali.
4. Pada halaman demo, klik link pantulan dan tunggu (10 detik) agar Chrome mencatat pantulan. Tab Masalah memperingatkan Anda tentang penghapusan status yang akan datang.
5. Klik Paksa jalankan untuk langsung menghapus status.

Notifikasi

Setelah pekerja layanan menerima Pesan Push dari server, pekerja layanan akan menggunakan Notifications API untuk menampilkan data kepada pengguna. Untuk mencatat Notifikasi selama tiga hari, bahkan saat DevTools tidak terbuka:

1. Buka DevTools, misalnya, pada halaman demo ini.

2. Buka Aplikasi > Layanan latar belakang > Notifikasi dan klik Rekam.

   

3. Di halaman demo, klik Jadwalkan Notifikasi dan Izinkan jika diminta.

4. Tunggu hingga notifikasi muncul. DevTools mencatat peristiwa notifikasi ke tabel.

   

5. Klik peristiwa untuk melihat detailnya pada ruang di bawah tabel.

6. Anda dapat menutup DevTools dan membiarkan perekaman berjalan hingga tiga hari. Untuk berhenti merekam, klik Stop.

Pemuatan spekulatif

Pemuatan spekulatif memungkinkan pemuatan halaman hampir seketika berdasarkan aturan spekulasi yang Anda tentukan. Tindakan ini memungkinkan situs Anda mengambil data dan melakukan pra-rendering sebagian besar halaman yang dibuka.

Pengambilan data mengambil resource terlebih dahulu dan pra-render melampauinya serta merender seluruh halaman dalam proses perender latar belakang tersembunyi.

Anda dapat men-debug pemuatan spekulatif di bagian Aplikasi > Layanan latar belakang > Pemuatan spekulatif. Bagian ini berisi tiga tampilan:

• Pemuatan spekulatif. Berisi status spekulatif untuk halaman saat ini, URL saat ini, halaman yang coba dimuat oleh halaman saat ini secara spekulatif, dan statusnya.
• Aturan. Berisi kumpulan aturan pada halaman saat ini di panel Elemen dan status spekulasi secara keseluruhan.
• Spekulasi. Berisi tabel dengan informasi tentang upaya pemuatan spekulatif dan statusnya. Jika upaya gagal, Anda dapat mengkliknya di tabel untuk melihat informasi mendetail dan alasan kegagalan.

Coba proses debug pemuatan spekulatif di halaman demo ini:

1. Buka DevTools di halaman dan buka Application > Background services > Speculative load. Jika Anda tidak dapat melihat pemuatan spekulatif yang dimulai oleh halaman, muat ulang halaman.

   

2. Halaman awal demo melakukan pra-rendering dua halaman dan gagal melakukan pra-rendering satu halaman. Klik View all speculations.

3. Di Speculations, pilih spekulasi dengan status Failure untuk melihat bagian Failure reason dengan informasi mendetail di bagian bawah.

   

   Dalam kasus ini, pra-rendering gagal karena tidak ada halaman /next3.html di situs.

4. Buka bagian Aturan dan klik Status untuk melihat aturan yang ditetapkan di bagian bawah. Mengklik link Rule set akan mengarahkan Anda ke panel Elements dan menunjukkan tempat aturan spekulasi ditentukan.

   

   Tips: Anda tidak dapat memperbaiki aturan di layar ini atau di panel Elements karena DevTools tidak mempertahankan perubahan DOM arbitrer di seluruh pemuatan halaman. Anda harus memperbaiki aturan di sumber dengan menyiapkan ruang kerja atau meniru perubahan dengan mengganti konten.

Untuk panduan yang lebih mendetail, lihat Men-debug aturan spekulasi.

Pesan push

Untuk menampilkan notifikasi push kepada pengguna, pekerja layanan harus terlebih dahulu menggunakan Push Message API untuk menerima data dari server. Ketika pekerja layanan siap menampilkan notifikasi, ia akan menggunakan Notifications API. Untuk mencatat pesan push ke dalam log selama tiga hari, meskipun DevTools tidak terbuka:

1. Buka DevTools, misalnya, pada halaman demo ini.

2. Buka Application > Background services > Push Messaging lalu klik Record.

   

3. Di halaman demo, aktifkan Aktifkan notifikasi push, klik Izinkan saat diminta, ketik pesan, lalu kirim. DevTools mencatat peristiwa notifikasi push ke tabel.

   

   Catatan: Selain itu, di Application > Service Worker, Anda dapat mengklik Push untuk mengirim notifikasi pengujian dari DevTools.

4. Klik peristiwa untuk melihat detailnya pada ruang di bawah tabel.

5. Anda dapat menutup DevTools dan membiarkan perekaman berjalan hingga tiga hari. Untuk berhenti merekam, klik Stop.

Reporting API

Beberapa error hanya terjadi dalam produksi. Anda tidak akan pernah melihatnya secara lokal atau selama pengembangan karena pengguna, jaringan, dan perangkat sungguhan mengubah game.

Misalnya, situs baru Anda mengandalkan software pihak ketiga yang menggunakan document.write() untuk memuat skrip penting. Pengguna baru di seluruh dunia membuka situs Anda, namun mereka mungkin memiliki koneksi yang lebih lambat daripada yang Anda uji. Tanpa Anda ketahui, situs Anda mulai mengalami error karena Chrome mengintervensi document.write() di jaringan yang lambat. Atau, Anda mungkin ingin terus memantau API yang tidak digunakan lagi atau yang akan segera tidak digunakan lagi yang mungkin digunakan codebase Anda.

Reporting API dirancang untuk membantu Anda memantau panggilan API yang tidak digunakan lagi, pelanggaran keamanan halaman, dan lainnya. Anda dapat menyiapkan pelaporan seperti yang dijelaskan dalam artikel Memantau aplikasi web dengan Reporting API.

Untuk melihat laporan yang dibuat oleh halaman:

1. Buka chrome://flags/#enable-experimental-web-platform-features, tetapkan Experimental Web Platform features ke Enabled, lalu mulai ulang Chrome.

2. Buka DevTools dan buka Application > Background services > Reporting API. Misalnya, Anda dapat melihat laporan di halaman demo ini.

   

Tab Reporting API dibagi menjadi tiga bagian:

• Tabel Laporan yang berisi informasi berikut di setiap laporan:
  • URL yang menyebabkan pembuatan laporan
  • Jenis Pelanggaran
  • Status Laporan
  • Endpoint tujuan
  • Dibuat pada stempel waktu
  • Isi Laporan
• Bagian pratinjau Isi laporan. Untuk melihat pratinjau isi laporan, klik laporan di tabel laporan.
• Bagian Endpoint dengan ringkasan semua endpoint yang dikonfigurasi di header Reporting-Endpoints.

Status laporan

Kolom Status memberi tahu Anda apakah Chrome berhasil mengirim laporan, akan mengirimnya, atau gagal.

Status	Deskripsi
Success	Browser telah mengirimkan laporan dan endpoint membalas dengan kode berhasil (200 atau kode respons sukses lainnya 2xx).
Pending	Browser sedang mencoba mengirim laporan.
Queued	Laporan telah dibuat dan browser belum mencoba mengirimkannya. Laporan akan muncul sebagai Queued dalam salah satu dari dua kasus berikut: Laporan tersebut masih baru dan browser menunggu untuk melihat apakah laporan baru yang masuk sebelum mencoba mengirimkannya. Laporan ini tidak baru; browser telah mencoba mengirimkan laporan ini dan gagal, serta sedang menunggu sebelum mencoba lagi.
MarkedForRemoval	Setelah mencoba kembali selama beberapa saat (Queued), browser berhenti mencoba mengirim laporan dan akan segera menghapusnya dari daftar laporan untuk dikirim.

Laporan akan dihapus setelah beberapa saat, terlepas dari apakah laporan berhasil dikirim atau tidak.

Poin penting: Status Queued tidak selalu informatif, karena tidak menunjukkan dengan tepat apakah pengiriman gagal atau belum dicoba. Penggunaan penundaan pelaporan yang singkat akan membantu: laporan yang tetap bernilai Queued dalam kasus tersebut kemungkinan menunjukkan bahwa pengiriman gagal.