 Selamat sejarah semua, saya Jessalyn. Jom kita lihat apakah fungsi-fungsi terbaru yang ditawarkan dalam DevTools Chrome 91. Pertama sekali, pop-up yang baru akan muncul apabila anda hover ke penanda WebWitehose dalam panel performance. Dalam panel performance, mulakan profiling dan muat semula halaman Web itu. Kemudian, hover ke salah satu penanda WebWitehose untuk menyemat sama adanya prestasi index itu baik, memerlukan peningkatan atau buruk. Seterusnya, anda boleh memeriksah penjajaran ScrollSnap CSS. Apabila element HTML di halaman anda mempunyai ScrollSnap type, anda akan dapat melihat lancar ScrollSnap disebelahnya di dalam panel Elements. Klik lancar itu untuk menukar overlay ScrollSnap. Di sini, anda dapat melihat tanda titik di hujung Snap. ScrollPort itu mempunyai garisan lulus sementara item Snap mempunyai garisan putus. Scroll Padding diisi dengan warna hijau sementara scroll margin diisi dengan warna orang. Gunakan memory inspector yang baru ini untuk memeriksah array buffer dalam javascript dan juga memory wasm. Di panel sources, set satu breakpoint dan watsemula halaman. Perhatikan bahawa code kami mempunyai satu buffer wearable. Di bahagian scope, terdapat satu icon baru di sebelah nilai buffer. Klik icon itu akan mendedakan memory inspector. Anda boleh melayang memory dengan papan kekunci atau butang-butang dalam panel Untuk maklumat lanjut mengenai pemeriksaan array buffer javascript dan memory wasm, anda boleh melayang dokumentasi kami. Anda sekarang boleh mengaktifkan atau menyahaktifkan lencana secara selektif untuk mengakalkan fokus pada lencana yang penting sahaja semasa memeriksah halaman web. Di panel Elements, klik kanan di mana-mana element. Pilih Tetapan lencana dari menu, panel Tetapan lencana akan muncul di bahagian atas. Coba talker kotak pilihan untuk menunjukkan atau menyembunyikan lencana. Pra tonton image di panel Elements akan memaparkan lebih banyak informasi tentang image tersebut. Informasi ini boleh membantu anda memahami image tersebut secara lebih lanjut. Hover di satu image element. Pop-up itu akan menunjukkan size image di papakan percetak aspect ratio, intrinsic size, intrinsic aspect ratio, file size, dan source tekini untuk image tersebut. Bebutang network conditions yang baru telah ditambah di panel network. Ia datang dengan pilihan baru untuk mengubah dan menetapkan content and coding. Klik pada bebutang baru itu. Tab Network Conditions akan muncul. Perhatikan pilihan baru accepted content and coding. Coba talker options untuk menguji sama ada response pelayan dikodkan dengan tepat. Tab Issues sekarang mengkategorikan issue-issue dalam 3 kumpulan. Klik Bebutan Bacaan Issue dalam Console. Di sini anda boleh lihat issue-issue dikategorikan dalam 3 warna. Rallat halaman, perubahan pecah, dan cadangan penambah bayakan. Sekarang untuk tip bonus. Gunakan monitor events untuk mencatat peristiwa objek tertentu ke console. Sebagai contoh, saya ingin memantau resize dan scroll events tertinggap. Inilah syntax dia. Sekarang, tuber scroll atau ubah size tertinggap. Object event akan dilakukan di console. Gunakan unmonitor events untuk menghentikan pemantauan. Baiklah, seperti biasa, kemas kini tembahan akan dipaparkan di dalam blog. Sila layari siaran terbaru kami mengenai trust tokens, penambah bayakan panel sources, dan banyak lagi. Semua pautan adalah sedia dalam bahagian keterangan lanjut video ini. Sekian terima kasih. Jumpa lagi dalam masa 6 minggu untuk Chrome 92.