 Chow Kha Van, I'm Jessaline. Let's dive into what's new in DevTools in Chrome 89. First up, let's take a look at the new debugging support for trusted type violations. DOM XSS is one of the most common web security while in the laboratories. Trusted Types is an API to help you prevent this. Learn more about the API in web.dev slash trusted dash types. You can now set breakpoints and cache exceptions on trusted type violations in the Sources panel. In the Sources panel, open the debugger sidebar pane. Expand the CSP violation breakpoints section and enable the trusted type violations checkbox. Refresh the page. The code execution now pauses on the exceptions. Notice the new warning icon next to the line that violates trusted type. You can hold on it to preview the exception. Or you can click on it to expand the Issues tab. It provides more details on the exceptions and guidance on how to fix the issue. Next, you can now capture node screenshots for a full node, including content below the fold. Previously, the screenshot was cut off for content not visible in the viewport. To capture a node screenshot, right-click on an element in the Elements panel and select Capture Node Screenshot. Use the new Trust Dockens tab to inspect the Trust Dockens network request. Trust Dockens is a new API to help combat fraud and distinguish bots from real humans without passive tracking. Learn how to get started with Trust Dockens in web.dev slash Trust Dockens. Open a web page that supports Trust Dockens and make a Trust Dockens request. In the Network panel, click on the Trust Dockens network request. You can inspect it with the new Trust Dockens tab. Further debugging support will come in the future releases. The Lighthouse panel is now running Lighthouse 7 with a few new audits. After generating the report, scroll to the Best Practices section. The new Issues audit indicates a list of unresolved issues in the Issues panel. The preload largest Contentful Paint image audits if the image used by the LCP elements is preloaded in order to improve your LCP time. The PWA category has changed fairly significantly. The installable group is now powered entirely by the Capability checks that enable crumbs installable criteria. This means these are the same signals seen in the Manifest pane as in the Application panel. Check out the Lighthouse release notes for a full list of changes. Next, let's take a look at a couple of new features in the Elements panel. You can now use DevTools to force and inspect the CSS target state. Say you have a page with two divs with ID. We can use the target pseudo class to style elements when the hash in the URL and the ID of an element are the same. This new DevTools feature lets you test such styles without having to manually change the URL all the time. In the Elements panel, select an element and toggle the element state. Enable the target checkbox to force and inspect the styles. Use the new duplicate element shortcut to clone an element instantly. Right-click an element in the Elements panel, select duplicate element. A new element will be created under it. Alternatively, you can duplicate elements with keyboard shortcuts. Use the Shift alternate arrow down in Windows or Shift option arrow down in Mac. The styles pane now shows color pickers for custom CSS properties. In the styles pane, a small color square is now shown next to the custom CSS property. Click on it to open the color picker. You can also hold the Shift key and click on color square to cycle through different color representations. You can now copy CSS properties quicker with a few new shortcuts. In the styles pane, right-click on a CSS class. Three new copy options are added here. Alternatively, right-click on a CSS property. DevTools offers options to copy declaration, property, or value. Go try it out. Here is a bonus tip. If you find yourself typing the same JavaScript expression in the console repeatedly, consider using the live expressions. This way, you type an expression once and then pin it to the top of your console. The value of the expression updates in near real time. Say, I would like to keep track of the number of sections in this page. In the console, click on the Create Live Expression icon and type document.querySelector or section.length. Next, try to duplicate the section element. See, the number is updated automatically. There are more new features in Chrome DevTools 89. As usual, find out more in our blog post. The link is provided in the video description. Thanks for watching. See you in six weeks for Chrome 90.