 Namaste. I'm Jess Lynn. Let's dive into what's new in DevTools in Chrome 96. First up, use the new CSS Overview Panel to identify potential CSS improvements on your page. Open the panel via more options, more tools, CSS Overview. Click on Capture Overview. The report shows the summary of your pages CSS. For example, select the Phone Info section. It shows the summary of your phone details and usage. Click on the Occurances to view the list of affected elements. Click on the element to open it in the Elements panel. Go to gu.gov.css-overview to understand the report further. The CSS Overview Panel is a preview feature. Our team is still actively working on it. Please send us your feedback at gu.gov.css-overview-feedback. We are looking for feedback for further enhancements. Next, you can now emulate the CSS Preference Contrast Media Feature. The Preference Contrast Media Feature is used to detect if the user has requested more or less contrast in the page. Open the Command Menu with Ctrl Shift P or Command Shift P in Mac OS. Run the Show Rendering Command to open the Rendering tab. Locate the Emulate CSS Preference Contrast drop-down. There are four options you can select from. More, less, custom or no emulation. Another emulation feature. Use DevTools to emulate Autoduck Team to easily see how your page loads when Chrome's Autoduck Team is enabled. Chrome 96 introduces an Origin Trial for Autoduck Team on Android. With this feature, the browser applies an automatically generated Duck Team to your website depending on the user's operating system settings. In the Rendering tab, locate the Emulate Autoduck Mode drop-down. There is no emulation applied by default. You can enable or disable it. Two new options are added in the Context Menu for you to easily copy CSS rules as JavaScript properties. These shortcuts are handy especially for those of you who are working with CSS in JS libraries. In the Styles pane, right-click on the CSS rule. You can select Copy Declaration as JavaScript to copy a single rule or copy all declarations as JavaScript to copy all the rules. Use the new payload tab in the Network Panel when you inspect a network request with payload. In the Network Panel, select a network request with payload. Then, open the payload tab to view the payload information. Next, you can now hide course errors in the console. As the course errors are now reported in the Issues tab, hiding course errors in the console can help reduce the clutter. In the console, click on the Settings icon and uncheck the Show Course Errors checkbox. Here is the bonus tip. Use the Coverage tab to find unused JavaScript and CSS code. Removing unused code can speed up your page load and save your mobile user's cellular data. Open the Coverage tab via more options, more tools coverage. You can specify whether code coverage data should be collected per function or per blog. Per blog coverage is more detailed but also far more expensive to collect. By default, DevTools uses per-function coverage. Click on the Reload button to reload the page and start capturing coverage. Click on the Stop button to stop recording. The table in the Coverage tab shows you what resources were analyzed and how much code is used within each resource. Click a row to open that resource in the Sources Panel and see a line-by-line breakdown of used code and unused code. Alright, there are more new features in Chrome DevTools 96. As usual, go to the video description for the link to my blog post and other information. Thanks for watching. See you in 4 weeks for Chrome 97. Ciao!