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 kelelahan akibat notifikasi dan kekacauan di Konsol.

Mulai sekarang, panel Masalah melaporkan:

• Masalah cookie
• Konten campuran
• Masalah COEP
• Error CORS
• Masalah mode Quirks
• (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 bermasalah untuk diperbaiki.
2. Buka DevTools.

3. Klik tombol Masalah Terbuka di samping Setelan 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, Anda mungkin ingin memuat ulang halaman untuk menemukan lebih banyak masalah, kali ini terjadi selama pemuatan halaman.

   

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

Di sisi lain, panel Masalah memberikan insight yang dapat ditindaklanjuti.

Melihat item di panel Masalah

Panel Masalah menampilkan peringatan dari browser secara 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 ASET YANG TERPENGARUH yang ditautkan ke resource dalam konteks DevTools yang sesuai, seperti panel Network, Sources, Elements, dan panel lainnya.
   • Link ke panduan lebih lanjut.

2. Klik item di SUMBER DAYA YANG TERPENGARUH untuk melihat masalah dalam konteks.

Mengelompokkan masalah menurut jenis

Catatan: Ini adalah fitur pratinjau yang dinonaktifkan secara default. Untuk mengaktifkannya, centang Setelan > Eksperimen > Izinkan pengelompokan dan penyembunyian masalah menurut jenis masalah.

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 penggunaan.
• Peningkatan yang disarankan DevTools.

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

Sertakan masalah pihak ketiga

Panel Issues menampilkan masalah cookie pihak ketiga secara default.

Anda dapat menemukan masalah cookie pihak ketiga di bagian SUMBER 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 perluas bagian tersebut.

Untuk menampilkan semua masalah, klik Tampilkan semua. Untuk menampilkan masalah tertentu, pilih Tampilkan masalah seperti ini dari menu tiga titik di samping masalah tersebut.

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 SUMBER DAYA YANG TERPENGARUH, klik link sumber daya untuk melihat item dalam konteks yang sesuai di DevTools. Link tersebut akan mengarahkan Anda ke panel Jaringan.

   

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