How to Test Local Files (file:/// URLs) in Responsive Viewer

Step-by-step guide to enabling Chrome file URL permissions so you can test local HTML, CSS, and JS files directly in the simulator.

By default, Google Chrome blocks all browser extensions from accessing local computer files (`file:///` protocol) for security reasons. To preview raw local HTML files in Responsive Viewer, simply turn on Chrome’s built-in "Allow access to file URLs" toggle. It takes under 30 seconds and only needs to be done once.

Visual Reference: What the Chrome Setting Looks Like

Target State

Allow access to file URLs

Enables Responsive Viewer to read and simulate local HTML, CSS, and JS files from disk

ON (Enabled)

Step-by-Step Instructions

Open Chrome Extensions Settings

Open a new tab in Google Chrome, copy the URL below, paste it into your browser address bar, and press Enter (or click the puzzle piece icon at the top right of Chrome and choose "Manage Extensions").

chrome://extensions

Find "Responsive Viewer"

Scroll to the "Responsive Viewer — Mobile & Tablet Simulator" extension card and click the "Details" button.

Turn ON "Allow access to file URLs"

Scroll down to the permissions section, locate the toggle labeled "Allow access to file URLs", and switch it to ON (it turns blue).

Open & Test Any Local HTML File

Drag and drop your local HTML file into Google Chrome (or double-click it so its URL starts with file:///). Then click the Responsive Viewer extension icon in your toolbar. All 77+ mobile and tablet viewports will now simulate your local project instantly!

file:///C:/Users/your-name/projects/index.html

Important Tips & Best Practices

Local dev servers (localhost): If you use Vite, Next.js, React, Live Server, or any localhost URL (e.g. http://localhost:3000), you do NOT need this setting! Localhost works automatically out of the box.
Refresh active tabs: If you already had a file:/// file open in a tab before toggling this switch, refresh the page once (F5 or Ctrl+R) to apply permissions.
One-time setup: You only need to enable this toggle once per Chrome installation.

Frequently Asked Questions

Why does Google Chrome require this setting?

Chrome enforces this security restriction to prevent malicious extensions from reading confidential documents on your hard drive without your explicit authorization.

Do I need to enable this for localhost or 127.0.0.1?

No. Local dev servers running on localhost:3000, 127.0.0.1, or custom ports work immediately without any extra configuration.

Is my local code sent to any external server?

Never. Responsive Viewer operates entirely locally inside your browser. No files, code, or telemetry are ever uploaded or transmitted.

Need the extension to get started?

Download Responsive Viewer free from Google Chrome Web Store.

Get Chrome Extension Report an Issue All Guides