 Konnichiwa, saya Jessalyn. Mari kita mulakan dengan apa yang baru di DevTools di Chrome 87. Pertama, DevTools sekarang mempunyai lebih banyak support untuk perangkat Css Grid. Kata-kata, anda mempunyai grid dengan 3 area yang terkenal, atas, bot 1 dan bot 2. Dengan 2 kolom set ke 1fr dan 2fr. Di sini adalah bagaimana pakaian akan terlihat. Untuk menginsipkan grid, pergi ke panel elemen dan klik di bawah grid baru di depan keadaan. Ini akan mencobrolkan overlay grid dan nombor perangkat. Untuk memastikan overlay, bukakan pakaian baru. Cuba mencobrol pakaian terkenal. Anda dapat melihat pakaian terkenal sekarang di jalanan. Atau cuba mencobrol pakaian terkenal terkenal untuk menginsipkan pakaian terkenal dan pakaian terkenal. Untuk menunjukkan pakaian terkenal 1fr dan 96.66px. Periksa dokumentasi baru kami untuk belajar lebih banyak tentang perangkat Css Grid. Selanjutnya, anda dapat mengambil perangkat terkenal dan mengambil perangkat web dengan perangkat web baru. Sebelum perangkat web baru ini, anda perlukan perangkat fisikal untuk mencobrol pakaian terkenal. Untuk menunjukkan perangkat web dari menu, lebih banyak pilihan, lebih banyak perangkat pakaian terkenal, mengambil perangkat perangkat perangkat virtual dan membuat perangkat baru dengan pilihan protokol, transport dan pilihan lain. Selepas itu, anda dapat mencoba mencobrol perangkat baru atau mengambil perangkat terkenal dari pakaian web anda. Perhatikan bahawa perangkat Css Grid telah diberikan pada masa sebenar, membuat pengalaman perangkat terkenal lebih mudah. Berjumpa lebih banyak tentang perangkat web ini dalam perangkat kami. Kami mempunyai blog engen yang berkongsi bagaimana kami membuat perangkat web terkenal. Pastikan anda mencobrol. Anda dapat mencobrol kedua-dua perangkat dengan mengambil perangkat terkenal antara atas dan perangkat bawah. Untuk mencobrol perangkat terkenal dan perangkat terkenal bersama, anda dapat mengklik perangkat terkenal dan memilih bergerak ke bawah untuk menggerak ke bawah. Sehingga anda dapat mengklik perangkat perangkat terkenal dan menginsipkan di perangkat terkenal tanpa tinggal konteks. Selanjutnya, perangkat perangkat mempunyai beberapa perangkat baru. Ada perangkat baru di dalam perangkat perangkat Klik di atas ini untuk menggerak perangkat perangkat terkenal. Anda dapat menggunakan perangkat perangkat dan perangkat perangkat yang sama di sisi. Kita juga memperlukan perangkat baru untuk membuat perangkat perangkat CSS dalam perangkat perangkat. Di panel elemen, memilih perangkat dan perangkat menggerak perangkat perangkat untuk menggerak perangkat perangkat CSS. Maka anda berusaha menutupkan perangkat terkenal Ini new feature makes it easier for you to selectively focus on just the set of related properties that you care about. The Lighthouse panel is now running Lighthouse 6.4 with two new audits. The preload fonts validates if all optional display fonts were preloaded. Valid source maps audits if a page has valid source maps for large and first-party JavaScript. Last one, you can now view the reporting tool endpoint for cross-origin and better policy called it and cross-origin opener policy called in the frame details view. In the application panel, scroll down and click on the frame. The reporting tool endpoint is displayed under the security and isolation section. Notice that DevTools also displays a report-only label for Co-IP and Co-OP that are set to report-only mode. Go to web.dev-co-op-co-ip to learn more about the reporting tool endpoint and how to make your site cross-origin isolated. Here is a bonus tip of a recent but lesser-known CSS debugging feature. The focus visible pseudo-class is a new CSS selector that aims to make styling focus more predictable. You can now use DevTools to force and inspect the focus visible state. In the elements panel, select an element and toggle the element state. Enable the focus visible checkbox to force and inspect the styles. You might be wondering what the difference is between focus visible and focus CSS selector. Focus visible invokes the same heuristic that the browser uses when it is deciding whether to show the default focus indicator. On the other hand, when you use focus to style an element, it tells the browser to ignore its heuristic and to always show your focus style. In some situations, this can break the user's expectation and lead to a confusing experience. Alright, find out more about new features in Chrome DevTools 87 in our blog post. See you in 6 weeks. Thanks for watching.