Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 91)

Jecelyn Yeen

Informasi Web Vitals muncul di panel Performa

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

Pop-up informasi Data Web

Masalah Chromium: 1147872

Memvisualisasikan scroll-snap CSS

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

Scroll-snap CSS

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

Pada contoh di atas, Anda dapat melihat tanda titik pada tepi yang dipaskan. Port scroll memiliki garis batas yang solid sedangkan item snap memiliki garis putus-putus. 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, dan tetapkan titik henti sementara pada baris 18.

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

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

Pemeriksa memori

Masalah Chromium: 1166577

Panel setelan badge baru di panel Elements

Kini 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 elemen apa 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 lebih banyak informasi terkait ukuran gambar, rasio aspek yang dirender, ukuran intrinsik, rasio aspek intrinsik, dan ukuran file.

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

Pratinjau gambar dengan informasi rasio aspek

Informasi rasio tinggi lebar 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 jaringan tersebut 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 mendatang lainnya.

Tombol kondisi jaringan baru dengan opsi untuk mengonfigurasi Content-Encoding

Masalah Chromium: 1162042

Peningkatan panel gaya

Pintasan baru untuk melihat nilai komputasi di panel Styles

Anda kini dapat mengklik kanan properti CSS di panel Gaya, lalu memilih Lihat nilai komputasi 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 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.

warna aksen

Masalah Chromium: 1092093

Mengategorikan jenis masalah dengan warna dan ikon

Kini tab Masalah mengategorikan masalah ke dalam error halaman, perubahan yang dapat menyebabkan gangguan pada masa mendatang, dan kemungkinan peningkatan untuk menunjukkan tingkat keparahan yang lebih baik. Anda dapat membuka tab Masalah dengan mengklik tombol jumlah masalah di Konsol.

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

Mengategorikan jenis masalah dengan warna dan ikon

Masalah Chromium: 1183241

Hapus Trust token

Anda kini dapat menghapus trust token dengan tombol hapus baru di panel Trust tokens, pada panel Application.

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

Hapus Trust token

Masalah Chromium: 1126824

Lihat detail tentang fitur yang diblokir di tampilan detail Frame

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

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

Kebijakan izin adalah API platform web yang memberi situs kemampuan untuk mengizinkan atau memblokir penggunaan fitur browser dalam framenya sendiri atau dalam iframe yang disematkan.

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 yang menggunakan kata "kontras".

Memfilter eksperimen di setelan Eksperimen

Kolom `Vary Header` baru di panel Penyimpanan cache

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

Variasikan kolom Header

Masalah Chromium: 1186049

Peningkatan panel sumber

Dukungan untuk fitur JavaScript baru

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

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

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

Masalah Chromium: 11374

Peningkatan dukungan untuk proses debug titik henti sementara

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

Sebelumnya, DevTools hanya dapat menyetel titik henti sementara pada 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 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

Struktur {i>file<i} HTML yang ditingkatkan

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

Pada contoh di bawah ini, DevTools kini mencantumkan dengan benar semua fungsi di garis batas. Sebelumnya, DevTools hanya menampilkan sebagian fungsi.

Struktur {i>file<i} HTML yang ditingkatkan

Masalah Chromium: 761019, 1191465

Stack trace 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 di stack trace Error.

Stack trace error yang tepat untuk proses debug Wasm

Chrome versi lama di sebelah kiri tidak menampilkan lokasi sumber (misalnya, dsquare) dalam stack trace Error, 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, menguji API platform web mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait dengan DevTools.

Kirim saran atau masukan kepada kami melalui crbug.com.
Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.