57

I have an HTML5 application that requires offline support. For running the application, I use a local Apache server. I 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.

Improve this question
0

5 Answers 5

Reset to default
46

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Does Chrome still NOT have this feature?
@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.
I 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.
Chrome 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!!
As @Nuno mentioned, or using Devtools-> device toolbar (second icon on top left, near to "Elements" tab) -> online/offline dropdown
|
43

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.

Be warned that this does not prevent traffic from "localhost" loop-back itself, unless you additionally turn on

network.disable-localhost-when-offline

preference in about:config.

Bugzilla issue: Add option to disallow connections to localhost while in offline mode.

Improve this answer

4 Comments

It is like this on macOS too
There is on Linux too.
NOTE: 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...)
Unfortunately if you only want one tab, it won't work, it will disable the internet for ALL tabs.
17

In Chrome you can open developer tools switch to the network tab and set throttling to offline

Improve this answer

Comments

6

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.

Improve this answer

2 Comments

It now appears under ☰ -> More -> Work Offline for me
Now also under menu File -> Work Offline.
2

Seems that in Firefox 112.0.2 (64-bit) it is only available in File -> Work Offline. ...Show menu bar with "File" in it on Windows with the ALT key. I can confirm it applies to all tabs, not just the one being debugged.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.