 Savaiti Tokun, I'm Jessalyn. Let's dive into what's new in DevTools in Chrome 93. You can now view and edit CSS container queries in the styles pane. Container queries give a much more dynamic approach to responsive design. The alias container query works in a similar way to an alias media query. However, instead of curing the viewport, the alias container queries the ancestor container that matches certain criteria. In the elements panel, click on the DOM element with container queries. DevTools now displays the container information in the styles pane. Click on it to edit the size. On top of that, is the container information. Hold the mouse over it to highlight the container element on the page and check the container size. Click on it to jump to the container element. The container queries feature is experimental currently. Please turn on the Enable Container Queries flag to test it. Next, you can now preview the web bundle content in the network panel. Web bundle is a file format for encapsulating one or more HTTP resources in a single file. It can include one or more HTML files, JavaScript files, images, or stylesheets. One of the interesting use cases is you can share websites as a single web bundle file over Bluetooth with your friends and they can run them offline in your origin's context. Open the network panel, click on the web bundle network request and preview it. The web bundle feature is experimental currently. You need to enable the experimental web platform features flag in order to test it. Next, attribution reporting API errors are now reported in the Issues tab. Click on the Issues icon to open the Issues tab. Here, you can find out more information about the errors. Attribution reporting is a new API to help you measure whether a user action, such as an ad click or view, leads to a conversion without using cross-site identifiers. Go to this URL to learn more. Next, the new context menu in the console allows you to copy any string as content, JavaScript literal or JSON literal. Open the console, type in some string and click enter. The console now formats string outputs as valid JavaScript literals. Now, right click on the string output. There are three copy string options here. For example, the copy string contents option lets you copy the raw string contents, including new lines and other special characters to the clipboard. Try it yourself. The Lighthouse panel is now running Lighthouse 8.1. If your site exposes source maps to Lighthouse, you will see a new view tree map button. Click on it to see a breakdown of your ship JavaScript filterable by size and coverage on load. The report also includes a new metrics filter. Pick the metric that is most relevant to you and focus on improving it. Check out the Lighthouse release notes for a full list of changes. Here is a bonus tip. Use the locker overrides to keep changes across page loads. For example, my friend Lydia is asking for suggestions to revamp her website about diving photos. We can edit that locally without any deployments. Go to the sources panel, select the overrides pane, then select a folder for overrides. Click Allow to Grand DevTools access to the folder. Let's add her name to the title and change the image size, border, and color. Save the changes and refresh the page. See, the changes are persistent now. Alright, there are more new features in Chrome DevTools 93. 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 94. Bye.