Men-debug layanan latar belakang

Kayce Basques

Sofia Emelianova

Bagian Layanan latar belakang Chrome DevTools adalah kumpulan alat untuk JavaScript API yang memungkinkan situs Anda mengirim dan menerima update meskipun pengguna tidak membuka situs Anda. 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 latar belakang
• Notifikasi
• Pemuatan spekulatif
• Pesan push

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

Selain peristiwa layanan latar belakang, DevTools dapat:

• Menampilkan laporan yang telah dikirim atau akan dikirim 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 mendownload resource besar, seperti film atau podcast, sebagai layanan latar belakang secara andal. Untuk mencatat peristiwa pengambilan latar belakang selama tiga hari, meskipun DevTools tidak terbuka:

1. Buka DevTools di halaman menggunakan Background Fetch API.

2. Buka Application > Background services > Background fetch, lalu klik Record.

   

3. Di halaman Anda, picu beberapa aktivitas pengambilan latar belakang. DevTools mencatat peristiwa ke dalam log ke tabel.

   

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

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

Sinkronisasi latar belakang

Background Sync API memungkinkan pekerja layanan offline service worker mengirim data ke server setelah koneksi internet yang andal dibuat ulang. Untuk mencatat peristiwa sinkronisasi latar belakang selama tiga hari, meskipun DevTools tidak terbuka:

1. Buka DevTools, misalnya, di 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 terkait, lalu klik Allow saat diminta.

   Catatan: Untuk mempelajari cara men-debug pekerja layanan di DevTools, lihat Pekerja layanan.

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

   

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

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

(Eksperimental) Mitigasi pelacakan pantulan

Catatan: Ini adalah fitur eksperimental yang tersedia mulai Chrome versi 115.

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

Untuk memaksa mitigasi pelacakan:

1. Blokir cookie pihak ketiga di Chrome. Buka dan aktifkan > Settings > Privacy and security > Cookies and other site data > Block third-party cookies.
2. Di chrome://flags, tetapkan eksperimen Bounce tracking mitigations ke Enabled With Deletion.
3. Buka DevTools, lalu buka Application > Background services > Bounce tracking mitigations.
4. Klik link pantulan dan tunggu (10 detik) hingga Chrome mencatat pantulan. Tab Issues akan memperingatkan Anda tentang penghapusan status yang akan datang.
5. Klik Force run untuk segera menghapus status.

Notifikasi

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

1. Buka DevTools

2. Buka Application > Background services > Notifications , lalu klik Record.

   

3. Klik Schedule Notification dan Allow saat diminta.

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

   

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

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

Pemuatan spekulatif

Pemuatan spekulatif memungkinkan pemuatan halaman yang hampir instan berdasarkan aturan spekulasi yang Anda tentukan. Hal ini memungkinkan situs Anda melakukan pramuat dan pra-rendering halaman yang paling sering dibuka.

Pramuat mengambil resource terlebih dahulu dan pra-rendering melangkah lebih jauh dan merender seluruh halaman dalam proses renderer latar belakang tersembunyi.

Anda dapat men-debug pemuatan spekulatif di bagian Application > Background services > Speculative loads. Bagian ini berisi tiga tampilan:

• Speculative loads. Berisi status spekulatif untuk halaman saat ini, URL saat ini, halaman yang dicoba dimuat secara spekulatif oleh halaman saat ini, dan statusnya.
• Rules. Berisi kumpulan aturan di halaman saat ini di panel Elements dan status spekulasi secara keseluruhan.
• Speculations. 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 debug pemuatan spekulatif di halaman demo pra-rendering ini:

1. Buka DevTools di halaman, lalu buka Application > Background services > Speculative loads. 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 Failure reason bagian dengan informasi mendetail di bagian bawah.

   

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

4. Buka bagian Rules , lalu klik Status untuk melihat kumpulan aturan 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.

Pengiriman pesan push

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

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

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

   

3. Di halaman demo, aktifkan Enable push notifications, klik Allow saat diminta, ketik pesan, lalu kirim. DevTools mencatat peristiwa notifikasi push ke dalam log ke tabel.

   

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

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

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

Reporting API

Beberapa error hanya terjadi dalam produksi. Anda tidak pernah melihatnya secara lokal atau selama pengembangan karena pengguna, jaringan, dan perangkat sebenarnya 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, tetapi mereka mungkin memiliki koneksi yang lebih lambat daripada yang Anda uji. Tanpa Anda ketahui, situs Anda mulai rusak karena Chrome melakukan intervensi terhadap document.write() di jaringan yang lambat. Atau, Anda mungkin ingin memantau API yang tidak digunakan lagi atau akan segera tidak digunakan lagi yang mungkin digunakan oleh codebase Anda.

Reporting API dirancang untuk membantu Anda memantau panggilan API yang tidak digunakan lagi, pelanggaran keamanan halaman Anda, dan lainnya. Anda dapat menyiapkan pelaporan seperti yang dijelaskan dalam Memantau aplikasi web Anda 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, lalu buka Application > Background services > Reporting API.

   

Tab Reporting API dibagi menjadi tiga bagian:

• Tabel Reports dengan informasi berikut di setiap laporan:
  • URL yang menyebabkan pembuatan laporan
  • Type pelanggaran
  • Laporan Status
  • Endpoint Destination
  • Stempel waktu Generated at
  • Body laporan
• Bagian pratinjau Report body. Untuk melihat pratinjau isi laporan, klik laporan di tabel laporan.
• Bagian Endpoints 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 mengirim laporan dan endpoint membalas dengan kode keberhasilan (200 atau kode respons keberhasilan lainnya 2xx).
Pending	Browser sedang mencoba mengirim laporan.
Queued	Laporan telah dibuat dan browser belum mencoba mengirimnya. Laporan muncul sebagai Queued dalam salah satu dari dua kasus berikut: Laporan baru dan browser menunggu untuk melihat apakah ada laporan lain yang tiba sebelum mencoba mengirimnya. Laporan tidak baru; browser telah mencoba mengirim laporan ini dan gagal, serta menunggu sebelum mencoba lagi.
MarkedForRemoval	Setelah mencoba lagi selama beberapa waktu (Queued), browser telah berhenti mencoba mengirim laporan dan akan segera menghapusnya dari daftar laporan yang akan dikirim.

Laporan akan dihapus setelah beberapa waktu, baik berhasil dikirim maupun tidak.

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

Sesi yang terikat perangkat

Device Bound Session Credentials (DBSC) adalah Web API dan protokol antara agen pengguna dan server yang bertujuan untuk mencegah pencurian cookie dengan mengizinkan agen pengguna untuk menegaskan kepemilikan kunci pribadi yang disimpan dengan aman.

Untuk melihat sesi yang terikat perangkat, definisinya, dan peristiwa:

1. Buka DevTools di halaman yang menggunakan DBSC.
2. Buka Application > Background services > Device bound sessions.

3. Di sidebar di sebelah kiri, luaskan situs untuk melihat sesi aktifnya. Pilih sesi untuk melihat definisinya.

   

4. Tabel Events mencatat peristiwa DBSC: pembuatan, refresh, tantangan, dan penghentian. Untuk menyimpan daftar peristiwa di seluruh navigasi halaman, centang check_box Preserve log.

5. Di tabel Events, pilih peristiwa untuk melihat detailnya.

6. Jika peristiwa gagal, Anda akan melihat pesan Error di kolom Result. Pilih peristiwa yang gagal untuk melihat detailnya, kode error respons, dan penyebab kegagalan.

   

Bagian Device bound sessions di sidebar dapat menandai masalah berikut:

• Terminated sessions: Ditunjukkan dengan garis coret dan ikon database-off di sidebar.
• Failed events: Ditandai dengan ikon peringatan. Elemen No session menangkap peristiwa yang gagal yang ditautkan ke situs, tetapi tidak ke sesi yang diketahui.