Here's what you need to know:
- Use the Document Picture in Picture API to increase user productivity.
- It is now easier to debug missing stylesheets 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.
Document Picture-in-Picture API.
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 opened using window.open()
, with some differences:
- The Picture-in-Picture window floats on top of other windows.
- The Picture-in-Picture window never outlives the opening window.
- The Picture-in-Picture window cannot be navigated.
- The Picture-in-Picture window position cannot be set by the website.
The following HTML sets up a custom video player and a button element to open the video player in a Picture-in-Picture window.
<div id="playerContainer">
<div id="player">
<video id="video"></video>
</div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>
The following JavaScript calls documentPictureInPicture.requestWindow()
when the user clicks the button to open a blank Picture-in-Picture window. The returned promise resolves with a Picture-in-Picture window JavaScript object. The video player is moved to that window using append()
.
pipButton.addEventListener('click', async () => {
const player = document.querySelector("#player");
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow();
// Move the player to the Picture-in-Picture window.
pipWindow.document.body.append(player);
});
Check out Picture-in-picture for any element for more details and examples.
DevTools missing stylesheets debugging improvements.
DevTools got a number of improvements to identify and debug issues with missing stylesheets.
First: the Sources > Page tree now shows only the successfully deployed and loaded stylesheets to minimize confusion.
Also the Sources > Editor now underlines and shows inline error tooltips next to failed, @import
,url()
, and href
statements.

- The Console, in addition to links to failed requests, now provides links to the exact line that references a stylesheet that failed to load.

The Network panel consistently populates the Initiator column with links to the exact line that references a stylesheet that failed to load.
The Issues panel lists all stylesheets loading issues, including broken URLs, failed requests, and misplaced @import
statements.

Check out what’s new in DevTools for all the details and more information on DevTools in Chrome 116.
And more!
Of course there’s plenty more.
- Motion path allows authors to position any graphical object and animate it along a path specified by the developer.
- The
display
andcontent-visibility
properties are now supported in keyframe animations, which allows exit animations to be added purely in CSS. - The fetch API can now be used with Bring Your Own Buffer readers, reducing garbage collection overhead and copies, and improving responsiveness for users.
A previous version of this post stated that the Back/forward cache notRestoredReasons
API was included in Chrome 116 but this feature has been delayed until a future release.
Further reading
This covers only some key highlights. Check the links below for additional changes in Chrome 116.
- What's new in Chrome DevTools (116)
- Chrome 116 deprecations and removals
- ChromeStatus.com updates for Chrome 116
- Chromium source repository change list
- Chrome release calendar
Subscribe
To stay up to date, subscribe to the Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video.
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!
Updated on • Improve article