Yang Baru di DevTools (Chrome 94)

Menggunakan DevTools dalam bahasa pilihan Anda

Chrome DevTools kini mendukung lebih dari 80 bahasa, sehingga Anda dapat bekerja dalam bahasa pilihan Anda.

Buka Settings, lalu pilih bahasa pilihan Anda di drop-down Preferences > Language, lalu muat ulang DevTools.

Preferensi" width="800" height="494">

Masalah Chromium: 1163928

Perangkat Nest Hub baru di Daftar perangkat

Anda kini dapat menyimulasikan dimensi Nest Hub dan Nest Hub Max dalam Mode perangkat.

Klik Alihkan Toolbar Perangkat   Mengalihkan Toolbar Perangkat  , pilih Nest Hub atau Nest Hub Max di bagian daftar perangkat.

Perangkat Nest Hub dalam mode Perangkat

Masalah Chromium: 1223525

Uji coba origin di tampilan Detail frame

Sekarang Anda bisa mendapatkan informasi tentang uji coba origin situs dalam tampilan detail frame di bagian panel Aplikasi.

Uji coba origin memberi Anda akses ke fitur baru atau eksperimental, untuk membangun fungsi yang dapat dicoba pengguna Anda selama waktu terbatas sebelum fitur tersebut tersedia untuk semua orang.

Buka halaman dengan uji coba origin (misalnya, halaman demo). Di panel Aplikasi, scroll ke bawah ke bagian Frame, lalu pilih frame teratas.

Uji coba origin di tampilan Detail frame

Masalah Chromium: 607555

Badge kueri penampung CSS baru

Badge penampung baru ditambahkan di samping elemen penampung (elemen ancestor yang cocok dengan kriteria aturan @@container). Klik badge untuk mengganti tampilan overlay penampung yang dipilih dan semua turunannya yang membuat kueri di halaman.

Badge kueri penampung CSS

Masalah Chromium: 1146422

Kotak centang baru untuk membalikkan filter jaringan

Gunakan kotak centang Balikkan baru untuk membalikkan filter di panel Jaringan.

Misalnya, Anda dapat mengetik "status-code: 404" untuk memfilter permintaan jaringan dengan status 404. Centang kotak Invert untuk meniadakan filter (menampilkan semua permintaan jaringan yang tidak memiliki status 404).

Membalikkan filter jaringan

Masalah Chromium: 1054464

Penghentian sidebar Konsol mendatang

Sidebar Konsol akan dihapus dan digantikan dengan UI filter yang dipindahkan ke toolbar. Apakah ada kekhawatiran atau masukan? Beri tahu kami melalui issue tracker ini.

Pesan penghentian penggunaan sidebar konsol

Masalah Chromium: 1232937

Menampilkan header Set-Cookie mentah di tab Masalah dan panel Jaringan

DevTools kini menampilkan header Set-Cookie mentah di tab Issues.

Sebelumnya, DevTools tidak menampilkan cookie yang salah format (header Set-Cookie yang salah) di panel Jaringan. Dengan filter response-header-set-cookie baru yang ditambahkan di panel Jaringan, pengguna dapat memfilter respons header Set-Cookie mentah. DevTools akan menautkan header Set-Cookie mentah di tab Masalah ke panel Jaringan.

Header 'Set-Cookie' mentah di tab Masalah dan panel Jaringan

Masalah Chromium: 1179186

Menampilkan aksesori native yang konsisten sebagai properti sendiri di Konsol

Console kini menampilkan aksesor native sebagai properti mereka sendiri secara konsisten.

Misalnya, saat mengevaluasi ekspresi new Int8Array([1, 2, 3]) di Console, pengakses native seperti length, byteOffset tidak ditampilkan di pratinjau. Dengan update terbaru ini, aksesor native ditampilkan dalam pratinjau dan nilai dievaluasi dengan cepat saat diperluas.

Menampilkan aksesori native yang konsisten sebagai properti sendiri di Konsol

Masalah Chromium: 1076820, ​​1199247

Pelacakan tumpukan error yang tepat untuk skrip inline dengan #sourceURL

DevTools kini menyelesaikan skrip inline dengan #sourceURL dengan benar dan menampilkan stack trace error yang tepat untuk proses debug.

Sebelumnya, DevTools menampilkan lokasi yang salah untuk skrip inline dengan #sourceURL, relatif terhadap dokumen di sekitarnya, bukan relatif terhadap tag <script> pembuka.

Pelacakan tumpukan error yang tepat untuk skrip inline dengan #sourceURL

Masalah Chromium: 1183990, ​​578269

Mengubah format warna di panel Computed

Sekarang Anda dapat mengubah format warna elemen apa pun di panel Computed dengan menekan Shift + mengklik pratinjau warna.

Shift+Klik pratinjau warna untuk mengubah format warna

Masalah Chromium: 1226371

Mengganti tooltip kustom dengan tooltip HTML native

DevTools kini mengadopsi tooltip HTML native di semua komponen. DevTools telah lama memiliki implementasi tooltip kustom karena kurangnya gaya tooltip HTML native.

Sayangnya, mempertahankan penerapan tooltip kustom itu rumit dan kami sering mengalami bug yang rumit.

Setelah menimbang ulang manfaat penerapan kustom, kami mendapati bahwa tooltip HTML native sudah cukup untuk DevTools dan penggunaan tooltip ini mencegah berbagai masalah bagi pengguna kami.

Tooltip DevTools

Masalah Chromium: 1223391

[Eksperimental] Menyembunyikan masalah di tab Masalah

Aktifkan eksperimen sembunyikan menu masalah untuk menyembunyikan masalah di tab Masalah. Dengan begitu, Anda dapat fokus pada masalah penting yang relevan bagi Anda.

Di tab Masalah, arahkan kursor ke masalah, klik menu masalah   Lainnya   di sebelah kanan, pilih Sembunyikan masalah seperti ini untuk menyembunyikannya.

Menu konteks sembunyikan masalah eksperimental

Masalah Chromium: 1175722

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.