New Chrome Developer Tool Illuminates Opaque Responses

Programming - Apr 19, 2024

Chrome is introducing an opaque response-type visual indicator hoping to shed some light on exceeded storage quota errors when caching opaque responses.

As described in this Chromium ticket, the goal of the indicator is to reduce developer confusion over large chunks of storage quota consumed for mysterious reasons, as I had encountered in When 7 KB Equals 7 MB.

After reading through the ticket, I decided to try it out in Chrome Canary 72 using their example:

Add an opaque response to the Cache Storage API. The following is sufficient if you run it in the console of an arbitrary page served on a secure origin:

const cache = await'test-cache') const request = new Request('', {mode: 'no-cors'}); const response = await fetch(request); cache.put(request, response);

I then opened the Chrome DevTools “Application” tab and found my way to the test-cache that was created:

Google icon image listed as an opaque response in the Chrome DevTools Application tab

Chrome DevTools Application tab showing a new Response-Type column

Of note is a new “Response-Type” column. You’ll notice the image that was added to the test-cache reads “opaque.” Very nice! If you hover over the link, there is a helpful tooltip that reads:

As a security consideration, an opaque response potentially takes up far more cache space than its content length

The “opaque” link helpfully takes you to the Google Developers Debug Progressive Web Apps page reminding why caching opaque responses can easily exceed storage quota limitations.

While a small detail, this new visual indicator is a great idea and hopefully helps the community to avoid the terrifying and UX impacting DOMException: Quota exceeded error.

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More