Yang Baru di DevTools (Chrome 79)

Fitur baru untuk cookie

Men-debug alasan cookie diblokir

Setelah mencatat aktivitas jaringan, pilih resource jaringan, lalu buka tab Cookies yang telah diperbarui untuk memahami alasan cookie respons atau permintaan 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.

  • Request Cookies berwarna kuning tidak dikirim melalui kabel. Keduanya disembunyikan secara default. Klik show filtered out cookie request untuk menampilkannya.
  • Cookie Respons berwarna kuning dikirim melalui kabel, tetapi tidak disimpan.
  • Arahkan kursor ke Informasi Selengkapnya info untuk mempelajari alasan cookie diblokir.
  • Sebagian besar data di tabel Cookie Permintaan dan Cookie Respons berasal dari header HTTP resource. Data Domain, Path, dan Expires/Max-Age berasal dari Protokol Chrome DevTools.

Masalah Chromium #856777, #993843

Melihat nilai cookie

Klik salah satu baris di panel Cookie untuk melihat nilai cookie tersebut.

Melihat nilai cookie.

Melihat nilai cookie.

Masalah Chromium #462370

Simulasikan preferensi preferensi-color-skema yang berbeda dan Preferreds- indahd-motion

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

Buka Command Menu, jalankan perintah Show Rendering, lalu tetapkan dropdown Emulate CSS media feature konsumsis-color-skema untuk men-debug gaya prefers-color-scheme: dark dan prefers-color-scheme: light.

preferensis-color-skema: gelap

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

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

Masalah Chromium #1004246

Emulasi zona waktu

Tab Sensors kini memungkinkan Anda tidak hanya override geolocation, tetapi juga mengemulasi zona waktu arbitrer dan menguji dampaknya pada aplikasi web Anda. Mungkin yang mengejutkan, fitur baru ini juga meningkatkan keandalan emulasi geolokasi: sebelumnya, aplikasi web dapat mendeteksi spoofing lokasi dengan menyesuaikan lokasi dengan zona waktu lokal pengguna. Setelah geolokasi dan emulasi zona waktu digabungkan, kategori ketidakcocokan ini akan dihilangkan.

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 sudah digunakan dan tidak digunakan. Kombinasi warna ini terbukti lebih mudah diakses oleh pengguna yang memiliki kekurangan penglihatan warna. Batang merah di sebelah kiri menunjukkan kode yang tidak digunakan, dan panel kebiruan di sebelah kanan menunjukkan kode yang digunakan.

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

Tab Cakupan.

Tab Cakupan.

Panel Sumber 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 permintaan resource jaringan

Setelah mencatat aktivitas jaringan, pilih resource jaringan, lalu buka tab Inisiator untuk memahami alasan resource diminta. Bagian Minta stack panggilan menjelaskan stack panggilan JavaScript yang mengarah ke permintaan jaringan.

Tab Inisiator.

Tab Inisiator.

Masalah Chromium 963183, 842488

Panel Konsol dan Sumber lagi mengikuti preferensi indentasi

Sejak lama, DevTools memiliki setelan untuk menyesuaikan preferensi indentasi Anda ke 2 spasi, 4 spasi, 8 spasi, atau tab. Baru-baru ini, setelan ini tidak berguna karena panel Console dan Sources mengabaikan setelan tersebut. Bug ini sekarang telah diperbaiki.

Buka Settings > Preferences > Sources > Default Indentation untuk menetapkan preferensi Anda.

Masalah Chromium #977394

Pintasan baru untuk navigasi kursor

Tekan Control+P di panel Console atau Sources 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, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.

  • Kirim saran atau masukan kepada kami melalui crbug.com.
  • Laporkan masalah DevTools menggunakan Opsi lainnya   Lainnya   > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.

Yang Baru di DevTools

Daftar semua hal yang telah dibahas dalam seri What's New In DevTools.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 dibatalkan.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59