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.

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 deklarasi ulang 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)

Masalah Chromium: 1076427

Penampil urutan sumber

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

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.

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.

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 kemungkinan penyebab dan solusinya.

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.

Masalah Chromium: 1201398

Memfilter jenis resource Wasm di panel Network

Sekarang Anda dapat mengklik tombol Wasm 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 perluasan 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 mode Quirks di tab Masalah

DevTools kini melaporkan masalah Mode Quirks dan Mode Quirks Terbatas.

Mode Quirks dan Mode Quirks Terbatas 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.

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.

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.

Masalah Chromium: 1203606

[Eksperimental] Pemantau protokol

Chrome DevTools menggunakan Chrome DevTools Protocol (CDP) untuk menginstrumentasi, memeriksa, men-debug, dan membuat profil 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 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 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. 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.

Masalah Chromium: 1199787

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

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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