Yang Baru di DevTools (Chrome 79)

Kayce Basques
Kayce Basques

Fitur baru untuk cookie

Men-debug alasan cookie diblokir

Setelah merekam aktivitas jaringan, pilih resource jaringan, lalu buka tab Cookies yang diperbarui untuk memahami alasan cookie permintaan atau respons resource tersebut diblokir. Lihat Perubahan pada perilaku default tanpa SameSite untuk memahami alasan Anda mungkin melihat lebih banyak cookie yang diblokir di Chrome 76 dan yang lebih baru.

Tab Cookie.

Tab Cookie.

  • Cookie Permintaan kuning tidak dikirim melalui kabel. Bagian ini disembunyikan secara default. Klik tampilkan cookie permintaan yang difilter untuk menampilkannya.
  • Cookie Respons kuning dikirim melalui jaringan, tetapi tidak disimpan.
  • Arahkan kursor ke Informasi Selengkapnya info untuk mempelajari alasan cookie diblokir.
  • Sebagian besar data dalam tabel Cookie Permintaan dan Cookie Respons berasal dari header HTTP resource. Data Domain, Path, dan Expires/Max-Age berasal dari Chrome DevTools Protocol.

Masalah Chromium #856777, #993843

Melihat nilai cookie

Klik baris di panel Cookie untuk melihat nilai cookie tersebut.

Melihat nilai cookie.

Melihat nilai cookie.

Masalah Chromium #462370

Simulasikan preferensi prefers-color-scheme dan prefers-reduced-motion yang berbeda

Kueri media prefers-color-scheme memungkinkan Anda mencocokkan gaya situs dengan preferensi pengguna. Misalnya, jika kueri media prefers-color-scheme: dark bernilai benar (true), berarti pengguna Anda telah menyetel sistem operasi mereka ke mode gelap dan lebih menyukai UI mode gelap.

Buka Menu Perintah, jalankan perintah Tampilkan Rendering, lalu tetapkan dropdown Emulasi fitur media CSS prefers-color-scheme untuk men-debug gaya prefers-color-scheme: dark dan prefers-color-scheme: light Anda.

prefers-color-scheme: dark

Jika prefers-color-scheme: dark disetel (kotak tengah), panel Styles (kotak kanan) akan menampilkan CSS yang diterapkan saat kueri media tersebut bernilai benar dan viewport menampilkan gaya mode gelap (kotak kiri).

Anda juga dapat menyimulasikan prefers-reduced-motion: reduce menggunakan dropdown Emulate CSS media feature prefers-reduced-motion di samping dropdown Emulate CSS media feature prefers-color-scheme.

Masalah Chromium #1004246

Emulasi zona waktu

Tab Sensor kini memungkinkan Anda tidak hanya mengganti geolokasi, tetapi juga mengemulasi zona waktu arbitrer dan menguji dampaknya pada aplikasi web Anda. Mungkin mengejutkan, fitur baru ini juga meningkatkan keandalan emulasi geolokasi: sebelumnya, aplikasi web dapat mendeteksi spoofing lokasi dengan mencocokkan lokasi dengan zona waktu lokal pengguna. Karena emulasi geolokasi dan zona waktu kini digabungkan, kategori ketidakcocokan ini tidak akan terjadi lagi.

Pembaruan cakupan kode

Tab Cakupan dapat membantu Anda menemukan JavaScript dan CSS yang tidak digunakan.

Tab Cakupan kini menggunakan warna baru untuk merepresentasikan kode yang digunakan dan tidak digunakan. Kombinasi warna ini terbukti lebih mudah diakses oleh orang dengan kekurangan penglihatan warna. Batang merah di sebelah kiri menunjukkan kode yang tidak digunakan, dan batang biru di sebelah kanan menunjukkan kode yang digunakan.

Kotak teks filter jenis cakupan baru memungkinkan Anda memfilter informasi cakupan menurut jenisnya: hanya menampilkan cakupan JavaScript, hanya CSS, atau menampilkan semua jenis cakupan.

Tab Cakupan.

Tab Cakupan.

Panel Sources menampilkan data cakupan kode jika tersedia. Mengklik tanda merah atau kebiruan di samping nomor baris akan membuka tab Cakupan dan menandai file.

Data cakupan di panel Sumber.

Data cakupan di panel Sumber. Baris 8 adalah contoh kode yang tidak digunakan. Baris 11 adalah contoh kode yang digunakan.

Masalah Chromium #1003671, #1004185

Men-debug alasan resource jaringan diminta

Setelah merekam aktivitas jaringan, pilih resource jaringan, lalu buka tab Initiator untuk memahami alasan resource tersebut diminta. Bagian Stack panggilan permintaan menjelaskan stack panggilan JavaScript yang mengarah ke permintaan jaringan.

Tab Inisiator.

Tab Inisiator.

Masalah Chromium 963183, 842488

Panel Konsol dan Sumber menghormati preferensi indentasi lagi

Selama ini, DevTools memiliki setelan untuk menyesuaikan preferensi indentasi Anda menjadi 2 spasi, 4 spasi, 8 spasi, atau tab. Baru-baru ini, setelan ini pada dasarnya tidak berguna karena panel Konsol dan Sumber mengabaikan setelan tersebut. Bug ini sekarang telah diperbaiki.

Buka Setelan > Preferensi > Sumber > Indentasi Default untuk menetapkan preferensi Anda.

Masalah Chromium #977394

Pintasan baru untuk navigasi kursor

Tekan Control+P di panel Konsol atau Sumber untuk memindahkan kursor ke baris di atas. Tekan Control+N untuk memindahkan kursor ke baris di bawah.

Masalah Chromium #983874

Mendownload saluran pratinjau

Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk mendiskusikan fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.