Baru di Chrome 122

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari selami dan lihat hal-hal baru untuk developer di Chrome 122.

Storage Buckets API.

Storage Buckets API memberikan tingkat perincian yang lebih mendetail untuk mengelola penyimpanan persisten dengan lebih baik.

Biasanya, saat pengguna kehabisan ruang penyimpanan di perangkat mereka, data yang disimpan dengan API seperti IndexedDB atau localStorage akan hilang tanpa ada tindakan dari pengguna. Salah satu cara untuk membuat penyimpanan tetap ada adalah dengan menggunakan metode persist() dari antarmuka StorageManager. Namun, metode permintaan penyimpanan ini bersifat persisten atau tidak sama sekali

Ide inti dari Storage Buckets API adalah memungkinkan situs membuat beberapa bucket penyimpanan, sehingga browser dapat memilih untuk menghapus setiap bucket secara terpisah dari bucket lainnya. Jadi, Anda dapat menentukan prioritas penghapusan untuk memastikan data yang paling berharga tidak dihapus.Setiap bucket penyimpanan dapat berisi data yang terkait dengan API penyimpanan yang telah ditetapkan seperti IndexedDB dan CacheStorage.

Kunjungi tidak semua penyimpanan dibuat sama: memperkenalkan Bucket Penyimpanan untuk mengetahui detail selengkapnya dan contoh kode untuk mulai menggunakan Bucket Penyimpanan.

Peningkatan DevTools di Panel Performa

Di Chrome 122, DevTools menyertakan peningkatan berikut di panel Performa.

Pertama, Linimasa di bagian atas panel Performa kini memungkinkan Anda menetapkan breadcrumb dan berpindah di antara breadcrumb. Untuk menetapkan breadcrumb, pilih rentang di Linimasa, arahkan kursor ke atasnya, lalu klik tombol N md zoom_in yang sesuai. Anda dapat membuat beberapa breadcrumb bertingkat secara berurutan. Untuk beralih di antara tingkat zoom, klik breadcrumb yang sesuai pada rantai di bagian atas Linimasa. Tonton video berikutnya untuk melihat cara kerja breadcrumb.

Selain itu, kini ada inisiator peristiwa di jalur Utama. Jalur Performa > Utama secara default menampilkan tanda panah yang menghubungkan inisiator dan peristiwa berikutnya yang disebabkannya.

  • Pembatalan validasi gaya atau tata letak -> Hitung ulang gaya atau Tata Letak
  • Permintaan Bingkai Animasi -> Bingkai Animasi Diaktifkan
  • Minta Callback Tidak Ada Aktivitas -> Callback Aktifkan Tidak Ada Aktivitas
  • Instal Timer -> Timer Diaktifkan
  • Create WebSocket -> Send... dan Receive WebSocket Handshake atau Destroy WebSocket

Untuk melihat panah, cari peristiwa seperti itu di rekaman aktivitas, lalu klik peristiwa tersebut.

Panah dari permintaan dan pengaktifan callback tidak ada aktivitas.

Temukan update DevTools lainnya di Yang baru di Devtools 122.

Opsi unsanitized Async Clipboard API

Saat menyalin dan menempel menggunakan API Papan Klip Async, opsi unsanitized untuk metode read() memungkinkan aplikasi dan situs mendapatkan HTML yang tidak rapi. Kecuali situs menyertakan properti ini, pembacaan HTML dari papan klip akan dibersihkan.

Secara default, saat membaca jenis MIME text/html menggunakan API asinkron, sanitizer dipanggil untuk menghapus konten dari markup HTML karena masalah keamanan, dan gaya akan disisipkan dalam HTML yang dihasilkan. Hal ini menyebabkan payload HTML yang besar dan hilangnya fidelitas konten HTML saat dibaca oleh developer web atau aplikasi seluler.

Anda dapat melihat perbedaan output di contoh berikut.

Input:

<style>p { color: blue; }</style><p>Hello, World!</p>'

Bersani (default):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

Dengan opsi unsanitized:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Buka Berhenti memblokir akses papan klip untuk mempelajari dasar-dasar Clipboard API.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Dalam CSS, kueri penampung dengan fitur yang tidak didukung tidak pernah cocok. Misalnya, kueri berikut tidak akan pernah cocok karena fitur yang tidak diketahui:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() tidak memengaruhi objek File, tetapi hanya menghapus objek jenis teks.

  • Dengan drawingBufferStorage WebGL, Anda dapat menghindari salinan tambahan saat mengonversi rendering ke format piksel buffer gambar default dan menggambar konten yang memiliki presisi lebih dari 8 bit.

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Periksa link berikut untuk melihat perubahan tambahan di Chrome 122.

Subscribe

Untuk terus mengikuti info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Halo Adriana Jara, dan segera setelah Chrome 123 dirilis, saya akan segera memberi tahu Anda apa yang baru di Chrome!