 Bonjour, I'm Jesseline, and this is What's New in DevTools in Chrome 108. As 2022 is ending, this is the last video of the year. Let's dive in. Don't you find it frustrating when a piece of your CSS is valid but has no effect on your page? Well, DevTools now shows hints for inactive CSS properties. For example, let's say you set the width and height of a hyperlink, the syntax is totally valid. However, there are no changes on the page. That is because height and width has no visual impacts on inline elements. Sometimes we forgot these types of rule as is. In the styles pane, DevTools now fade out the inactive properties. If you hover over the new icon next to the property, you can learn why the rule has no visual effect and get suggestions on possible fixes. This is a nice nifty feature, isn't it? Put your thoughts in the comments below. We are actively listening to your feedback on the recorder panel. The recorder now auto-detects the Unix path and text selector of an element if they assist. This is one of the highly requested features. Let's see how it works. Open the command menu to launch the recorder. Then open an assisting recording and expand a step. Use the selector to pick on the menu item. Did you catch that? Apart from the usual Aria and CSS selector, the X path and text selectors are now available. It is worth mentioning that as of now, Papyrtiar also supports text selector. Export the user flow as Papyrtiar script and it will work out of the box. Unfortunately, not all elements have Unix text, and the recorder detects the selector based on the DOM3 sequence, not how it looks visually. For example, try to use the selector picker to pick on the Espresso element in the card preview. As you can see, no text selector got picked because the word Espresso is not Unix. It appears multiple times on the page. Next, pick on the Americano cup. The text selector shows Espresso water. You might be wondering why. Shouldn't it be water Espresso? Let's look at the cup's HTML. The cup body has a CSS rule that reverses the ingredient display. The actual ingredient sequence in the DOM is Espresso followed by water. The recorder will combine all the text within the selector across elements to form the Unix text. The next feature improves the debuggability of minified code significantly. You can now step through commerce-separated expressions. For example, let's say in your code, you call the full function twice and return a number. Each expression ends with a semicolon. You can set the breakpoint and start debugging. When you click on step over to next function, the debugging pauses at the next full function and on the return line. This works great. However, most of the time, you might not be debugging the code you wrote. If you are using a transpiler or minifier, your bar function may turn into commerce-separated expressions, something like this. Previously, during your debug, DevTools did not step through the full functions as there are no semicolon. This might have caused some confusion to developers on the debugging behavior. Now, DevTools handles stepping through commerce-separated expressions, the same as the once-fifth semicolons. Lastly, a bonus tip. Use the reveal inside bar option to locate the file in the navigation pane. You can use Ctrl P shortcut on Windows or Command P on Mac OS to open a source file. At the moment, the navigation pane doesn't show where exactly the file is located. Once you right-click on the file and select reveal inside bar, you will be able to locate it in the pane. When this feature is cool, we see my blog post for more details with the links below. Thanks for watching. See you next year for Chrome 109. Ciao!