Masalah: Menemukan dan memperbaiki masalah

Sofia Emelianova
Sofia Emelianova

Panel Issues di Chrome DevTools mengurangi kejenuhan notifikasi dan kekacauan di Console. Gunakan API ini untuk menemukan solusi atas masalah yang terdeteksi oleh browser, seperti masalah cookie dan konten campuran.

Saat ini, panel Issues mendukung:

Versi Chrome mendatang akan mendukung lebih banyak jenis masalah.

Buka tab Masalah

  1. Buka halaman yang memiliki masalah yang perlu diperbaiki, misalnya samesite-sandbox.glitch.me.
  2. Buka DevTools.
  3. Klik tombol Buka Masalah di samping Setelan. Setelan di pojok kanan panel tindakan di bagian atas. Bergantung pada tingkat keparahan masalah, tombol dapat memiliki ikon Error. merah, kuning Peringatan., atau Informasi. biru.

    Tombol Buka Masalah dengan ikon merah.

    Atau, pilih Masalah dari menu Menu alat lainnya. Alat lainnya.

    Tab Masalah di 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.

    Tab Masalah dengan satu masalah lainnya ditemukan setelah memuat ulang halaman.

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

Konsol dengan peringatan cookie yang tidak jelas.

Di sisi lain, panel Issues memberikan hasil analisis yang bisa ditindaklanjuti.

Lihat item di tab Masalah

Panel Issues menampilkan peringatan dari browser dalam cara yang terstruktur, digabungkan, dan dapat ditindaklanjuti.

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

    Tab Masalah dengan masalah cookie lintas situs diperluas.

    Setiap item memiliki empat komponen:

    • Judul yang menjelaskan masalah.
    • Deskripsi yang memberikan konteks dan solusinya.
    • Bagian REFERENSI YANG TERPENGARUH yang menautkan ke resource dalam konteks DevTools yang sesuai, seperti Jaringan, Sumber, Elemen, dan panel lainnya.
    • Link ke panduan lebih lanjut.
  2. Klik item di REFERENSI YANG TERPENGARUH untuk melihat masalah dalam konteks.

Mengelompokkan masalah menurut jenis

Panel Issues menghitung jumlah resource yang terpengaruh untuk setiap masalah dan menampilkannya di samping judulnya. Selain itu, Anda dapat mengelompokkan masalah berdasarkan tingkat keparahannya dalam tiga kelompok:

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

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

Masalah yang dikelompokkan dalam tiga jenis: Error halaman, Perubahan yang dapat menyebabkan gangguan, dan Peningkatan.

Sertakan masalah pihak ketiga

Tab Masalah menampilkan masalah cookie pihak ketiga secara default.

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

Cookie pihak ketiga tanpa resource tertaut di bagian Resource yang Terpengaruh.

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

Sembunyikan masalah

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

Sembunyikan masalah seperti opsi ini di menu tiga titik di samping masalah.

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

Bagian Masalah tersembunyi.

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

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

Menu tiga titik dengan opsi untuk menyembunyikan grup Improvements.

Lihat masalah dalam konteks

Untuk menyelidiki masalah:

  1. Di bagian REFERENSI YANG TERPENGARUH, klik link resource 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.

    Bagian Referensi yang Terpengaruh dengan link ke permintaan yang terpengaruh.

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

    Panel Jaringan menampilkan tooltip saat Anda mengarahkan kursor ke ikon informasi.