 Welcome! Here to the 100 Chrome release. Are you ready? 1, 2, 3! Oh, do you not have a party popper? Don't worry, I've got one for you too. Open the What's New tab in DevTools and click on the blank area to create a pop. Okay, back to the serious stuff. I'm Jessalyn. Let's dive into What's New in DevTools in Chrome 100. First up, you can now view and edit the CSS supports add rules in the styles pane. Here, I have two supports add rules defined. If the browser doesn't support the lab color function, the box's color will be light blue, else it will be pink. Chrome does not support the lab color function yet, so it shows light blue. By the way, only Safari will show pink now. With the new changes, you can view the support add rules in the styles pane. What's even better is that you can edit the rule. Let's invert the rule by removing the not. No background color is shown now. Go ahead and change the rule to RGB color instead. The background is once again light blue because Chrome supports RGB color. These changes make it easier to experiment with the add rules in real time. Next, a couple of recorders panel updates. The recorder now supports a list of common selectors by default. During the recording, the recorder will automatically select the element with these selectors by default. In this example, I have an email input with a test ID defined. The name input has no ID defined. Start the recording and click on these two inputs. Expand the step. You can see the email selector is using the data test ID selector while the name selector is using the CSS selector. To create user flows that are more resilient to changes, consider using one of these common selectors. Apart from that, if you want to use a different selector, you can now customize the selector of the recording too. For example, say you want to use a unique selector like data automation, you can specify that during the start of the recording. The recorder will use that as the preferred selector if it is found. Another update is on the recorder panel. You can now rename a recording. To rename a recording, click on the pencil button next to the title and edit it. Next, you can now hover the mouse over a class or a function in the sources panel during debugging to preview its properties. For example, open a JavaScript snippet in the sources panel. Run the snippet and hover the mouse over the dialog to view the class properties. Previously, the pop-up was less useful because it only showed the class name and the link to its location. Next, the performance recording now displays a new partially presented frames category in the frames timeline. Let's start a new recording to measure a pop-up interaction. Click on the daughter button to open the payment pop-up and stop the recording right away. Now, zoom into the spike and you will see the new partially presented frames in the frame timeline. Previously, the frames timeline visualized this as drop frames because it delays the main thread work. However, there are cases where these frames still produce visual updates driven by the compositor thread, just like our example just now. This new partially presented frames category aims to indicate more intuitively that although some content is not presented timely in the frame, it does not block visual updates altogether. Here is a bonus tip. Use the shadow editor to adjust your text or box shadow visually. In the styles pane, look for the text shadow declaration. Click on the icon in front of the declaration to open the shadow editor. Drag around to change the X and Y offset. You can adjust the blur radius too. The UI reflects the changes instantly and the CSS value is updated automatically too. Very cool. Alright, there are more new features covered in my blog post and as usual, the link is in the video description. Thanks for watching. See you in 4 weeks for Chrome 101. Ciao!