 Use the Document Picture-in-Picture API to increase user productivity. Improve performance by checking the Not Restore Reasons property to optimize PF cash use. It is now easier to debug missing install sheets in DevTools. And there's plenty more. I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 116. The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content. The Picture-in-Picture window in the Document Picture-in-Picture API is similar to a blank, same origin window open via window.open with some differences. First, the Picture-in-Picture window floats on top of other windows. The Picture-in-Picture window never outlifts the opening window. The Picture-in-Picture window cannot be navigated. And the Picture-in-Picture window position cannot be set by the website. The HTML on the screen sets up a custom video player and a button element to open the video player in a Picture-in-Picture window. And this code calls documentPicture-in-Picture.requestWindow when the user clicks the button to open a blank Picture-in-Picture window. The return promise resolves with a Picture-in-Picture window JavaScript object. The video player is moved to that window using a pen. Check out the link in the description for more details and examples. Modern browsers provide an optimization feature for history navigation called the Backward Forward Cache. BF Cache for short. It enables an instant loading experience when users go back to a page they have already visited. Pages can be blocked from entering the BF Cache or get evicted while in BF Cache for different reasons. Some required by specification and some specific to browser implementations. Previously, there was no way for developers to find out why their pages were blocked from using the BF Cache in the field. Though there was a test in Chrome DevTools, to enable monitoring in the field, the performance navigation timing class has been extended to include a not restored reasons property. This returns an object containing related information on all frames present in the document. Details such as frame ID and name to help identify them in the HTML, whether they were blocked from using the BF Cache and the reasons why they were blocked from using the BF Cache. This allows developers to take action to make those pages BF Cache compatible. Thereby, improve inside performance. Check out the link in the description for the code sample to find out the reasons your site might not be using BF Cache, since it can give you a performance boost. DevTools got a number of improvements to identify and debug issues with missing style sheets. First, the sources page 3 now shows only the successfully deployed and loaded style sheets to minimize confusion. Also, the sources editor now underlines and shows inline error tooltips next to failed import URL and href statements. The network panel consistently populates the initiator column with links to the exact line that references a style sheet that failed to load. The issues panel lists all style sheets loading issues including broken URLs, failed requests and misplaced import statements. Check out the link in the description for all the details and more information on DevTools in Chrome 116. And of course, there is plenty more. Motion path allows authors to position any graphical object and animated along a path specified by the developer. The display and content visibility properties are now supported in keyframe animations which allows exit animations to be added purely in CSS. And the fetch API can now be used with bring your own buffer readers, reducing garbage collection overhead and copies and improving responsiveness for users. All the details including links, docs and specs are in the post linked in the description. Hit the subscribe button now so that you don't miss the latest Chrome DevTools video, GUI challenges and more like one minute tips from our shorts. Yo soy Adriana Jara and as soon as Chrome 117 is released, I'll be right here to tell you what's new in Chrome.