safari disable cache for development

Disable Caching During Development with Browser Tools

Oct 9, 2016 • Nicholas Bering

Lately I’ve been hosting a weekly event with Software Niagara , rather verbosely named “Do You Something for Great Good”. While giving a bit of an overview of HTML, it’s origins, and how it relates to CSS and JavaScript, I got a little derailed answering questions about things I was doing with Chrome’s DevTools. To that end, I think I’ll do a little series on things you can do with the Developer Tools in Chrome.

Caching: The Good, The Bad, and The Annoying

Caching is a necessary evil. It improves web performance in ways we probably don’t even realize on a day-to-day basis. It reduces web traffic in the simplest and most fundamental way possible; it avoids transferring anything at all.

For anyone not familiar with browser caching, here’s how it works in a nut shell. The browser makes a request to the server and gets some data. Maybe that data is HTML, a stylesheet, some javascript, or an image. The server may tag the response with a cache-control header, which is essentially some meta-data about how long that information is valid for. Then, when a web page uses the content at the same URL again, the browser checks for a local copy, looks at it’s expiry date, and if it has not expired just uses that local copy and does not ask the server for the data again.

With particularly large images, JavaScript files, and the growing number of very large style sheets, this can save the a lot of bandwidth for the user. This is especially important for mobile devices fetching data with expensive cellular data plans.

So what’s the problem with all this? During development the content that wouldn’t normally change from request to request like JavaScript and CSS files are changing rapidly. This makes the browser’s default caching settings get in the way. Typically you’ll see this appear as a moment where you think, “What the heck? I thought I changed that!” Then when you refresh the browser window a second time it behaves as expected. Changing caching settings from the server is complex though, and you want to keep caching turned on in production to gain it’s benefits. So how can we avoid reconfiguring our web servers just for development? By disabling caching in the browser. Here’s how…

Chrome’s Network Panel

While in chrome, open the developer tools. Find it under Menu > More Tools > Developer Tools . For shortcuts use Cmd + Opt + I on a Mac or F12 on Windows.

Once the developer tools are open, there is a set of tabs along the top. Select network.

Along the top of the network panel, there’s a checkbox that says “Disable Caching.” This disables browser-level caching, but only as long as the DevTools are open. So it won’t affect your normal browsing, but while working with the developer tools you won’t have to worry about stale content.

Safari’s Develop Menu

If you haven’t already enable the Develop menu on Safari, with Safari open use the menu to go to Safari > Preferences… . One the preferences window select the Advanced tab. At the bottom there is a checkbox to enable the Develop menu.

To disable caching in Safari toggle the menu item under Develop > Disable Caches .

Firefox’s Toolbox Options

Open developer tools with Cmd + Alt + I on Mac or Ctrl + Alt + Shift + I on Windows.

Select the little gear icon near the top right of the developer tools window to open the options for the developer tools.

Under Advanced Settings select Disable Cache (while toolbox is open) . Similar to Chrome, Firefox only disables caching while the developer tools are open, so this won’t change anything for your normal browsing experience.

Caching Issues Solved

Hopefully this solves your inappropriate browser caching issues during development. Setting up proper caching for production is another issue entirely… but the mechanisms for dealing with that depend on your Web Server, and also how you need it to behave for your particular application.

• Skip to primary navigation
• Skip to main content
• Skip to primary sidebar

The Pros and Cons of Disabling Mac Cache

Joseph Osbourne | 31 Aug 2023 | Featured

Have you ever encountered browser issues on your device but don’t know where the real problem lies? Even if you haven’t changed network settings, your Safari or any other browser may suddenly stop working as expected on your Mac.

Most browser-related problems on Mac are a result of cache accumulation. By default, the browser you’re using on Mac creates a cached version of the content you view on the web.

While it does make your life easier most of the time, it can become pretty troublesome when cache piles up.

So, what’s the solution? If you’re tired of bad browsing experiences, we’ll show you how to turn off the cache in Google Chrome, Safari, and Firefox on your Mac. But first, let’s explore all you need to know about browser cache.

What is browser cache?

Cache in computing refers to a temporary high-speed storage layer that stores a subset of data to ensure you efficiently reuse it. Its main purpose is to increase data retrieval speeds and performance by reducing the need to access the underlying slower storage layer.

For Mac users, part of your ‘Other’ storage consists of files in your system, browser, and application cache. And in most cases, this cache—both the system and application cache—makes your Mac run faster.

This cache memory is a buffer between your Mac’s CPU and the primary memory. But if it grows too large, performance will suffer, and you may occasionally experience errors and application crashes.

Advantages of cache memory on your Mac

Stored cache files generally enhance your Mac’s performance. Usually, deleting such cached files and data while an open application is in use may likely slow things down. Some of the key advantages of cache memory include:

• Cache data is crucial for your browsing experience as it’s much faster than primary and secondary memory
• Cache stores the data and instructions for a limited time. This data and instructions are frequently used on your Mac’s CPU, likely increasing performance .

Disadvantages of cache memory

Cache is good for your device performance , but your Mac browser, system, and app caches should be kept from accumulating over time. Your Mac gets clogged with junk files that take up valuable storage space and slow you down .

Want to experience better performance on your device ? Learn how to delete cache on Mac and its pros and cons.

Disabling Mac cache

There are many reasons you may want to disable cache on your Mac. The most probable one is because you’re running out of space and assume disabling or clearing the cache can recover a few gigabytes.

While this won’t guarantee enormous storage space, it’ll save you time from refreshing to see the latest changes on a web page. Let’s look at how to disable cache in your Mac’s Safari, Chrome, and Firefox browsers.

How to disable cache in the Safari browser

Safari used to have a ‘Disable Caches’ option on the Developer menu, but it’s no longer available. It was useful when developing not to cache the response from web servers. The disable cache option is now available in the Web Inspector tool.

So, next time you don’t have a third-party tool, turn to the browser’s web inspection tool to keep the cache disabled. Here are the simple steps you should follow:

•   Launch Safari and go to the Develop Menu
•   Select the Connect Web Inspector option
•   Go to the Network tab and disable the Use the resource cache when loading the resources button.
•   This button is in the right corner and looks like a block. It will turn blue upon disabling.
•   Once done, ensure the Web Inspector remains open to stop Safari from using the cache.

How to disable cache in Chrome

Permanently disabling the Mac’s Chrome browser cache is similar to how you do it in Safari. If you don’t want your cache to fill up again after you’ve cleared it out, follow the same process as shared below to turn it off.

•   Launch Chrome on Mac and click on the three dots next to the URL bar
•   Select More Tools
•   Click on Developer tools
•   Once on the Developer Tools window , click on Network
•   Go ahead and disable the cache by checking the Disable cache box.

A notice will appear in the window reminding you that you must keep the Developer Tools window open to keep the cache disabled. Remember that disabling the Chrome cache will affect every web page you browse.

Another option is to use a dedicated classic cache killer Chrome extension to disable cache on Mac. When you enable this extension, all the accumulated cache will be automatically deleted before loading a new page.

Just click the extension button in the Chrome web store to enable the Classic cache killer. You can easily enable/disable it with a single click. However, keep it disabled when unnecessary because removing the cache before loading every page can slow browsing.

How to disable cache in Firefox

Unlike Safari and Chrome, disabling cache in Firefox on Mac doesn’t require you to keep the Developer Tools window open. There are two ways to do it: 

• Turn off the cache using the preferences option
• Take advantage of the Firefox addon.

Turn off the cache using preferences

With the preferences route, there are two entries one should focus on disabling first. This helps stop local storage of cache.

• You’ll begin by entering about config in the Firefox address bar
• Wait until you get a warning message, which you’ll accept, and move on to the next step
• In the search bar, copy/paste browser.cache.disk.enable, and browser.cache.memory.enable
• Wait and turn the value to False .

Restart Firefox after this process to stop it from using cache. Each of the preferences copied in the search bar has its specific function. The first one prevents Firefox from storing cache on the hard disk.

The second preference stops the browser from storing cache on the device memory, effectively disabling the cache on your Mac.

Why disable cache on Mac?

The cache can significantly speed up your browsing, but there are valid reasons to disable it on your device completely:

• Development and testing: As a web developer, you need to see the most recent changes you’ve made to a website. Disabling the cache ensures you see the latest version and avoid associated caching problems .
• Troubleshooting: Sometimes, cached content can cause issues with website functionality. By turning off the cache, you can rule out this possibility.
• Security Concerns: Outdated cached content might contain vulnerabilities that have been fixed in newer versions. Disabling the cache helps ensure a safer browsing experience.

The pros and cons

Now that you know how to turn off cache on your Mac across different browsers, what are the key advantages and disadvantages of doing so? First, weighing each benefit against potential drawbacks is always advisable before deciding.

• Real-time content reflection

One of the primary benefits of disabling cache is that you’ll always see the most current version of a website. This helps web developers and designers who need to verify changes they’ve implemented without the interference of cached elements.

•   Accurate troubleshooting

Disabling the cache can assist in diagnosing website issues. When troubleshooting, you won’t need to second-guess whether the problem stems from cached data causing conflicts. This streamlines the debugging process and ensures accurate problem identification.

• Enhanced security

Cached content, especially on outdated websites, might pose security risks due to unpatched vulnerabilities. Disabling the cache reduces the chances of encountering such threats, providing a safer browsing environment.

• Slower page loading

The most apparent downside of disabling cache is the potential for slower page loading times. Cached elements contribute significantly to the swiftness of a site’s appearance—without them, you may experience slightly longer load times.

•   Reduced user experience

Caching enhances the user experience by delivering faster load times for frequently visited sites. Turning off the cache might compromise this swift experience and potentially deter users from returning to your favorite sites.

• Limited offline access

Cached content enables limited offline access to websites you’ve previously visited. Disabling the cache might make it more challenging to revisit sites when you’re not connected to the internet.

Finding the right balance

The decision to disable the cache on your Mac depends on your needs and priorities. If you’re a developer or tester aiming for accuracy, turning off the cache during your work sessions can be invaluable.

On the other hand, if you’re a casual internet user concerned about security, you might disable cache selectively for specific browsing sessions.

Final thoughts

Disabling your Mac’s cache has pros and cons; the choice ultimately depends on your specific requirements. To be safe, find the perfect balance between cache and freshness and tailor your browsing experience to your needs.

Reader Interactions

Join the discussion: cancel reply.

We never share our visitor/user details. For more info, Please read our privacy policy before submitting your comment.

Save my name, email, and website in this browser for the next time I comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed .

• Android Apps

clearing Safari/iOS cache?

Is there a way to clear iOS Safari's cache? Or disabling it?

When debugging a website on iOS, running into a situation where content is being cached despite repeated reloads. Going to Settings on the device to clear the cache is, apart from being tedious, is a nuclear option as it also clears everything else including cookies. I still use my iPhone for regular surfing…

Unless you can dedicate a debug-only device, this may be your best option:

https://support.apple.com/en-us/HT203036

private browsing doesn't always work to keep the cache cleared. These products are awful for developers. You would think we would be able to disable the cache, but no those apple dimwits won't let us. Yes, you read that right. I'm frustrated as **** that I have to spend so much time figuring out how to develop on these **** devices because apple dimwits don't know how to make things simple or provide concise answers.

"You would think we would be able to disable the cache, but no those apple dimwits won't let us."

They actually do. It's just the option is now hidden as a tiny inscrutable hieroglyph in the Network inspector tab. It looks like something telling you to not use spin cycle when you wash your webpage. It's a little cylinder with a line through it. "NO CYLINDERS!" How is that not just absolutely totally obvious?

Yeah. They're still dimwits. But you can disable the cache. If you can figure out how.

Connect your iOS Device withUSB cable to your Mac. Open Safari > Developermode. Choose Network > Clear Cache > click bin icon .

How to Fix a Script Error

Check for an update, turn off extensions, or try a different browser

Script errors can be difficult to pin down because these errors aren't descriptive. Script errors are intentionally designed this way for security reasons, but you don't need to know why a script error happened to fix the problem.

In some cases, the best response to a script error is to ignore it. If you select OK or Cancel in the error message, and the website continues to load without any detectable problems, then the script error is more of a minor nuisance than something you have to worry about.

When a script error interferes with the functionality of a website, or these errors become too much of a nuisance, there are several steps you can take to fix the problem.

Load the web page again. A script error, especially an error that indicates a script is taking too long to run, can be fixed by reloading the web page. If the error doesn't reoccur, then you don't have to worry about it. If it continues to come back, there may be a problem with the web browser.

• To force a web page to reload in Windows, press Ctrl+F5 .
• To force a web page to reload in macOS, press Command+Shift+R .

Update the web browser. Outdated web browsers sometimes interact with scripts in unexpected ways that end up creating errors. Updating Google Chrome or Firefox is straightforward.

Microsoft Edge updates automatically alongside Windows. If you have trouble with Windows Update, there are other ways to update Windows .

Load other web pages. If you see script errors on one website, there's probably a problem with the scripts on that website, and there's nothing you can do about it. If you see script errors on several websites, there's probably a problem with the web browser.

Switch to a different web browser . This is an easy and important step that can help narrow down the source of the problem. If the web page loads fine in a different browser, then there's a problem with the first browser.

In some cases, using a different browser that doesn't create script errors is the best and easiest option.

Load the web page with a different device. If you see a script error when you visit a web page on your computer, but you don't see it when you visit that page with your phone, a friend's computer, or another device, then the problem is on your end.

If you see the same error on several devices, there is probably a problem with the website. In that case, all you can do is wait for the web designer to fix the problem.

Remove temporary internet files . If there are corrupted internet cache files on the computer, you may see script errors. In most cases, clearing the web browser cache fixes this problem.

Disable plug-ins . When something goes wrong, an unforeseen interaction between a plug-in and a website may have prevented a script from running properly.

If the script error goes away after disabling plug-ins, re-enable those plug-ins one at a time to determine which plug-in caused the problem. Either continue using the plug-in and live with the script error or stop using that plug-in until the developer fixes the problem.

Disable hardware acceleration. Hardware acceleration allows a web browser to tap into the power of a video card. In some cases, this feature breaks certain scripts. Turning it off allows those scripts to run normally. You can turn off hardware acceleration in Chrome and disable hardware acceleration in Firefox .

Reset the browser security settings, or reset the browser. In some cases, high security settings in a web browser can interfere with scripts. If you don't have a specific reason to have the security settings so high, reset the security level.

If that doesn't work, reset the browser settings all at once. You can quickly reset Chrome to its default state, refresh Firefox , reset Microsoft Edge, and reset Safari .

Wait for the web designer. If you still encounter script errors after attempting these fixes, there's likely a problem with a script on the website.

Cause of Script Error Messages

When a script error occurs, you'll usually see a message like this:

• An error has occurred in the script on this page.
• Warning: Unresponsive script. A script on this page may be busy or may have stopped responding.
• A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.

Script error messages are nebulous, and many things can cause these errors. Script errors indicate that a script on the website you're visiting has malfunctioned in some way. It may have failed to run, failed while running, frozen, or something else may have happened.

• In most cases, you don't need to know why a script error happened to fix it. You either have a problem with the web browser, which you can fix, or the script is broken, which you can't fix.

Read the original article on Lifewire .

Using App Router

Features available in /app

Incremental Static Regeneration (ISR)

• Next.js Commerce
• On-Demand ISR
• Next.js Forms

Incremental Static Regeneration (ISR) enables you to:

• Update static content without rebuilding the entire site
• Reduce server load by serving prerendered, static pages for most requests
• Ensure proper cache-control headers are automatically added to pages
• Handle large amounts of content pages without long next build times

Here's a minimal example:

Here's how this example works:

• During next build , all known blog posts are generated (there are 25 in this example)
• All requests made to these pages (e.g. /blog/1 ) are cached and instantaneous
• After 60 seconds has passed, the next request will still show the cached (stale) page
• The cache is invalidated and a new version of the page begins generating in the background
• Once generated successfully, Next.js will display and cache the updated page
• If /blog/26 is requested, Next.js will generated and cached this page on-demand

Route segment config

• dynamicParams
• revalidatePath
• revalidateTag

Time-based revalidation

This fetches and displays a list of blog posts on /blog . After an hour, the cache for this page is invalidated on the next visit to the page. Then, in the background, a new version of the page is generated with the latest blog posts.

We recommend setting a high revalidation time. For instance, 1 hour instead of 1 second. If you need more precision, consider using on-demand revalidation. If you need real-time data, consider switching to dynamic rendering .

On-demand revalidation with revalidatePath

For a more precise method of revalidation, invalidate pages on-demand with the revalidatePath function.

For example, this Server Action would get called after adding a new post. Regardless of how you retrieve your data in your Server Component, either using fetch or connecting to a database, this will clear the cache for the entire route and allow the Server Component to fetch fresh data.

View a demo and explore the source code .

On-demand revalidation with revalidateTag

For most use cases, prefer revalidating entire paths. If you need more granular control, you can use the revalidateTag function. For example, you can tag individual fetch calls:

If you are using an ORM or connecting to a database, you can use unstable_cache :

You can then use revalidateTag in a Server Actions or Route Handler :

Handling uncaught exceptions

If an error is thrown while attempting to revalidate data, the last successfully generated data will continue to be served from the cache. On the next subsequent request, Next.js will retry revalidating the data. Learn more about error handling .

Customizing the cache location

Caching and revalidating pages (with Incremental Static Regeneration) use the same shared cache. When deploying to Vercel , the ISR cache is automatically persisted to durable storage.

When self-hosting, the ISR cache is stored to the filesystem (on disk) on your Next.js server. This works automatically when self-hosting using both the Pages and App Router.

You can configure the Next.js cache location if you want to persist cached pages and data to durable storage, or share the cache across multiple containers or instances of your Next.js application. Learn more .

Troubleshooting

Debugging cached data in local development.

If you are using the fetch API, you can add additional logging to understand which requests are cached or uncached. Learn more about the logging option .

Verifying correct production behavior

To verify your pages are cached and revalidated correctly in production, you can test locally by running next build and then next start to run the production Next.js server.

This will allow you to test ISR behavior as it would work in a production environment. For further debugging, add the following environment variable to your .env file:

This will make the Next.js server console log ISR cache hits and misses. You can inspect the output to see which pages are generated during next build , as well as how pages are updated as paths are accessed on-demand.

• ISR is only supported when using the Node.js runtime (default).
• ISR is not supported when creating a Static Export .
• If you have multiple fetch requests in a statically rendered route, and each has a different revalidate frequency, the lowest time will be used for all requests.
• Middleware won't be executed for on-demand ISR requests, meaning any path rewrites or logic in Middleware will not be applied. Ensure you are revalidating the exact path. For example, /post/1 instead of a rewritten /post-1 .

Version history

Was this helpful?