Yang Baru di DevTools (Chrome 91)

Informasi Web Vitals muncul di panel Performa

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

Masalah Chromium: 1147872

Memvisualisasikan scroll-snap CSS

Anda kini dapat mengganti badge scroll-snap di panel Elemen untuk memeriksa perataan 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 pada tepi penyesuaian. Port scroll memiliki garis batas solid, sedangkan item snap memiliki garis batas putus-putus. Padding scroll diisi dengan warna hijau, sedangkan margin scroll diisi dengan warna oranye.

Masalah Chromium: 862450

Pemeriksa Memori baru

Gunakan Pemeriksa memori 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 ikon tersebut untuk menampilkan Memory Inspector.

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

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 fokus pada badge penting saat memeriksa halaman web.

Di panel Elements, klik kanan pada elemen mana saja. 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 aspek yang dirender, ukuran intrinsik, rasio aspek intrinsik, dan ukuran file.

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

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

Masalah Chromium: 1149832, 1170656

Tombol kondisi jaringan baru dengan opsi untuk mengonfigurasi Content-Encodings

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

Opsi Accepted Content-Encodings baru ditambahkan ke tab Network conditions. Konfigurasikan untuk menguji apakah respons server dienkode dengan benar di browser yang tidak mendukung gzip, brotli, atau Content-Encoding lainnya di masa mendatang.

Masalah Chromium: 1162042

Peningkatan panel gaya

Pintasan baru untuk melihat nilai yang dihitung di panel Styles

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

Masalah Chromium: 1076198

Dukungan untuk kata kunci accent-color

UI pelengkapan otomatis panel Styles 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.

Masalah Chromium: 1092093

Mengategorikan 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 berdampak langsung pada fungsi halaman, seperti tidak menyetel header CORS yang benar, dll.
• Perubahan yang dapat menyebabkan gangguan mendatang (kuning). Masalah yang menginformasikan tentang perubahan mendatang yang tidak kompatibel pada platform web yang dapat mengakibatkan 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)

Masalah Chromium: 1183241

Menghapus Token tepercaya

Sekarang Anda dapat menghapus token tepercaya dengan tombol hapus baru di panel Token tepercaya, di bagian panel Aplikasi.

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

Masalah Chromium: 1126824

Melihat detail tentang fitur yang diblokir di tampilan Detail frame

Sekarang Anda dapat melihat detail tentang fitur yang diblokir di bagian Kebijakan izin dalam tampilan Detail frame.

Buka halaman demo ini. Buka panel Aplikasi, lalu pilih bingkai. Di bagian Permissions Policy, scroll ke properti Disabled Features. Klik Tampilkan detail untuk melihat detail 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 memberikan kemampuan kepada situs untuk mengizinkan atau memblokir penggunaan fitur browser dalam frame-nya sendiri atau dalam iframe yang disematkannya.

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

Kolom Vary Header baru di panel Penyimpanan cache

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

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.

Cobalah di panel Console dan Sources. Anda juga dapat memeriksa kolom pribadi di bagian Cakupan di panel debugger.

Masalah Chromium: 11374

Peningkatan dukungan untuk proses debug titik henti sementara

DevTools kini menetapkan titik henti sementara dengan benar di beberapa skrip dengan benar. Penggabung JavaScript modern (mis. Webpack, Rollup) mendukung fitur pemisahan kode - ada skenario di mana 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 menyetel titik henti sementara di semua lokasi yang relevan dengan benar.

Masalah Chromium: 1142705, 979000, 1180794

Mendukung pratinjau saat mengarahkan kursor dengan notasi []

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

Masalah Chromium: 1178305

Peningkatan struktur file HTML

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

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

Masalah Chromium: 761019, 1191465

Pelacakan tumpukan error yang tepat untuk proses debug Wasm

DevTools kini menyelesaikan panggilan fungsi inline dan menampilkan stack trace error yang tepat untuk proses debug Wasm.

Sebelumnya, DevTools hanya menampilkan referensi Wasm generik dalam Error stack trace.

Chrome versi lama di sebelah kiri tidak menampilkan lokasi sumber (mis. dsquare) dalam Error stack traces, sedangkan versi baru di sebelah kanan menampilkannya.

Masalah Chromium: 1189161

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.

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