Simulate Offline Mode for HTML5 Cache Testing
Solution 1
For Firefox
☰ (hamburger menu)->More->Work Offline
Google Chrome doesn't appear to have this feature
Edit: Also, another alternative is slightly more time-consuming to setup in the beginning but might be worth it. For Firefox/Chrome there should be proxy plugins, set up a fake/bad profile for each so that you proxy to something that doesn't exist... like 127.0.0.20:8080. After that you can switch the proxy setting on and off to emulate a full-stack test.
Solution 2
The other answers are out of date. The only place this appears in Firefox v92 is under File > Work Offline
.
The File
menu can be accessed in the top left of Firefox by pressing the ALT
key.
Solution 3
In Chrome you can open developer tools switch to the network tab and set throttling to offline
Solution 4
For Firefox, from the ☰ (hamburger menu), choose Web Developer > Work Offline.
For Chrome, open DevTools and select the Network panel. Throttling is set to Online (Disabled) by default. From the dropdown menu, you can choose presets Fast 3G and Slow 3G, but to simulate Offline Mode, you want to choose Offline.
Kevin Sylvestre
A Ruby on Rails, Swift, and JS developer with a passion for creating beautiful programs for the web and mobile. Twitter Facebook Google
Updated on July 09, 2022Comments
-
Kevin Sylvestre almost 2 years
I have an HTML5 application that requires offline support. I am using a local Apache server for the application, and am trying to figure out what the best way is to simulate offline mode (currently, in Firefox I disable my Air-Port to simulate offline mode, but this is a pain). Any suggestions? I am open to using other browsers if a method exists that doesn't require turning off my Internet.
-
Suresh Kumar Narayanasamy almost 12 yearsDoes Chrome still NOT have this feature?
-
David almost 12 years@ClayNichols Chrome's priorities are somewhat skewed away from stuff like this, atleast that's how I see things considering the number of years the bug report for managed error pages has been going.
-
BigName almost 7 yearsI don't think this works. I have service worker, so my page should work offline. But instead, I get an error say firefox can not browse the web.
-
Nuno about 6 yearsChrome now has an "Offline" option in the Dev Tools, under Network tab. I was searching for similar on Firefox and I couldn't find. The File -> Work Offline is exactly what I needed!!
-
AlbinoDrought almost 5 yearsIt now appears under
☰
->More
->Work Offline
for me -
OliCoder over 4 yearsNow also under menu File -> Work Offline.
-
chotkos over 4 yearsAs @Nuno mentioned, or using Devtools-> device toolbar (second icon on top left, near to "Elements" tab) -> online/offline dropdown
-
Antonio Costa over 2 yearsThanks for the hint: "set up a fake/bad profile for each so that you proxy to something that doesn't exist... like 127.0.0.20:8080. After that you can switch the proxy setting on and off to emulate a full-stack test." The only solution that works effectively in my case.
-
Matias over 2 yearsIt is like this on macOS too
-
Alfredo Tostón over 2 yearsThere is on Linux too.
-
DabeDotCom over 2 yearsNOTE: It appears that connections to 'localhost' (e.g., localhost:8080) aren't disabled when you select "Work Offline" — which makes it hard to test Offline Mode when you're developing a PWA locally (and haven't set it up to run on an HTTPS server yet...)