Masalah: Menemukan dan memperbaiki masalah

Sam Dutton

Sofia Emelianova

Gunakan panel Masalah untuk menemukan solusi atas masalah yang terdeteksi oleh browser, seperti masalah cookie dan konten campuran.

Catatan: Panel Masalah terus menambahkan dukungan untuk jenis masalah baru.

Ringkasan

Dengan mengumpulkan dan mengelompokkan masalah umum, panel Masalah mengurangi kejenuhan notifikasi dan kekacauan di Konsol.

Saat ini, panel Issues melaporkan:

• Masalah cookie
• Konten campuran
• Masalah COEP
• Error CORS
• Masalah quirks mode
• (Pratinjau) Masalah kontras rendah
• Masalah Aktivitas Web Tepercaya
• Masalah pemuatan stylesheet
• Aturan CSS @property tidak valid
• Pelanggaran Kebijakan Keamanan Konten
• Masalah atribut pelengkapan otomatis

Versi Chrome mendatang akan mendukung lebih banyak jenis masalah.

Membuka panel Masalah

1. Buka halaman yang memiliki masalah yang perlu diperbaiki, seperti samesite-sandbox.glitch.me.
2. Buka DevTools.

3. Klik tombol Open Issues di samping Settings di pojok kanan panel tindakan di bagian atas. Bergantung pada tingkat keparahan masalah, tombol dapat memiliki ikon merah, kuning, atau biru.

   

   Atau, pilih Masalah dari menu Alat lainnya .

   

4. Setelah berada di panel Masalah, sebaiknya muat ulang halaman untuk menemukan lebih banyak masalah, yang kali ini terjadi selama pemuatan halaman.

   

Konsol juga dapat menampilkan masalah yang dilaporkan oleh browser. Namun, Anda akan melihat bahwa masalah tersebut (seperti peringatan cookie dalam screenshot di bawah) sulit dipahami. Tidak jelas apa yang perlu Anda lakukan untuk memperbaikinya.

Di sisi lain, panel Masalah memberi Anda insight yang dapat ditindaklanjuti.

Melihat item di panel Issues

Panel Issues menampilkan peringatan dari browser dengan cara terstruktur, gabungan, dan dapat ditindaklanjuti.

1. Klik item di panel Masalah untuk meluaskan masalah dan mendapatkan panduan tentang cara memperbaikinya serta menemukan resource yang terpengaruh.

   

   Setiap item memiliki empat komponen:

   • Judul yang menjelaskan masalah.
   • Deskripsi yang memberikan konteks dan solusi.
   • Bagian REFERENSI YANG TERPENGARUH yang ditautkan ke referensi dalam konteks DevTools yang sesuai, seperti Jaringan, Sumber, Elemen, dan panel lainnya.
   • Link ke panduan lebih lanjut.

2. Klik item di REFERENSI YANG TERKENA untuk melihat masalah dalam konteks.

Mengelompokkan masalah menurut jenis

Catatan: Ini adalah fitur pratinjau yang dinonaktifkan secara default. Untuk mengaktifkannya, centang Settings > Experiments > Allow grouping and hiding of issues by issue kind.

Panel Masalah menghitung jumlah resource yang terpengaruh untuk setiap masalah dan menampilkannya di samping judulnya. Selain itu, Anda dapat mengatur masalah berdasarkan tingkat keparahannya dalam tiga jenis grup:

• Error Halaman yang dilaporkan Chrome.
• Perubahan yang Dapat Menyebabkan Gangguan seperti penghentian.
• Peningkatan yang disarankan DevTools.

Untuk mengelompokkan masalah, centang Kelompokkan menurut jenis di panel tindakan di bagian atas panel Masalah.

Menyertakan masalah pihak ketiga

Panel Masalah menampilkan masalah cookie pihak ketiga secara default.

Anda dapat menemukan masalah cookie pihak ketiga di bagian REFERENSI YANG TERPENGARUH yang tidak memiliki link.

Untuk menyembunyikan masalah tersebut, hapus Sertakan masalah cookie pihak ketiga di panel tindakan di bagian atas panel Masalah.

Menyembunyikan masalah

Untuk menyembunyikan masalah, pilih Sembunyikan masalah seperti ini dari menu tiga titik di samping masalah.

Untuk melihat daftar masalah tersembunyi, scroll ke bawah ke bagian Masalah tersembunyi dan luaskan.

Untuk menampilkan semua masalah, klik Perlihatkan semua. Untuk menampilkan masalah tertentu, pilih Unhide issues like this dari menu tiga titik di samping masalah.

Selain itu, dengan pengelompokan diaktifkan, Anda dapat menyembunyikan seluruh grup masalah menggunakan menu tiga titik yang sama di samping grup.

Melihat masalah dalam konteks

Untuk menyelidiki masalah:

1. Di bagian REFERENSI YANG TERPENGARUH, klik link referensi untuk melihat item dalam konteks yang sesuai dalam DevTools. Dalam contoh ini, klik samesite-sandbox.glitch.me untuk menampilkan cookie yang dilampirkan ke permintaan tersebut. Link tersebut akan mengarahkan Anda ke panel Jaringan.

   

2. Scroll untuk melihat item yang mengalami masalah: dalam hal ini, cookie ck02. Arahkan kursor ke ikon informasi di sebelah kanan untuk melihat masalah dan cara memperbaikinya.