Google opens up Chrome 117 Developer Tools box, drops in a few spanners
(2023/08/17)
- Reference: 1692270911
- News link: https://www.theregister.co.uk/2023/08/17/chrome_117_developer_tools/
- Source link:
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 [1]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 [2]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.
[3]
Emelianova said the [4]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."
[5]
[6]
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 [7]XHR and [8]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 those 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 [9]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.
[10]Google reports 80% spike of Flutter-built apps in Play Store as 1.20 is released
[11]Google Chrome to shield encryption keys from promised quantum computers
[12]Maker of Chrome extension with 300,000+ users tells of constant pressure to sell out
[13]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 [14]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 [15]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 [16]MIME subtype .
[17]
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 [18]Privacy Sandbox , speculate no more. Chrome 117 supports a --test-third-party-cookies-phaseout flag that can be activated from the [19]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.
[20]
Since Chrome 108, Google has been bringing back the [21]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 [22]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 [23]C/C++ WebAssembly debugging extension for DevTools is now open source and available from the [24]DevTools frontend repository .
There are also a few miscellaneous additions and two experimental features related to CSS emulation and enhancements to the [25]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. ®
Get our [26]Tech Resources
[1] https://developer.chrome.com/blog/new-in-devtools-117/#chrome117
[2] https://chromiumdash.appspot.com/schedule
[3] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/devops&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=2&c=2ZN5ELtYGgcmfJPiZb-aiWQAAAwQ&t=ct%3Dns%26unitnum%3D2%26raptor%3Dcondor%26pos%3Dtop%26test%3D0
[4] https://developer.chrome.com/docs/devtools/overrides/
[5] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/devops&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44ZN5ELtYGgcmfJPiZb-aiWQAAAwQ&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[6] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/devops&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33ZN5ELtYGgcmfJPiZb-aiWQAAAwQ&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[7] https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
[8] https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
[9] https://github.com/dnakov/little-rat
[10] https://www.theregister.com/2020/08/05/google_reports_80_increase_in/
[11] https://www.theregister.com/2023/08/12/google_chrome_kem/
[12] https://www.theregister.com/2023/08/11/chrome_extension_developer_pressure/
[13] https://www.theregister.com/2016/12/04/google_killing_flash_slowly/
[14] https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418
[15] https://json-ld.org/
[16] https://www.iana.org/assignments/media-types/media-types.xhtml#application
[17] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/devops&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44ZN5ELtYGgcmfJPiZb-aiWQAAAwQ&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[18] https://www.theregister.com/2023/05/20/google_privacy_sandbox_july/
[19] https://www.chromium.org/developers/how-tos/run-chromium-with-flags/
[20] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/devops&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33ZN5ELtYGgcmfJPiZb-aiWQAAAwQ&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[21] https://developer.chrome.com/blog/prerender-pages/
[22] https://www.theregister.com/2023/08/09/google_intel_downfall/
[23] https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb
[24] https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/extensions/cxx_debugging/
[25] https://chromedevtools.github.io/devtools-protocol/
[26] https://whitepapers.theregister.com/
In an [1]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 [2]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.
[3]
Emelianova said the [4]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."
[5]
[6]
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 [7]XHR and [8]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 those 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 [9]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.
[10]Google reports 80% spike of Flutter-built apps in Play Store as 1.20 is released
[11]Google Chrome to shield encryption keys from promised quantum computers
[12]Maker of Chrome extension with 300,000+ users tells of constant pressure to sell out
[13]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 [14]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 [15]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 [16]MIME subtype .
[17]
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 [18]Privacy Sandbox , speculate no more. Chrome 117 supports a --test-third-party-cookies-phaseout flag that can be activated from the [19]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.
[20]
Since Chrome 108, Google has been bringing back the [21]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 [22]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 [23]C/C++ WebAssembly debugging extension for DevTools is now open source and available from the [24]DevTools frontend repository .
There are also a few miscellaneous additions and two experimental features related to CSS emulation and enhancements to the [25]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. ®
Get our [26]Tech Resources
[1] https://developer.chrome.com/blog/new-in-devtools-117/#chrome117
[2] https://chromiumdash.appspot.com/schedule
[3] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/devops&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=2&c=2ZN5ELtYGgcmfJPiZb-aiWQAAAwQ&t=ct%3Dns%26unitnum%3D2%26raptor%3Dcondor%26pos%3Dtop%26test%3D0
[4] https://developer.chrome.com/docs/devtools/overrides/
[5] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/devops&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44ZN5ELtYGgcmfJPiZb-aiWQAAAwQ&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[6] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/devops&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33ZN5ELtYGgcmfJPiZb-aiWQAAAwQ&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[7] https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
[8] https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
[9] https://github.com/dnakov/little-rat
[10] https://www.theregister.com/2020/08/05/google_reports_80_increase_in/
[11] https://www.theregister.com/2023/08/12/google_chrome_kem/
[12] https://www.theregister.com/2023/08/11/chrome_extension_developer_pressure/
[13] https://www.theregister.com/2016/12/04/google_killing_flash_slowly/
[14] https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418
[15] https://json-ld.org/
[16] https://www.iana.org/assignments/media-types/media-types.xhtml#application
[17] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/devops&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44ZN5ELtYGgcmfJPiZb-aiWQAAAwQ&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[18] https://www.theregister.com/2023/05/20/google_privacy_sandbox_july/
[19] https://www.chromium.org/developers/how-tos/run-chromium-with-flags/
[20] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/devops&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33ZN5ELtYGgcmfJPiZb-aiWQAAAwQ&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[21] https://developer.chrome.com/blog/prerender-pages/
[22] https://www.theregister.com/2023/08/09/google_intel_downfall/
[23] https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb
[24] https://chromium.googlesource.com/devtools/devtools-frontend/+/refs/heads/main/extensions/cxx_debugging/
[25] https://chromedevtools.github.io/devtools-protocol/
[26] https://whitepapers.theregister.com/
Re: Chrome
katrinab
If you are doing web development, you kind-of need to test it on Chrome.
Re: Chrome
badflorist
"kind-of"? Chrome is what Internet Explorer once was, which is the only browser people develop for.
Re: Chrome
iron
No you don't. Test with any of the derivatives and you're good to go, no need to install Google's spyware on your machine.
RockBurner
"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."
Isn't this just a (blatant) method of increasing advertisement "link-through" stats?
what I'd really like
Tim 11
what I'd really like is the ability to see the content of HTTP requests that fail CORS validation. I understand that this is blocked from being passed to the rendering engine and JavaScript code, but it would be useful if I could see it in the console so I can at least try to troubleshoot the problem.
iron
Why would web devs rejoice at Google throwing a spanner in the works? That is a bad thing.
Is this a case of The Register's new USA bias mangling the English language and confusing native speakers?
Chrome
The web browser I only use when accessing Google tools, or Amazon.
For everything else, I use Firefox + NoScript + uBlock Origin, or Brave.
Your sandbox ? As far as I'm concerned, you're in my sandbox.