Yang Baru di DevTools (Chrome 92)

Jecelyn Yeen

Editor petak CSS

Fitur yang sangat dinantikan. Sekarang Anda dapat melihat pratinjau dan menulis Petak CSS dengan editor Petak CSS baru.

Editor Petak CSS

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

Masalah Chromium: 1203241

Dukungan untuk deklarasi ulang const di Konsol

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

Hal ini memungkinkan developer menyalin dan menempelkan kode ke konsol DevTools untuk melihat cara kerjanya atau bereksperimen, membuat perubahan kecil pada kode, dan mengulangi proses tanpa memuat ulang halaman. Sebelumnya, DevTools akan menampilkan error sintaksis jika kode mendeklarasikan ulang binding const.

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

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

Deklarasi ulang const

Masalah Chromium: 1076427

Penampil urutan sumber

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

Penampil urutan sumber

Urutan konten dalam dokumen HTML penting untuk pengoptimalan mesin telusur dan aksesibilitas. Fitur CSS yang lebih baru memungkinkan developer membuat konten yang terlihat sangat berbeda dalam urutan di layarnya dibandingkan dengan yang ada dalam dokumen HTML. Hal ini merupakan masalah aksesibilitas yang besar karena pengguna pembaca layar akan mendapatkan pengalaman yang berbeda, dan kemungkinan besar membingungkan, dibandingkan pengguna yang dapat 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.

Menampilkan detail frame

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

Tampilan detail frame

Masalah Chromium: 1192084

Dukungan debug CORS yang ditingkatkan

Error Cross-Origin Resource Sharing (CORS) kini muncul di tab Masalah. Ada berbagai alasan yang menyebabkan error CORS. Klik untuk meluaskan setiap masalah guna memahami potensi penyebab dan solusinya.

Masalah CORS di tab Masalah

Masalah Chromium: 1141824

Pembaruan panel Jaringan

Mengganti nama label XHR menjadi Fetch/XHR

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

Label pengambilan/XHR

Masalah Chromium: 1201398

Memfilter jenis resource Wasm di panel Jaringan

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

Filter menurut 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 perluasan baru untuk Client Hints API, yang memungkinkan developer mengakses informasi tentang browser pengguna dengan cara yang menjaga privasi dan ergonomis.

Petunjuk Klien Agen Pengguna untuk perangkat di tab Kondisi jaringan

Masalah Chromium: 1174299

Melaporkan masalah mode Quirks di tab Masalah

DevTools kini melaporkan masalah Mode Quirks dan Mode Quirks Terbatas.

Mode Quirks dan Mode Limited-quirks 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 masalah tersebut disebabkan oleh bug CSS atau HTML yang ditulis pengguna, padahal masalah sebenarnya adalah Mode Kompatibilitas yang digunakan halaman. DevTools akan memberikan saran untuk memperbaikinya.

Melaporkan masalah mode Quirks di tab Masalah

Masalah Chromium: 622660

Menyertakan Hitung Persimpangan di panel Performa

DevTools kini menampilkan Compute Intersections dalam diagram flame. Perubahan ini membantu Anda mengidentifikasi peristiwa intersection observer dan melakukan debug pada potensi overhead performanya.

Menghitung Persimpangan di panel Performa

Masalah Chromium: 1199137

Lighthouse 7.5 di panel Lighthouse

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

Lihat catatan rilis untuk mengetahui daftar lengkap perubahan.

Masalah Chromium: 772558

Menu konteks "Mulai ulang frame" yang tidak digunakan lagi dalam stack panggilan

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

Menu konteks Mulai ulang frame yang tidak digunakan lagi

Masalah Chromium: 1203606

[Eksperimental] Pemantau protokol

Chrome DevTools menggunakan Chrome DevTools Protocol (CDP) untuk menginstrumentasi, memeriksa, men-debug, dan memprofilkan browser Chrome. Monitor 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 baru memungkinkan Anda mendownload pesan yang direkam sebagai file JSON
  • Kolom baru yang memungkinkan Anda mengirim perintah CDP mentah secara langsung

Pemantau protokol

Masalah Chromium: 1204004, 1204466

[Eksperimental] Perekam Puppeteer

Perekam Puppeteer kini menghasilkan daftar langkah berdasarkan interaksi Anda dengan browser, sedangkan sebelumnya DevTools langsung menghasilkan skrip Puppeteer. Tombol Ekspor baru ditambahkan agar Anda dapat mengekspor langkah-langkah sebagai skrip Puppeteer.

Setelah merekam langkah-langkah, Anda dapat menggunakan tombol Putar ulang baru untuk memutar ulang langkah-langkah tersebut. Ikuti petunjuk di sini untuk mempelajari cara mulai merekam.

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

Perekam Puppeteer

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, 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.