Bug 169865 – Web Inspector: Add "Disable Caches" option that only applies to the inspected page while Web Inspector is open

• Component: Web Inspector
• Status: RESOLVED FIXED

[Chris Chiera]

With Chrome, when developing (aka the inspector is open), most of us will not want caching enabled as otherwise need to constantly hard refresh or empty the cache. We also would not want to completely disable the cache since then when not inspecting and simply browsing the web we wouldn't get the performance benefits of caching. 

Chrome solves this easily, with having a setting in Inspector to disable caching when the inspector is open.

In Safari, there is a disable cache but it doesn't mention "when inspector is open". Curious how to enable that like Chrome, or if that is not yet possible in Safari would like to request the feature unless there is a reason why Safari has chosen to now allow disabling cache only when the inspector is open like Chrome.

[Blaze Burg]

This would be extremely confusing to most people. Completely disabling caches does not match any browsing mode and has unexpected behavior. And it would make the Network and Timeline tab results completely useless if you are trying to diagnose performance issues a user sees.

In the Inspector there is a Reload From Origin command (Cmd-Shift-R), which essentially makes all cache lookups fail (but still caches the responses). This is what you want to use if you suspect there is stale content. We could consider adding that to Safari itself, but such enhancements are tracked via bugreport.apple.com, not WebKit bugzilla.

There are also many server-side things you can do to bust out of the cache.

[Chris Chiera]

Based on your response, I'm thinking you may have misunderstood the request/report.

In regards to, "This would be extremely confusing to most people." By most people, do you mean most developers? As the setting would only appear in the Web Inspector settings which is only used by developers. The option to disable cache when the inspector is open has been around for many years in Chrome and there hasn't been any confusion among developers on this feature to my knowledge. 

Just want to make sure it's clear this is not in regards to changing a default caching setting for Webkit/Safari users, this is only in regards to a Web Inspector setting. And like in Chrome by default its not enabled, but is simply a setting you check off if desired. 

Screenshot: http://share.heavymark.com/2J1U3W2n0e1g

It's incredibly useful for developers, and developers can easily uncheck if they want to enable cache temporarily while the inspector is still open.

Safari already allows you to disable cache completely via "Develop > Disable Caches". But the downside of that is that it would disable cache on all websites, even when just browsing rather than actually developing (aka inspector is open).

Let me know if that helps clarify the request to bring this Chrome developer feature to Webkit (and subsequently Safari).

[Blaze Burg]

(In reply to comment #2)
> Based on your response, I'm thinking you may have misunderstood the
> request/report.
> 
> In regards to, "This would be extremely confusing to most people." By most
> people, do you mean most developers? As the setting would only appear in the
> Web Inspector settings which is only used by developers. The option to
> disable cache when the inspector is open has been around for many years in
> Chrome and there hasn't been any confusion among developers on this feature
> to my knowledge. 
> 
> Just want to make sure it's clear this is not in regards to changing a
> default caching setting for Webkit/Safari users, this is only in regards to
> a Web Inspector setting. And like in Chrome by default its not enabled, but
> is simply a setting you check off if desired. 
> 
> Screenshot: http://share.heavymark.com/2J1U3W2n0e1g
> 
> It's incredibly useful for developers, and developers can easily uncheck if
> they want to enable cache temporarily while the inspector is still open.
> 
> Safari already allows you to disable cache completely via "Develop > Disable
> Caches". But the downside of that is that it would disable cache on all
> websites, even when just browsing rather than actually developing (aka
> inspector is open).
> 
> Let me know if that helps clarify the request to bring this Chrome developer
> feature to Webkit (and subsequently Safari).


There is no material difference between disabling the cache through Chrome's Inspector and Safari's "Disable Caches" option. They both set the global cache size to zero, which purges every thing and prevents new entries from being cached. This is a consequence of using a shared network process with a shared cache.

[Chris Chiera]

Sorry to clarify again, but you mention disabling cache is the same between Safari and Chrome. Yes, if I disable cache in either it would be the same, however, this bug report isn't about comparing the generic disabling cache in Safari vs Chrome, which certainly are the same.

This is in regards to Chrome has an option in the inspector to disable cache "ONLY when the inspector is open" (screenshot in last message). Safari "does not" have that option.

Thus when setting disable cache in Safari it will disable it all of the time. There is no option to disable cache "ONLY when the inspector is open" like Chrome offers.

So with that setting enabled in Chrome, I can have the inspector closed, and view say Apple.com and Google.com, etc with the inspector closed, and caching will work as normal. But if when viewing Apple.com for instance if I open the web inspector caching would be disabled for that tab until I've closed the inspector. It's incredibly helpful and has been in Chrome for years, but opened this report hoping we might someday see that feature in Webkit and then eventually Safari. 

Hopefully that clarifies that this request is not in regards to changing caching for non developers nor changing the default cache setting for developers, nor about comparing the standard disable cache (for all pages) in both Chrome and Safari. Thanks!

[Blaze Burg]

(In reply to comment #4)
> Sorry to clarify again, but you mention disabling cache is the same between
> Safari and Chrome. Yes, if I disable cache in either it would be the same,
> however, this bug report isn't about comparing the generic disabling cache
> in Safari vs Chrome, which certainly are the same.
> 
> This is in regards to Chrome has an option in the inspector to disable cache
> "ONLY when the inspector is open" (screenshot in last message). Safari "does
> not" have that option.
> 
> Thus when setting disable cache in Safari it will disable it all of the
> time. There is no option to disable cache "ONLY when the inspector is open"
> like Chrome offers.
> 
> So with that setting enabled in Chrome, I can have the inspector closed, and
> view say Apple.com and Google.com, etc with the inspector closed, and
> caching will work as normal. But if when viewing Apple.com for instance if I
> open the web inspector caching would be disabled for that tab until I've
> closed the inspector. It's incredibly helpful and has been in Chrome for
> years, but opened this report hoping we might someday see that feature in
> Webkit and then eventually Safari. 
> 
> Hopefully that clarifies that this request is not in regards to changing
> caching for non developers nor changing the default cache setting for
> developers, nor about comparing the standard disable cache (for all pages)
> in both Chrome and Safari. Thanks!

I will reopen this bug, but I still don't understand the use case. Why are stale files being served? Do you not have control over your server configuration? Is Reload From Origin too hard to use/find? Do you turn this on all the time or just to workaround particular issues? "Because it's in Chrome" tells me nothing.

[Chris Chiera]

Thanks. The use case, is when developer are developing on any sites, ones own, clients, etc, would always want caching disabled so when making changes in the code and no change happens in the browser, don't have to wonder if its due to caching or an issue with the change just made in the code. If it is a caching issue sometimes CMD+Shift+R works othertimes it doesnt and have to do a full empty of the cache etc. With caching disabled it helps rule that issue out when developing (inspector is open). And if needed to debug with caching enabled, would simply uncheck the setting temporarily. 

However, wouldn't want to simply set "Develop > Disable Cache" because then the other majority of the time when simply browsing websites (not developing) due want caching enabled normally for performance reasons.

It's incredible useful and have loved using the feature for years in Chrome. In the past hadn't considered using Safari to seriously for development since it lacked a lot of finishing touches that Chrome inspector has, and while it still doesn't offer all the features Chrome Inspector does, it has made incredible strides over the past year, so wanted to post a few items here to help shorten that gap. (But yes, also understand Safari/Webkit Inspector is not Chrome Inspector) and some different differences/omissions are on purpose due to Apple and Google having different goals/views.

[Radar WebKit Bug Importer]

<rdar://problem/31250573>

[Joseph Pecoraro]

We already have NetworkAgent.setCacheDisabled. Currently it does the wrong thing. We should make it do the right thing.

When hooking it up and making it do the right thing we should remove the legacy backends claiming to have support for it:

  1. Remove the "setCacheDisabled" command from Source/WebInspectorUI/Versions/*.json
  2. Source/WebInspectorUI/Scripts/update-LegacyInspectorBackendCommands.rb

[Blaze Burg]

Created attachment 305371 [details]
Proposed Fix (pending possible new icon)

[Joseph Pecoraro]

Comment on attachment 305371 [details]
Proposed Fix (pending possible new icon)

View in context: https://bugs.webkit.org/attachment.cgi?id=305371&action=review

> Source/WebCore/inspector/InspectorNetworkAgent.cpp:697
> +    m_pageAgent->page().setResourceCachingDisabled(disabled);

This state should be getting restored to normal when the front end closes (probably also in disable)

[Blaze Burg]

Created attachment 305398 [details]
Proposed Fix v1.1 (pending possible new icon)

[Build Bot]

Comment on attachment 305398 [details]
Proposed Fix v1.1 (pending possible new icon)

Attachment 305398 [details] did not pass ios-sim-ews (ios-simulator-wk2):
Output: http://webkit-queues.webkit.org/results/3415356

New failing tests:
compositing/absolute-inside-out-of-view-fixed.html

[Build Bot]

Created attachment 305444 [details]
Archive of layout-test-results from ews123 for ios-simulator-wk2

The attached test failures were seen while running run-webkit-tests on the ios-sim-ews.
Bot: ews123  Port: ios-simulator-wk2  Platform: Mac OS X 10.11.6

[Joseph Pecoraro]

Comment on attachment 305398 [details]
Proposed Fix v1.1 (pending possible new icon)

View in context: https://bugs.webkit.org/attachment.cgi?id=305398&action=review

r- for two reasons:

    1. Need tests for all new protocol commands.
    2. I think we need to more appropriately address setting/restoring this state

> Source/WebInspectorUI/ChangeLog:33
> +        * Versions/Inspector-iOS-9.3.json:
> +        Remove the old command, it was not used and didn't do the right thing anyway.

You need to run Source/WebInspector/Scripts/update-LegacyInspectorBackendCommands.rb to update the associated BackendCommands for these backends.

> Source/WebCore/inspector/InspectorNetworkAgent.cpp:652
> +    m_pageAgent->page().setResourceCachingDisabled(false);

There are two approaches for toggling WebCore state from Web Inspector.

-- Approach A: Inspector Only Override

This approach makes sense for setting that are only active when Web Inspector is open and goes away when Web Inspector closes.

The way we were doing this for other Inspector overrides is to essentially have two settings:

    1. The normal setting which all other clients may be toggling.
    2. The inspector override of the setting not changing what clients are toggling.

And change the normal setting getter to check both (1) and (2) [or just (2)]. This would mean something like:

    Page::setResourceCacheDisabled(bool x) { m_resourceCachingDisabled = x; } // (1)
    Page::setResourceCacheDisabledInspectorOverride(bool x) { m_resourceCachingDisabledInspectorOverride = x; } // (2).
    Page::isResourceCacheDisabled() { return m_resourceCachingDisabled || m_resourceCachingDisabledInspectorOverride; }

In this case Web Inspector forcibly overrides a built-in setting where others can modify that built-in setting we need a pattern like this to avoid the inspector suddenly breaking the other client of the normal setting.


-- Approach B: Toggle the Normal Setting

This makes sense for settings that persist when Web Inspector is not open and Web Inspector checks for their initial values when it opens and toggles the values the same way other clients toggle it (affecting all clients).

If this is the case we would detect the initial Page::isResourceCacheDisabled value when Web Inspector opens and reflect that.

------

I think this falls into category A. Because we only want to disable the resource cache while Web Inspector is open, and return back to normal settings when Web Inspector closes. The browser may be disabling cache, but Web Inspector doesn't need to reflect that, it has its own force disable cache button that does not affect when Web Inspector is not open.

[Blaze Burg]

Created attachment 305631 [details]
Patch v2

[Joseph Pecoraro]

Comment on attachment 305631 [details]
Patch v2

View in context: https://bugs.webkit.org/attachment.cgi?id=305631&action=review

r=me

> Source/WebInspectorUI/ChangeLog:18
> [phone]  Brian Burg  <[e-mail]>

Double ChangeLog. Just merge this top part into the bottom one.

> Source/WebInspectorUI/UserInterface/Base/Main.js:195
> +    // COMPATIBILITY (iOS 10): Network.setDisableResourceCaching did not exist.

I've been doing "10.3" because that is really the last Versioned protocol.

> Source/WebInspectorUI/UserInterface/Base/Main.js:198
> +        NetworkAgent.setResourceCachingDisabled(this.resourceCachingDisabledSetting.value);

We could cut down on protocol traffic by only doing this if the value is true. I think that is a safe assumption to make.

> Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js:131
> +        // COMPATIBILITY (iOS 10): Network.setDisableResourceCaching did not exist.

I've been doing "10.3" because that is really the last Versioned protocol.

> Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js:135
> +            this._disableResourceCacheNavigationItem = new WebInspector.ActivateButtonNavigationItem("disable-resource-cache", toolTipForDisableResourceCache, activatedToolTipForDisableResourceCache, "Images/StepOver.svg", 16, 16);

This probably needs a new icon. I get the idea with this one is that we are bypassing the cache so it looks like a "step over the cache". Not sure if you want to have a new icon before or after landing this.

> LayoutTests/http/tests/inspector/network/set-resource-caching-disabled-disk-cache.html:25
> +    let suite = InspectorTest.createAsyncSuite("Network.SetResourceCachingDisabled.DiskCache");

The other is named "SetResourceCachingDisabled.MemoryCache". I rather like these with the "Network." prefix.

> LayoutTests/http/tests/inspector/network/set-resource-caching-disabled-disk-cache.html:63
> +    addTestCase({
> +        name: "SetResourceCachingDisabled.DiskCache",
> +        description: "Fail to load a resource from the disk cache when resource caching is disabled",
> +        expression: `triggerDiskCacheLoad()`,
> +        responseSource: WebInspector.Resource.ResponseSource.Network,
> +        statusCode: 200,
> +    });

This test could just have a:

    setup(result) { NetworkAgent.setResourceCachingDisabled(true); resolve() }

Instead of putting it inside "addTestCase" above which affects both the PossibleNetworkLoad and the Attempted DiskCache Load.

[Blaze Burg]

Committed r214494: <http://trac.webkit.org/changeset/214494>

[Chris Chiera]

Thanks, you guys rock!

[Chris Chiera]

I see Safari Preview 27 was released today and saw number one on the list of changes was, this request, "Added “Disable Caches” toggle in the Networking tab that only applies to the inspected page while Web Inspector is open." Awesome.

However, updated to Safari 27 and see the new settings page in the Inspector and it doesn't seem to show a toggle anywhere there for "Disable Caches". Am I missing something?

Screenshot: http://share.heavymark.com/0W1d0v3U3I0w

[Joseph Pecoraro]

(In reply to Chris Chiera from comment #19)
> I see Safari Preview 27 was released today and saw number one on the list of
> changes was, this request, "Added “Disable Caches” toggle in the Networking
> tab that only applies to the inspected page while Web Inspector is open."
> Awesome.
> 
> However, updated to Safari 27 and see the new settings page in the Inspector
> and it doesn't seem to show a toggle anywhere there for "Disable Caches". Am
> I missing something?

Yep, the key part was "in the Network tab". In the navigation bar at the top of the Network Tab there is a button to disable the resource cache. Like this: <http://i.imgur.com/WdO5n1e.png>

Let us know if you find any issues!

[Blaze Burg]

(In reply to Joseph Pecoraro from comment #20)
> (In reply to Chris Chiera from comment #19)
> > I see Safari Preview 27 was released today and saw number one on the list of
> > changes was, this request, "Added “Disable Caches” toggle in the Networking
> > tab that only applies to the inspected page while Web Inspector is open."
> > Awesome.
> > 
> > However, updated to Safari 27 and see the new settings page in the Inspector
> > and it doesn't seem to show a toggle anywhere there for "Disable Caches". Am
> > I missing something?
> 
> Yep, the key part was "in the Network tab". In the navigation bar at the top
> of the Network Tab there is a button to disable the resource cache. Like
> this: <http://i.imgur.com/WdO5n1e.png>
> 
> Let us know if you find any issues!

We'll be iterating on the icon, but for now it uses the Step Over button.

[Chris Chiera]

Ah, I've been use to Chrome where that setting has always been in the settings page for years. Absolutely thrilled the option is now available in Safari as well, though the implementation does seem a bit peculiar. 

Without someone explicitly pointing out that mention in that particular release note, I'm not sure I (or possibly others) would ever guess that it would be there and that that icon (or any icon), would do what the more obvious, "Disable cache (while DevTools is open)" in Chrome settings labelled does. 

While there is always a chance someone could mistakenly hover over that icon and discover what it is from the popup, curious on the choice to have it more hidden versus a check box setting. 

Where Apple is much more selective over adding new settings (complexity) that Google (who sometimes prefers the whole kitchen sink) to keep interfaces as clean as possible, I can somewhat see the motivation, though the minimal settings works great consumers I tend to prefer more options/control as a developer. But as long as you believe existing and new developers would be able to easily find and enable that setting when looking for it, that's great. And sure it will continue to iterate over time.

Appreciate your work!

[Penn]

With latest mojave 10.14.1 and the latest safari 12.0.1 (14606.2.104.1.1), this feature doesn't work at all.

The use case is as follows:
I'm using nextJS for development, I opened the web inspector and turned on the icon in Network tab. I made a change and do a hard refresh (cmd + alt + r) while having the inspector opened, and somehow some JS files are always being served from memory no matter what I do.

The only way to really refresh to see the latest changes is if I go to "Develop" menu, and click on "Empty Caches", otherwise those JS will always be served from memory.

However, this works in Chrome, all requests are actually served from the server/source instead of memory cache.

Here is a screenshot of it in safari, notice the top JS files are all serving from cache even though I tried doing everything told to disable cache and to refresh from source: https://imgur.com/a/MPtmzSs

Is there a way to fix this manually for now? And would this be fixed in webkit?

Cheers

[Joseph Pecoraro]

> Here is a screenshot of it in safari, notice the top JS files are all
> serving from cache even though I tried doing everything told to disable
> cache and to refresh from source: https://imgur.com/a/MPtmzSs
> 
> Is there a way to fix this manually for now? And would this be fixed in
> webkit?

This seems like a bug. If you have steps to reproduce could you file a new bug here (https://webkit.org/new-inspector-bug).

[Dan Zimmerman]

(In reply to Penn from comment #23)
> With latest mojave 10.14.1 and the latest safari 12.0.1 (14606.2.104.1.1),
> this feature doesn't work at all.
> 
> The use case is as follows:
> I'm using nextJS for development, I opened the web inspector and turned on
> the icon in Network tab. I made a change and do a hard refresh (cmd + alt +
> r) while having the inspector opened, and somehow some JS files are always
> being served from memory no matter what I do.
> 
> The only way to really refresh to see the latest changes is if I go to
> "Develop" menu, and click on "Empty Caches", otherwise those JS will always
> be served from memory.
> 
> However, this works in Chrome, all requests are actually served from the
> server/source instead of memory cache.
> 
> Here is a screenshot of it in safari, notice the top JS files are all
> serving from cache even though I tried doing everything told to disable
> cache and to refresh from source: https://imgur.com/a/MPtmzSs
> 
> Is there a way to fix this manually for now? And would this be fixed in
> webkit?
> 
> Cheers

In case anybody else gets here from this comment, I've found that removing any preloads, emptying caches and reloading fixes the issue. The underlying bug seems to be reported here: https://bugs.webkit.org/show_bug.cgi?id=193533