Yang Baru di DevTools (Chrome 96)

Jecelyn Yeen

Fitur pratinjau: Panel Ringkasan CSS baru

Gunakan panel CSS Overview baru untuk mengidentifikasi potensi peningkatan CSS di halaman Anda. Buka panel Ringkasan CSS, lalu klik Rekam ringkasan untuk membuat laporan CSS halaman Anda.

Anda dapat melihat informasi lebih mendalam. Misalnya, klik warna di bagian Colors untuk melihat daftar elemen yang menerapkan warna yang sama. Klik elemen untuk membuka elemen di panel Elements.

Panel CSS Overview adalah fitur pratinjau. Tim kami masih aktif berupaya meningkatkan kualitasnya dan kami menantikan masukan Anda untuk peningkatan lebih lanjut.

Baca artikel ini untuk mempelajari lebih lanjut panel Ringkasan CSS.

Panel Ringkasan CSS

Masalah Chromium: 1254557

Pengalaman pengeditan dan penyalinan panjang CSS yang dipulihkan dan ditingkatkan

Pengalaman salin CSS dan edit sebagai teks dipulihkan untuk properti CSS dengan panjang. Pengalaman ini rusak dalam rilis terakhir.

Selain itu, Anda dapat menarik untuk menyesuaikan nilai unit dan memperbarui jenis unit melalui dropdown. Fitur penulisan panjang add-on ini tidak akan memengaruhi pengeditan utama sebagai pengalaman teks.

Laporkan melalui goo.gle/length-feedback jika Anda menemukan masalah.

Anda dapat menonaktifkannya melalui kotak centang Settings > Experiments > Enable CSS length authoring tools in the Styles pane.

Masalah Chromium: 1259088, 1172993

Memperbarui tab rendering

Mengemulasi fitur media CSS prefers-contrast

Mengemulasi fitur media CSS prefers-contrast

Fitur media prefers-contrast digunakan untuk mendeteksi apakah pengguna telah meminta lebih banyak atau lebih sedikit kontras di halaman.

Buka Menu Perintah, jalankan perintah Show Rendering, lalu tetapkan dropdown Emulate CSS media feature prefers-contrast.

Masalah Chromium: 1139777

Mengemulasi fitur Tema Gelap Otomatis Chrome

Gunakan DevTools untuk mengemulasi tema gelap otomatis agar mudah melihat tampilan halaman Anda saat Tema Gelap Otomatis Chrome diaktifkan.

Chrome 96 memperkenalkan Uji Coba Origin untuk Tema Gelap Otomatis di Android. Dengan fitur ini, browser menerapkan tema gelap yang dibuat secara otomatis ke situs bertema terang, saat pengguna memilih untuk menggunakan tema gelap di Sistem Operasi.

Buka Command Menu, jalankan perintah Show Rendering, lalu tetapkan dropdown Emulate auto dark mode.

Mengemulasi fitur Tema Gelap Otomatis Chrome

Masalah Chromium: 1243309

Menyalin deklarasi sebagai JavaScript di panel Gaya

Dua opsi baru ditambahkan di menu konteks agar Anda dapat dengan mudah menyalin aturan CSS sebagai properti JavaScript. Opsi pintasan ini sangat berguna, terutama bagi developer yang bekerja dengan library CSS-in-JS.

Di panel Styles, klik kanan aturan CSS. Anda dapat memilih Salin deklarasi sebagai JS untuk menyalin satu aturan atau Salin semua deklarasi sebagai JS untuk menyalin semua aturan.

Misalnya, contoh di bawah akan menyalin paddingLeft: '1.5rem' ke papan klip.

Menyalin deklarasi sebagai JavaScript

Masalah Chromium: 1253635

Tab Payload baru di panel Jaringan

Gunakan tab Payload baru di panel Jaringan saat Anda memeriksa permintaan jaringan dengan payload. Sebelumnya, informasi payload tersedia di tab Header.

Tab Payload di panel Jaringan

Masalah Chromium: 1214030

Meningkatkan tampilan properti di panel Properti

Panel Properties kini hanya menampilkan properti yang relevan, bukan semua properti instance. Prototipe dan metode DOM kini dihapus.

Bersama dengan peningkatan panel Properti di Chrome 95, Anda kini dapat menemukan properti yang relevan dengan lebih mudah.

Tampilan properti di panel Properti

Masalah Chromium: 1226262

Update konsol

Opsi untuk menyembunyikan error CORS di Konsol

Anda dapat menyembunyikan error CORS di Konsol. Karena error CORS kini dilaporkan di tab Masalah, menyembunyikan error CORS di Konsol dapat membantu mengurangi kekacauan.

Di Console, klik ikon Settings dan hapus centang pada kotak Show CORS errors in console.

Opsi untuk menyembunyikan error CORS di Konsol

Masalah Chromium: 1251176

Pratinjau dan evaluasi objek Intl yang tepat di Konsol

Objek Intl kini memiliki pratinjau yang tepat dan dievaluasi dengan cepat di Konsol. Sebelumnya, objek Intl tidak dievaluasi dengan segera.

Objek Intl di Konsol

Masalah Chromium: 1073804

Pelacakan tumpukan asinkron yang konsisten

Konsol kini melaporkan pelacakan tumpukan async untuk fungsi async agar konsisten dengan tugas asinkron lainnya, dan konsisten dengan yang ditampilkan di Stack Panggilan.

stack trace asinkron

Masalah Chromium: 1254259

Mempertahankan sidebar Konsol

Sidebar Konsol akan tetap ada. Di Chrome 94, kami mengumumkan penghentian penggunaan sidebar Konsol yang akan datang dan meminta masukan serta kekhawatiran dari developer.

Kami kini telah mendapatkan cukup banyak masukan dari pemberitahuan penghentian penggunaan dan kami akan berupaya meningkatkan kualitas sidebar, bukan menghapusnya.

Sidebar konsol

Masalah Chromium: 1232937, 1255586

Panel Cache aplikasi yang tidak digunakan lagi di panel Aplikasi

Panel Cache aplikasi di panel Aplikasi kini dihapus karena dukungan untuk AppCache dihapus dari Chrome dan browser berbasis Chromium lainnya.

Masalah Chromium: 1084190

[Eksperimental] Panel Reporting API baru di panel Aplikasi

Reporting API dirancang untuk membantu Anda memantau pelanggaran keamanan halaman, panggilan API yang tidak digunakan lagi, dan lainnya.

Dengan diaktifkannya eksperimen ini, Anda kini dapat melihat status laporan di panel Reporting API baru di panel Application.

Perlu diketahui bahwa bagian Endpoints saat ini masih dalam pengembangan aktif (tidak menampilkan endpoint pelaporan untuk saat ini).

Pelajari lebih lanjut Reporting API dengan artikel ini.

Panel Reporting API di panel Aplikasi

Masalah Chromium: 1205856

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.

Yang baru di DevTools

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