How to Fix "No Internet" Issue in Live Server When DevTools is Open

Problem Statement

Why does Live Server show a "No Internet" page when I open DevTools and make changes to my HTML file?

When working with Live Server in VS Code, your webpage should refresh automatically when you make some changes to your HTML or JS File . However, some developers encounter an issue where the page refreshes when they make changes to their HTML or JavaScript file. However, when Chrome DevTools is open and changes are made to the HTML or JavaScript file, the page refreshes but unexpectedly displays a ' No Internet ' screen instead of updating correctly.

Simply follow the process outlined below :

Understanding the Cause

The issue arises when two settings in Chrome DevTools—Offline Mode and Disable Cache—are enabled at the same time.

1. Offline Mode (Service Workers)

   • This feature in DevTools is used to simulate an offline environment.

   • If enabled, the browser will behave as if there is no internet connection, even if you're actually online.

   • When Live Server attempts to reload the page, it fails due to the forced offline state, leading to the "No Internet" error.

2. Disable Cache (Network Tab)

   • When "Disable Cache" is enabled, the browser does not use cached files and forces a full reload of all assets.

   • If this setting is active while Offline Mode is enabled, the browser will attempt to fetch a fresh copy of the page but will be blocked by the offline restriction.

   • This results in a failed reload, causing the "No Internet" page to appear.

To resolve this, you need to disable these settings in DevTools.

Step-by-Step Solution

1️⃣ —→ Disable "Offline Mode" in DevTools

To ensure your browser recognizes your actual internet connection, follow these steps:

1. Open DevTools using F12 or Ctrl + Shift + I.

2. Navigate to the Application tab.

3. In the left sidebar, scroll down and click on Service Workers.

4. Locate the "Offline" checkbox and uncheck it if enabled.

5. See the image below for more clearer picture

6. 

2️⃣ ——> Uncheck "Disable Cache" in the Network Tab

Disabling this setting ensures the browser can use cached resources if needed, preventing unnecessary reload failures.

1. Open DevTools (F12 or Ctrl + Shift + I).

2. Click on the Network tab.

3. Locate the "Disable Cache" checkbox and uncheck it.

4. 

Conclusion :

By turning off Offline Mode and unchecking Disable Cache, Live Server works smoothly, and your changes show up instantly—no more "No Internet" errors!