Dukungan pen-debug-an untuk pelanggaran Jenis Tepercaya
Titik henti sementara pada pelanggaran Jenis Tepercaya
Anda kini dapat menetapkan titik henti sementara dan menangkap pengecualian pada Pelanggaran Jenis Tepercaya di panel Sumber.
API Trusted Types membantu Anda mencegah kerentanan pembuatan skrip lintas situs berbasis DOM. Pelajari cara menulis, meninjau, dan memelihara aplikasi yang bebas dari kerentanan XSS DOM dengan Trusted Types di sini.
Di panel Sumber, buka panel sidebar debugger. Perluas bagian Titik Henti Sementara Pelanggaran CSP dan centang kotak Pelanggaran Jenis Tepercaya untuk menjeda pengecualian. Cobalah sendiri dengan halaman demo ini.
Masalah Chromium: 1142804
Menautkan masalah di panel Sumber ke tab Masalah
Panel Sumber kini menampilkan ikon peringatan di samping baris yang melanggar Jenis Tepercaya. Arahkan kursor ke sana untuk melihat pratinjau pengecualian. Klik untuk meluaskan tab Masalah, yang memberikan detail selengkapnya tentang pengecualian dan panduan tentang cara memperbaikinya.
Masalah Chromium: 1150883
Mengambil screenshot node di luar area tampilan
Anda kini dapat mengambil screenshot node untuk node lengkap, termasuk konten di bawah fold. Sebelumnya, screenshot terpotong untuk konten yang tidak terlihat di area tampilan. Screenshot halaman penuh kini juga akurat.
Di panel Elements, klik kanan pada elemen, lalu pilih Capture node screenshot.
Masalah Chromium: 1003629
Tab Trust Token baru untuk permintaan jaringan
Periksa permintaan jaringan Trust Token dengan tab Trust Tokens baru.
Trust Token adalah API baru untuk membantu memberantas penipuan dan membedakan bot dengan manusia sungguhan, tanpa pelacakan pasif. Pelajari cara mulai menggunakan Trust Tokens.
Dukungan penelusuran bug lebih lanjut akan tersedia di rilis berikutnya.
Masalah Chromium: 1126824
Lighthouse 7 di panel Lighthouse
Panel Lighthouse kini menjalankan Lighthouse 7. Lihat catatan rilis untuk mengetahui daftar lengkap perubahan.
Audit baru di Lighthouse 7:
- Pramuat gambar Largest Contentful Paint (LCP). Memeriksa apakah gambar yang digunakan oleh elemen LCP dipramuat untuk mengoptimalkan waktu LCP Anda.
- Masalah yang dicatat ke panel
Issues. Menunjukkan daftar masalah yang belum terselesaikan di panelIssues. - Progressive Web App (PWA). Kategori PWA berubah cukup signifikan.
Grup Dapat Diinstal kini sepenuhnya didukung oleh pemeriksaan kemampuan yang memungkinkan kriteria dapat diinstal Chrome. Ini adalah sinyal yang sama yang terlihat di panel Manifes.
- Audit "Mendaftarkan pekerja layanan…" dipindahkan ke grup PWA yang Dioptimalkan, dan audit "Menggunakan HTTPS" kini disertakan sebagai bagian dari audit "persyaratan penginstalan" utama.
- Grup Cepat dan andal akan dihapus. Karena audit "persyaratan kemampuan penginstalan" yang diubah mencakup pemeriksaan kemampuan offline, audit "halaman saat ini dan start_url merespons dengan 200 saat offline" dihapus. Audit "Pemuatan halaman cukup cepat pada jaringan seluler" juga dihapus.
Masalah Chromium: 772558
Pembaruan panel Elemen
Mendukung pemaksaan status CSS :target
Anda kini dapat menggunakan DevTools untuk memaksakan dan memeriksa status :target CSS.
Di panel Elemen, pilih elemen dan alihkan status elemen. Aktifkan kotak centang :target
untuk menerapkan dan memeriksa gaya.
Gunakan pseudo-class :target untuk menata gaya elemen saat hash di URL dan ID elemen sama. Lihat demo ini untuk mencobanya sendiri. Fitur DevTools baru ini memungkinkan Anda menguji
gaya tersebut tanpa harus mengubah URL secara manual setiap saat.
Masalah Chromium: 1156628
Pintasan baru untuk menduplikasi elemen
Gunakan pintasan Duplikasikan elemen baru untuk meng-clone elemen secara instan.
Klik kanan elemen di panel Elements, pilih Duplicate element. Elemen baru akan dibuat di bawahnya.
Atau, Anda dapat menduplikasi elemen dengan pintasan keyboard:
- Mac:
Shift+Option+⬇️ - Window/ Linux:
Shift+Alt+⬇️
Masalah Chromium: 1150797, 1150797
Pemilih warna untuk properti CSS kustom
Panel Styles kini menampilkan pemilih warna untuk properti CSS kustom.
Selain itu, Anda dapat menahan tombol Shift dan mengklik pemilih warna untuk melihat representasi RGBA, HSLA, dan Hex dari nilai warna.
Masalah Chromium: 1147016
Pintasan baru untuk menyalin properti CSS
Anda kini dapat menyalin properti CSS lebih cepat dengan beberapa pintasan baru.
Di panel Elemen, pilih elemen. Kemudian, klik kanan class CSS atau properti CSS di panel Styles untuk menyalin nilai.
Opsi salin untuk class CSS:
- Salin pemilih. Menyalin nama pemilih saat ini.
- Salin aturan. Menyalin aturan pemilih saat ini.
- Salin semua deklarasi: Menyalin semua deklarasi dalam aturan saat ini, termasuk properti yang tidak valid dan yang memiliki awalan.
Opsi salin untuk properti CSS:
- Salin pernyataan. Menyalin deklarasi baris saat ini.
- Salin properti. Menyalin properti baris saat ini.
- Salin nilai: Salin nilai baris saat ini.
Masalah Chromium: 1152391
Pembaruan cookie
Opsi baru untuk menampilkan cookie yang didekode URL
Sekarang Anda dapat memilih untuk melihat nilai cookie yang didekode URL di panel Cookies.
Buka panel Application, lalu pilih panel Cookies. Pilih cookie apa pun dalam daftar. Aktifkan kotak centang Tampilkan URL yang didekode yang baru untuk melihat cookie yang didekode.
Masalah Chromium: 997625
Menghapus hanya cookie yang terlihat
Tombol Hapus semua cookie di panel Cookie kini diganti dengan tombol Hapus cookie yang difilter.
Di panel Application > panel Cookies, masukkan teks di kotak teks untuk memfilter cookie. Dalam contoh ini, kita memfilter daftar menurut "PREF". Klik tombol Hapus cookie yang difilter untuk menghapus cookie yang terlihat. Hapus teks filter dan Anda akan melihat cookie lainnya tetap ada dalam daftar. Sebelumnya, Anda hanya memiliki opsi untuk menghapus semua cookie.
Masalah Chromium: 978059
Opsi baru untuk menghapus cookie pihak ketiga di panel Penyimpanan
Saat menghapus data situs di panel Penyimpanan, DevTools kini hanya menghapus cookie pihak pertama secara default. Aktifkan sertakan cookie pihak ketiga untuk menghapus cookie pihak ketiga juga.
Masalah Chromium: 1012337
Mengedit Petunjuk Klien Agen Pengguna untuk perangkat kustom
Anda kini dapat mengedit Petunjuk Klien Agen Pengguna untuk perangkat kustom.
Buka Setelan > Perangkat, lalu klik Tambahkan perangkat kustom.... Luaskan bagian Petunjuk klien agen pengguna untuk mengedit petunjuk klien.
Client Hints Agen Pengguna adalah alternatif dari string Agen Pengguna yang memungkinkan developer mengakses informasi tentang browser pengguna dengan cara yang menjaga privasi dan ergonomis. Pelajari lebih lanjut Petunjuk Klien Agen Pengguna di web.dev/user-agent-client-hints/.
Masalah Chromium: 1073909
Pembaruan panel Jaringan
Mempertahankan setelan "rekam log jaringan"
DevTools kini mempertahankan setelan "Rekam log jaringan". Sebelumnya, DevTools mereset pilihan pengguna setiap kali halaman dimuat ulang.
Masalah Chromium: 1122580
Melihat koneksi WebTransport di panel Jaringan
Panel Jaringan kini menampilkan koneksi WebTransport.
WebTransport adalah API baru yang menawarkan pesan dua arah klien-server dengan latensi rendah. Pelajari lebih lanjut kasus penggunaannya, dan cara memberikan masukan tentang penerapan di masa mendatang di web.dev/webtransport/.
Masalah Chromium: 1152290
"Online" diganti namanya menjadi "Tanpa pembatasan"
Opsi emulasi jaringan "Online" kini diganti namanya menjadi "Tanpa Pembatasan".
Masalah Chromium: 1028078
Opsi penyalinan baru di panel Konsol, Sumber, dan Gaya
Pintasan baru untuk menyalin objek di panel Konsol dan Sumber
Sekarang Anda dapat menyalin nilai objek dengan pintasan baru di panel Konsol dan Sumber. Hal ini sangat berguna terutama saat Anda memiliki objek besar (misalnya, array panjang) untuk disalin.
Masalah Chromium: 1149859, 1148353
Pintasan baru untuk menyalin nama file di panel Sumber dan panel Gaya
Anda kini dapat menyalin nama file dengan mengklik kanan:
- file di panel Sumber, atau
- nama file di Styles pane di panel Elements
Pilih Salin nama file dari menu konteks untuk menyalin nama file.
Masalah Chromium: 1155120
Pembaruan tampilan detail frame
Informasi Service Worker baru di tampilan Detail frame
DevTools kini menampilkan pekerja layanan khusus di bawah frame yang membuatnya.
Di panel Aplikasi, luaskan frame dengan pekerja layanan, lalu pilih pekerja layanan di bagian hierarki Pekerja Layanan untuk melihat detailnya.
Masalah Chromium: 1122507
Mengukur informasi Memori di tampilan Detail frame
Status API performance.measureMemory() kini ditampilkan di bagian Ketersediaan API.
API performance.measureMemory() yang baru memperkirakan penggunaan memori seluruh halaman web. Pelajari cara memantau total penggunaan memori halaman web Anda dengan API baru ini dalam artikel ini.
Masalah Chromium: