 Shalom, saya Jessalyn. Mari kita masuk ke negeri yang baru dalam DevTools di Chrome 104. Pertama, frame restart kembali. Sebelumnya, keadaan ini telah dilaporkan di Chrome 92 disebabkan masalah stabiliti. Mari kita tengok apa frame restart dan bagaimana kita boleh menggunakan. Di pakaian saya, saya mempunyai botan untuk menghubungi pakaian. Mari kita mulai menghubungi itu dengan menghubungi pakaian dalam pakaian pakaian. Hubungi pakaian, dan pakaian pakaian terbuka. Bagus. Tapi saya baru tahu saya telah menghubungi pakaian di pakaian yang salah. Sebenarnya, saya ingin memulai pakaian pada awal pakaian. Jadi, apa yang kita boleh lakukan sekarang? Well, instead of reloading the page and performing the same action again, we can use restart frame to rerun the function. In the course that, right click on toggle color scheme and select restart frame. There you go. The debugger now goes back to the top of the function and you can step through the code again. Next, a highly requested feature in the recorder panel. You can now replay user flow at the slow speed. The question is, how slow do you want to go? Let's start with importing a user flow in the panel. On the replay button, click on the drop down. There are three new options here. Slow, very slow, and extremely slow like a slot. Go ahead and select extremely slow and see what happens. Nice, the step are replay at a really slow speed. This gives you a chance to take a sip of coffee and observe clearly what's happening in the UI. Apart from that, you can now install a Chrome extension to export replay scripts in your favourite format. Oh, wait, not yet. Someone needs to build it first before we can install it. Are you keen to build one? We have exposed the recorder API in the Chrome extension. Your plugin needs to register as a recorder extension plugin and implement the stringify and stringify step methods. I have a demo extension here on my local machine. Let's try it out before we publish it to the Chrome Web Store. Go to the Chrome extensions page and enable the developer mode. Click on load unpack and select our demo folder. Once the extension is loaded, open a new tab with the recorder. Click on the export button and you will see a new export option is added here. Go to this link on the screen to learn more about building and publishing a DevTools extension. Next, you can now group files by authored and deployed in the sources panel. When developing web applications with modern frameworks like React, it could be difficult to navigate to the actual source files. All we can see is the minified version of the files generated by your build tool like Webpack. Let's enable the group files by authored and deployed checkbox. Deploy contains the files that the browser actually reads. These are usually minified files. On the other hand, authored contains your actual source codes similar to what you view in your IDE. DevTools generated these files based on the provided source maps usually generated by your build tools. With this feature, you should be able to locate the source code quicker. Send us your feedback if it's not. Next, a quicker way to debug slot elements with the new slot batch. In this example, these personal details cards are the same web component with different details. The web component is created with this person template with a few name slots. For each card, we populate the actual values to the name slots. With the new slot batch, you can jump to the assigned slot in the template with just one click. Previously, you needed to manually expand the nodes and find the slot locations yourself. Next, the performance insights panel has a new track for user timings. On your page, you can use the performance dot mark to set up timing marks and then find out the elapsed time between them with the performance dot measure method. In the performance insights panel, take a measure page load. Scroll down to view the user timings track. Our user timing mark is shown in the track. Here is the bonus tip. There are two ways to view the initiators and dependencies of a network request. In the network panel, hold down the shift key when hovering over a resource in the network panel. It will show you the initiator of the request in green and any dependencies in red. Optionally, you can view the request chain in the initiator tab as a nested list. The current request is bold. These features can help you understand why a resource was requested or what network activity a certain resource cost. Alright, there are more new features covered in my blog post and as usual, the link is in my video description. Thanks for watching. See you in 4 weeks for Chrome 105. Ciao!