Yang Baru di DevTools (Chrome 91)

Jecelyn Yeen

Informasi Data Web muncul di panel Performa

Arahkan kursor ke penanda Data Web di panel Performa untuk memahami indikatornya - apakah performanya baik, perlu ditingkatkan, atau buruk.

Pop-up informasi Data Web

Masalah Chromium: 1147872

Memvisualisasikan scroll-snap CSS

Sekarang Anda dapat mengalihkan badge scroll-snap di panel Elemen untuk memeriksa perataan snap scroll CSS.

Scroll-snap CSS

Saat elemen HTML di halaman Anda (misalnya, halaman demo ini) menerapkan scroll-snap-type, Anda dapat melihat badge scroll-snap di sampingnya di panel Elemen. Klik badge untuk mengalihkan tampilan overlay scroll-snap di halaman.

Pada contoh di atas, Anda dapat melihat tanda titik di tepi snap. Port scroll memiliki garis batas solid, sedangkan item snap memiliki garis batas tanda hubung. Padding scroll diisi dengan warna hijau, sedangkan margin scroll diisi dengan warna oranye.

Masalah Chromium: 862450

Pemeriksa Memori baru

Gunakan Memory inspector baru untuk memeriksa ArrayBuffer di JavaScript, serta memori Wasm.

Buka halaman demo ini. Di panel Sources, buka file demo-js.js, lalu tetapkan titik henti sementara di baris 18.

Muat ulang halaman. Luaskan bagian Cakupan di panel debugger kanan. Perhatikan ikon baru di samping nilai buffer. Klik untuk menampilkan Memory Inspector.

Lihat dokumentasi untuk mempelajari lebih lanjut cara memeriksa ArrayBuffer dan WebAssembly.Memory JavaScript dengan Memory Inspector baru ini.

Pemeriksa memori

Masalah Chromium: 1166577

Panel setelan badge baru di panel Elemen

Sekarang Anda dapat mengaktifkan atau menonaktifkan badge secara selektif melalui Setelan badge di panel Elemen. Gunakan fitur ini untuk menyesuaikan dan tetap berfokus pada badge penting saat memeriksa halaman web.

panel setelan badge di panel Elemen

Di panel Elements, klik kanan pada elemen mana pun. Pilih Setelan badge dari menu konteks, panel setelan badge akan muncul di bagian atas. Aktifkan atau nonaktifkan kotak centang untuk menampilkan/menyembunyikan badge.

Masalah Chromium: 1066772

Pratinjau gambar yang ditingkatkan dengan informasi rasio aspek

Pratinjau gambar di panel Elemen kini menampilkan informasi selengkapnya tentang gambar - ukuran yang dirender, rasio lebar tinggi yang dirender, ukuran intrinsik, rasio lebar tinggi intrinsik, dan ukuran file.

Informasi ini membantu Anda lebih memahami gambar dan menerapkan pengoptimalan jika diperlukan.

Pratinjau gambar dengan informasi rasio aspek

Informasi rasio aspek gambar juga tersedia di panel Jaringan saat Anda mengklik untuk melihat pratinjau gambar.

Informasi rasio aspek gambar di panel Jaringan

Masalah Chromium: 1149832, 1170656

Tombol kondisi jaringan baru dengan opsi untuk mengonfigurasi Content-Encoding

Tombol kondisi jaringan baru ditambahkan di panel Jaringan. Klik untuk membuka tab Kondisi jaringan.

Opsi Encoding Konten yang Diterima baru ditambahkan ke tab Kondisi jaringan. Konfigurasikan untuk menguji apakah respons server dienkode dengan benar di browser yang tidak mendukung gzip, brotli, atau Content-Encoding lainnya di masa mendatang.

Tombol kondisi jaringan baru dengan opsi untuk mengonfigurasi Encoding Konten

Masalah Chromium: 1162042

Peningkatan panel Gaya

Pintasan baru untuk melihat nilai yang dihitung di panel Gaya

Sekarang Anda dapat mengklik kanan properti CSS di panel Styles dan memilih View computed value untuk melihat nilai CSS yang dihitung.

Pintasan baru untuk melihat nilai yang dihitung

Masalah Chromium: 1076198

Dukungan untuk kata kunci accent-color

UI pelengkapan otomatis panel Gaya kini mendeteksi kata kunci CSS accent-color, yang memungkinkan developer web menentukan warna aksen untuk kontrol UI (misalnya, kotak centang, tombol pilihan) yang dihasilkan oleh elemen.

Properti CSS accent-color saat ini bersifat eksperimental. Aktifkan chrome://flags/#enable-experimental-web-platform-features untuk mengujinya.

warna-aksen

Masalah Chromium: 1092093

Mengkategorikan jenis masalah dengan warna dan ikon

Tab Masalah kini mengategorikan masalah ke dalam error halaman, perubahan yang dapat menyebabkan gangguan yang akan datang, dan kemungkinan peningkatan untuk indikasi tingkat keparahan yang lebih baik. Anda dapat membuka tab Masalah dengan mengklik tombol jumlah masalah di Konsol.

  • Error halaman (merah). Masalah yang memiliki dampak langsung terhadap fungsi halaman, seperti tidak menetapkan header CORS yang benar, dll.
  • Perubahan yang dapat menyebabkan gangguan mendatang (kuning). Masalah yang menginformasikan tentang perubahan platform web yang tidak kompatibel yang akan datang dan dapat menyebabkan hilangnya fungsi halaman (misalnya, peringatan tentang perubahan CORS RFC 1918 mendatang).
  • Kemungkinan peningkatan (biru). Potensi peningkatan di halaman, tetapi saat ini tidak mengganggu fungsi dasar halaman (misalnya, masalah aksesibilitas)

Mengkategorikan jenis masalah dengan warna dan ikon

Masalah Chromium: 1183241

Menghapus token Trust

Anda kini dapat menghapus token kepercayaan dengan tombol hapus baru di panel Token kepercayaan, di bagian panel Aplikasi.

Trust Token adalah API baru untuk membantu memberantas penipuan dan membedakan bot dengan manusia sungguhan, tanpa pelacakan pasif. Pelajari cara memulai Token Kepercayaan.

Menghapus token Trust

Masalah Chromium: 1126824

Melihat detail tentang fitur yang diblokir di tampilan Detail bingkai

Sekarang Anda dapat melihat detail tentang fitur yang diblokir di bagian Kebijakan izin di tampilan detail Frame.

Buka halaman demo ini. Buka panel Application, lalu pilih bingkai. Di bagian Kebijakan Izin, scroll ke properti Fitur Dinonaktifkan. Klik Tampilkan detail untuk melihat detail tentang alasan fitur diblokir. Klik ikon di samping setiap kebijakan untuk membuka iframe atau permintaan jaringan yang memblokir fitur.

Kebijakan izin adalah API platform web yang memberi situs kemampuan untuk mengizinkan atau memblokir penggunaan fitur browser dalam frame-nya sendiri atau dalam iframe yang disematkannya.

Fitur yang diblokir di tampilan detail Frame

Masalah Chromium: 1158827

Memfilter eksperimen di setelan Eksperimen

Temukan eksperimen lebih cepat dengan filter eksperimen baru. Misalnya, buka Setelan > Eksperimen, di kotak teks Filter, ketik "kontras" untuk memfilter semua eksperimen dengan kata "kontras".

Memfilter eksperimen di setelan Eksperimen

Kolom Vary Header baru di panel Penyimpanan cache

Gunakan kolom Vary Header baru di panel Cache Storage untuk melihat header respons HTTP Vary.

Kolom Vary Header

Masalah Chromium: 1186049

Peningkatan panel sumber

Dukungan untuk fitur JavaScript baru

DevTools kini mendukung fitur bahasa JavaScript pemeriksaan merek pribadi baru, alias #foo in obj.

Fitur pemeriksaan merek pribadi ini memperluas operator in untuk mendukung pengujian kolom class pribadi pada objek tertentu.

Coba di panel Konsol dan Sumber. Anda juga dapat memeriksa kolom pribadi di bagian Cakupan pada panel debugger.

Pemeriksaan merek pribadi JavaScript

Masalah Chromium: 11374

Dukungan yang ditingkatkan untuk proses debug titik henti sementara

DevTools kini menetapkan titik henti sementara dengan benar di beberapa skrip. Paket JavaScript modern (misalnya Webpack, Rollup) mendukung fitur pemisahan kode - ada skenario saat satu komponen bersama dapat disertakan dalam beberapa rute (pemisahan kode).

Sebelumnya, DevTools hanya dapat menetapkan titik henti sementara di satu lokasi mentah. Dengan peningkatan terbaru ini, DevTools dapat menetapkan titik henti sementara di semua lokasi yang relevan dengan benar.

Masalah Chromium: 1142705, 979000, 1180794

Mendukung pratinjau pengarahan kursor dengan notasi []

DevTools kini mendukung pratinjau pengarahan kursor pada ekspresi anggota JavaScript yang menggunakan notasi [] di panel Sumber.

Mendukung pratinjau pengarahan kursor dengan notasi '[]'

Masalah Chromium: 1178305

Garis besar file HTML yang ditingkatkan

DevTools kini memiliki dukungan garis besar yang lebih baik untuk file HTML. Di panel Sumber, buka file HTML. Anda dapat mengalihkan garis besar kode dengan keyboard Cmd + Shift + O di Mac atau Ctrl + Shift + O di Windows.

Pada contoh di bawah, DevTools kini mencantumkan semua fungsi dalam ringkasan dengan benar. Sebelumnya, DevTools hanya menampilkan beberapa fungsi.

Garis besar file HTML yang ditingkatkan

Masalah Chromium: 761019, 1191465

Pelacakan tumpukan error yang tepat untuk proses debug Wasm

DevTools kini me-resolve panggilan fungsi inline dan menampilkan pelacakan tumpukan error yang sesuai untuk proses debug Wasm.

Sebelumnya, DevTools hanya menampilkan referensi Wasm umum di pelacakan tumpukan Error.

Pelacakan tumpukan error yang tepat untuk proses debug Wasm

Chrome versi lama di sebelah kiri tidak menampilkan lokasi sumber (misalnya, dsquare) di pelacakan tumpukan error, sedangkan versi baru di sebelah kanan menampilkannya.

Masalah Chromium: 1189161

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

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