 Saobona! I am Jessalyn, and I'm excited to share with you the first step to the update of the year. Let's dive into Chrome 109. Firstly, we have 3 nice additions in the Recorder panel. Now, you are able to remove the navigation step from the user flow, right-click at any step for further action, and copy the code to the clipboard. Open an Assisting User Flow in the Recorder. Previously, when you were replaying the user flow, DevTools would always refresh the page. That works well for most of the case. However, you might want to perform in-page automation without reloading the page. With the latest updates, the Recorder shows both the set viewport and navigation step separately. You can right-click on the step and remove it. Keep replaying the user flow and add more coffee to the card. By the way, I really like the new right-click menu. Previously, you had to move your mouse to the far right and click on the 3-dot menu. Too much work! I'm glad we can right-click anywhere in the step now. Did you notice the new copy options? Instead of exporting the whole user flow, now you can copy only the step to the clipboard. It works with your extensions too. For example, you can copy the step as Nightwatcher as scripts. This way, you can paste and update any Assisting script with ease. Next, the Performance panel now shows the actual function names in the trace if there is a source map. For example, in my code, I have a SayHi function and a TakeAbreak function. However, this is not what the browser reads. The file is minified during production. Open the minified file, the SayHi function becomes N, and the TakeAbreak function becomes O. Previously, when you record a trace in the Performance panel, the trace only shows you the minified function's names. Obviously, this makes it harder to debug. With the latest changes, DevTools now reads the source map and shows the actual function names. You can also click on the link to jump directly to the code. Next, we have two new shortcuts for the keyboard levels. One for the Sources panel and one for Autocomplete. When you have multiple files open in the Sources panel, you can switch between them using Function, Command, Arrow Up, and Dial in Mac OS. If you are using Windows or Linux, use the Control, Page Up, or Dial key. Apart from that, open the Console and type Window. You can use the Arrow Up and Down to navigate the Autocomplete list. For Emacs levels, you can use the Control N and Control P as well. Next, two more interesting updates on Advanced Debugging. DevTools now evaluate New Dot Target and WigRef Reference directly during debugging. Have you heard of New Dot Target before? It is a meta property that lets you detect whether a function was called using the new operator. Let's set the breakpoint in this function and execute it. In the console, you can log any variables in this function to check their values. This applies to New Dot Target as well. Previously, it would return errors when you entered New Dot Target. We are fixed that. Apart from that, a WigRef object lets you hold a WigReference to another object without preventing that object from getting garbage collected. Let's execute the code. DevTools added an in-line preview for the value. In addition to that, now you can evaluate the WigReference directly in the console. Previously, you have to explicitly call the ref on them to resolve it. Time for a bonus tip. You can record and replay user flows with your real device. For example, here is my phone. Let me connect my phone to the laptop and enable the debugging mode. Once you connect the phone, you can open the Chrome Inspect page in your laptop. Look for the tab you want to test and click Inspect to open it. Open the recorder and start the new recording. Now, on my mobile phone, I will add a coffee to the cart and click to check out. The recorder will capture this tab accordingly. Alright, that's all for today. Remember to visit my blog post for more details with the links below. Thanks for watching. See you soon. Ciao!