Yang Baru di DevTools (Chrome 92)

Editor petak CSS

Fitur yang banyak diminta. Sekarang Anda dapat melihat pratinjau dan menulis CSS Grid dengan editor CSS Grid yang baru.

Saat elemen HTML di halaman Anda menerapkan display: grid atau display: inline-grid, Anda dapat melihat ikon yang muncul di sebelahnya di panel Styles. Klik ikon untuk menampilkan/menyembunyikan editor petak CSS. Di sini Anda dapat melihat pratinjau potensi perubahan dengan ikon di layar (misalnya, justify-content: space-around) dan menulis tampilan petak hanya dengan sekali klik.

Masalah Chromium: 1203241

Dukungan untuk pernyataan ulang const di Konsol

Konsol kini mendukung deklarasi ulang pernyataan const, selain deklarasi ulang let dan class yang sudah ada. Ketidakmampuan untuk mendeklarasikan kembali adalah gangguan umum bagi developer web yang menggunakan Console untuk bereksperimen dengan kode JavaScript baru.

Ini memungkinkan developer menyalin dan menempel kode ke konsol DevTools untuk melihat cara kerja atau eksperimen, membuat perubahan kecil pada kode, dan mengulangi proses tanpa memuat ulang halaman. Sebelumnya, DevTools menampilkan error sintaksis jika kode mendeklarasikan ulang binding const.

Lihat contoh di bawah ini. Deklarasi ulang const didukung di skrip REPL terpisah (lihat variabel a). Perhatikan bahwa skenario berikut tidak didukung melalui desain:

• const deklarasi ulang skrip halaman tidak diizinkan dalam skrip REPL
• Pernyataan ulang const dalam skrip REPL yang sama tidak diizinkan (lihat variabel b)

Masalah Chromium: 1076427

Penampil pesanan sumber

Sekarang Anda dapat melihat urutan elemen sumber di layar untuk pemeriksaan aksesibilitas yang lebih baik.

Urutan konten dalam dokumen HTML penting untuk aksesibilitas dan pengoptimalan mesin telusur. Fitur CSS yang lebih baru memungkinkan developer membuat konten yang urutannya di layar terlihat sangat berbeda dengan yang ada di dokumen HTML. Ini adalah masalah aksesibilitas besar karena pengguna {i>screen reader<i} akan mendapatkan pengalaman yang berbeda dan kemungkinan besar membingungkan daripada pengguna yang mampu melihat.

Masalah Chromium: 1094406

Pintasan baru untuk melihat detail frame

Lihat detail iframe dengan mengklik kanan elemen iframe di panel Elemen, lalu pilih Tampilkan detail frame.

Anda akan diarahkan ke tampilan detail iframe di panel Aplikasi tempat Anda dapat memeriksa detail dokumen, keamanan & status isolasi, kebijakan izin, dan lainnya untuk men-debug potensi masalah.

Masalah Chromium: 1192084

Dukungan proses debug CORS yang ditingkatkan

Error cross-origin resource sharing (CORS) kini muncul di tab Issues. Ada berbagai alasan yang menyebabkan error CORS. Klik untuk meluaskan setiap masalah agar dapat memahami kemungkinan penyebab dan solusinya.

Masalah Chromium: 1141824

Update panel jaringan

Mengganti nama label XHR menjadi Fetch/XHR

Label XHR sekarang diganti namanya menjadi Fetch/XHR. Perubahan ini memperjelas bahwa filter ini menyertakan permintaan jaringan XMLHttpRequest dan Fetch API.

Masalah Chromium: 1201398

Memfilter jenis resource Wasm di panel Jaringan

Sekarang Anda dapat mengklik tombol Wasm yang baru untuk memfilter permintaan jaringan Wasm.

Masalah Chromium: 1103638

Petunjuk Klien Agen Pengguna untuk perangkat di tab Kondisi jaringan

Petunjuk Klien Agen Pengguna kini diterapkan untuk perangkat di kolom Agen pengguna pada tab Kondisi jaringan.

Petunjuk Klien Agen Pengguna adalah ekspansi baru untuk Client Hints API yang memungkinkan developer mengakses informasi tentang browser pengguna dengan cara yang menjaga privasi dan ergonomis.

Masalah Chromium: 1174299

Melaporkan masalah Quirks mode di tab Masalah

DevTools kini melaporkan masalah Quirks Mode dan Limited-quirks Mode.

Quirks Mode dan Limited-quirks Mode adalah mode browser lama sebelum standar web dibuat. Mode ini meniru perilaku tata letak era pra-standar yang sering menyebabkan efek visual yang tidak terduga.

Saat men-debug masalah tata letak, developer mungkin mengira bahwa masalah tersebut disebabkan oleh bug CSS atau HTML yang ditulis pengguna, sedangkan masalah sebenarnya adalah Mode compat halaman berada. DevTools memberikan saran untuk memperbaikinya.

Masalah Chromium: 622660

Menyertakan Persimpangan Komputasi di panel Performa

DevTools kini menampilkan Compute Intersections di flame chart. Perubahan ini membantu Anda mengidentifikasi peristiwa intersection observer dan melakukan debug pada overhead performanya potensial.

Masalah Chromium: 1199137

Lighthouse 7.5 di panel Lighthouse

Panel Lighthouse sekarang menjalankan Lighthouse 7.5. "Lebar dan tinggi eksplisit tidak ada" peringatan kini dihapus untuk gambar dengan aspect-ratio yang ditentukan dalam CSS. Sebelumnya, Lighthouse menampilkan peringatan untuk gambar tanpa lebar dan tinggi yang ditentukan.

Lihat catatan rilis untuk daftar lengkap perubahan.

Masalah Chromium: 772558

"Mulai ulang frame" tidak digunakan lagi menu konteks di stack panggilan

Opsi Mulai ulang frame kini tidak digunakan lagi. Fitur ini memerlukan pengembangan lebih lanjut agar berfungsi dengan baik. Saat ini, fitur rusak dan sering error.

Masalah Chromium: 1203606

[Eksperimental] Pemantau protokol

Chrome DevTools menggunakan Protokol Chrome DevTools (CDP) untuk menginstrumentasikan, memeriksa, men-debug, dan membuat profil browser Chrome. Pemantau protokol memberi Anda cara untuk melihat semua permintaan dan respons CDP yang dibuat oleh DevTools.

Dua fungsi baru ditambahkan untuk memfasilitasi pengujian CDP:

• Tombol Simpan yang baru memungkinkan Anda mendownload pesan yang direkam sebagai file JSON
• Kolom baru yang memungkinkan Anda mengirim perintah CDP mentah secara langsung

Masalah Chromium: 1204004, 1204466

[Eksperimental] Perekam Suara Puppeteer

Puppeteer recorder sekarang membuat daftar langkah berdasarkan interaksi Anda dengan browser, sedangkan sebelumnya DevTools membuat skrip Puppeteer secara langsung. Tombol Ekspor baru ditambahkan untuk memungkinkan Anda mengekspor langkah-langkah sebagai skrip Puppeteer.

Setelah merekam langkah, Anda dapat menggunakan tombol Replay baru untuk memutar ulang langkah tersebut. Ikuti petunjuk di sini untuk mempelajari cara memulai perekaman.

Perhatikan bahwa ini adalah eksperimen tahap awal. Kami berencana untuk meningkatkan dan memperluas fungsi Perekam Suara dari waktu ke waktu.

Masalah Chromium: 1199787

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 mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

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

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

Yang baru di DevTools

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