 Tobela! Adik-adik! Saya Justlyne, dan hari ini, kita akan mempunyai banyak update yang menarik di Chrome 116 dan 7. Pertama, berita yang baik. Sekarang, anda dapat menghidupi API responsi dengan feature Overwrites dengan DevTools. Mari kita lihat bagaimana ini dapat membantu kita melakukannya lebih cepat. Ada sebuah listap kopi di sini, tetapi API Backend belum siap. Mari kita menghidupi dengan panel network. Pertama, terlebih dahulu, mencari panggilan dan menghidupi content Overwrites. Jika ini adalah kali pertama anda mempunyai Overwrites, anda harus menghidupi folder yang menarik untuk menghidupi content di mana-mana. Bagus! Sekarang anda dapat menghidupi content di DevTools atau dengan IDE yang terbaik. Menghidupi listap kopi, menghidupi dan menghidupi pakaian. Kemudian, anda dapat menghidupi UI tanpa menunggu perubahan Backend. Dulu, anda juga dapat menghidupi HTML, CSS dan JavaScript. Anda dapat mudah menghidupi panggilan Overwrites dengan panggilan berat. Pertama, anda dapat menghidupi panggilan untuk melihat betul-betul jika panggilan Overwrites di mana-mana. Selanjutnya, anda dapat melihat panggilan yang lebih berat dan panel network. DevTools menghidupi panggilan dan menghidupi panggilan dari krom ekstensi. Anda mungkin melihat panggilan ini sebelumnya. Banyak anda dapat mencari panggilan yang tidak dihidupi. Oleh itu, kita akan menghidupi mereka dari panggilan. Anda dapat menghidupi panggilan ini dengan tab Resource Developer. Kita juga menunjukkan panggilan di file yang berlainan apabila anda menghidupi panggilan. Selanjutnya, di panel network, anda dapat menghidupi panggilan untuk menghidupi panggilan krom ekstensi di URL. Bukan lebih jauh menghidupi panggilan dengan panggilan skim. Berlainan sedikit yang telah diperlukan pada panggilan sisi untuk menghidupi anda untuk menghidupi panggilan kode. DevTools sekarang menggambil file ini sehingga anda menghidupi panggilan untuk menghidupi Anda ada pilihan untuk menghidupi panggilan dan memperkenalkan dengan jauh. Selanjutnya, panggilan kode diambil dengan default. Anda dapat menghidupi panggilan untuk menggambil panggilan atau menghidupi panggilan. Ini tergantung untuk file yang berlainan. Jika panggilan ini tidak menghidupi panggilan, Anda ada pilihan untuk menghidupi mereka di dalam perangkatan. Selanjutnya, beberapa panggilan baru untuk CSS. Anda dapat klik dan menghidupi untuk mengubah panggilan kode. Di Pada Selangkapan, mencari panggilan panggilan animation dan memilih panggilan eSync. Klik di mana-mana saja untuk menambah panggilan kontrol. Kemudian, anda dapat menghidupi panggilan untuk mengubah panggilan panggilan. Anda juga dapat menghidupi panggilan untuk menghidupi. Selanjutnya, anda sudah mulai menggunakan CSS nesting? Well, it is great. It makes the code more readable. In the styles pane, you can view the entire selector chain. As you can see, the parent selectors are grayed out. Debugging missing style sheets was made easy as well. The console points you to the exact line the style sheet that failed to load. Click on the error icon to find more actionable information in the issues tab. Next, you can inspect the flash priority in both network and performance panel. The flash priority can help optimise the core web vitals of your page. Use it to give hints to the browser on relative priority of the resources. Here are a few examples of setting the flash priority in HTML and JavaScript. Open the performance trace and select a resource. You can inspect the resources flash priority changes with the initial and final priority fields. Similarly, you can view both of these priorities in the network panel. Remember, you need to enable the big request row setting. Prerender can make next page navigations faster. Do you know you can define prerender URLs with the speculation rules API? Not only that, you can use DevTools to debug them. In this example, I define a rule to prerender 3 URLs ahead of time. However, I have only two links on the page and the third URL doesn't actually assist. There are a few ways to check if the future pages are prerender successfully. In the application panel, scroll down to the speculation rules to get an overview of the rule set status. To know the status of each URL, click to navigate to view their preload status. From here, we can find out why the third URL feel to load. Okey, since the first link prerender successfully, I expect it to open instantly when I click on it. Wow, it did. If I open the disk page pane, it shows me the current page was prerender successfully. If I refresh the page, then the prerender status is gone. Go to this link to learn more on this topic. Finally, time for a bonus tip. 2 keys are facing out soon. You can launch Chrome in the command line with this flag to test how the browser behave after the face out. Not only that, the issues tab also shows you warnings on the future applications with a link to guide you for the preparation. Alright, that's all for today. Check out the links in the description. Thanks for watching. See you soon. Ciao.