Google opens up Chrome 117 Developer Tools box, drops in a few spanners

For Chrome 117, Google has expanded the browser's Developer Tools, aka DevTools, with 16 new features – the largest capability jump since Chrome 91 surfaced in 2021.

In an announcement on Tuesday, technical writer Sofia Emelianova detailed the bounty of added browser complexity for the benefit of web devs, who can be forgiven for finding the JavaScript ecosystem excessively mutable.

The stable version of Chrome 117 isn't slated to arrive until Tuesday, September 12, though some may see it as soon as Wednesday, September 6 as an "early stable release." There's also the Chrome Beta release channel that should have these features today for desktop users. The Dev channel has been enjoying Chrome 117 since July 21, and those using an up-to-date version of Chrome Canary have already moved on to Chrome 118.

Emelianova said the local overrides feature, which lets you save changes to local files and override HTTP response headers, has been refined to "easily mock response headers and web content of remote resources from the Network panel without access to them."

Altering response headers and web content can be useful when developing and debugging web applications and Chrome 117 adds an "Override content" menu item when right-clicking on a resource in the Network tab (which shows files fetched from the web). The menu item will activate previously set up local override files that specify request content and headers to be replaced.

Developers can also override the content of XHR and fetch requests alongside response headers. This provides a way to mock API responses for web app debugging and gives an alternative to more comprehensive API tools like Postman, Insomnia, and HTTP Toolkit.

Peekaboo!

Chrome 117 can now hide network requests from Chrome extensions, which developers might choose to do if they've installed extensions that make a lot of network requests, would rather not see those requests while debugging, and are supremely confident that their extensions can be trusted not to make covert network connections to spirit away personal data.

Coincidentally, developer Daniel Nakov recently published source code for a Chrome extension called Little Rat that's designed to reveal, rather than conceal, network calls from Chrome extensions. It's an option in case you're not sure whether your extensions can be trusted.

• Google reports 80% spike of Flutter-built apps in Play Store as 1.20 is released
• Google Chrome to shield encryption keys from promised quantum computers
• Maker of Chrome extension with 300,000+ users tells of constant pressure to sell out
• Google proudly regards dented shovel as Flash lies supine on the floor

Google's DevTool bonanza also makes HTTP status codes more useful by showing text descriptions alongside numeric codes. Most won't need explanatory text for a 404 error, but perhaps seeing "I'm a teapot" alongside a 418 error in the DevTools Network panel will prove helpful to those who haven't memorized the more obscure possibilities.

In another aesthetic refinement, Chrome 117 will pretty-print responses for JSON subtypes like JSON-LD, something it has failed to do previously. Basically, the response tab will look better when displaying a request with an application/[subtype]+json MIME subtype.

Along similar lines, there's also a new DevTools color scheme.

Emelianova says that the Performance panel now displays two priority fields in the summary of events in the Network track, specifically Initial Priority and (final) Priority. "With this additional field you can now see if the event's fetch priority changes and tweak the order of downloads," she explains.

Fans of legible code will be further pleased to learn that the "Code folding" option, which made code more readable by collapsing code blocks in the Sources pane, is now on by default, as is the preference option "Automatically reveal files in the sidebar."

Cookie monster

And for those wondering what the web will be like once Google gets around to dropping support for third-party cookies in favor of its aspirationally named Privacy Sandbox, speculate no more. Chrome 117 supports a --test-third-party-cookies-phaseout flag that can be activated from the Chrome command line.

In furtherance of the promised cookie purge, Google's browser has added an "Include third-party cookie issues" checkbox enabled by default to its Issues tab, which presents information about various problems and errors. The expectation is that the transition away from third-party cookies won't go smoothly.

Since Chrome 108, Google has been bringing back the prerendering of web pages that a Chrome user is deemed likely to visit. Much like speculative execution in CPU microarchitecture – the source of a few security issues – the idea is to fetch and load web resources before they're needed to save time.

Devs working with Chrome 117 and onward will be able to better debug these speculative web requests through the Preloading section, that has now been added to the Application panel.

Those working with WebAssembly (WASM) may appreciate that the C/C++ WebAssembly debugging extension for DevTools is now open source and available from the DevTools frontend repository.

There are also a few miscellaneous additions and two experimental features related to CSS emulation and enhancements to the Protocol monitor that lets devs inspect, debug, and profile Chromium-based browsers.

Web devs may want to hurry up and acclimate themselves to the new options because it will probably be no more than a month and a half before Google starts talking about Chrome 118 DevTools. ®