Live Preview of HTML Files in Visual Studio Code

This post started as a TIL: I was building a little arcade game called Shoot, opened the index.html and the Web Audio API refused to load a single sound because of CORS. (A shooter with no shooting sounds is mostly just pointing.) The fix was a local development server, and the tool I found was the Live Server extension for Visual Studio Code.

That problem I had hasn’t changed, but the best answer has. Live Server went years without maintenance, and in early 2026 a critical security vulnerability in its dev server was publicly disclosed before it finally got a patch. Meanwhile, Microsoft now ships a first-party extension that does the same job: Live Preview. Same right-click workflow, actively maintained, and it’s what I use now.

Why you need a local server at all

Open an HTML file from disk and the browser loads it with a file:// address. That works right up until your page tries to fetch a file, load a JavaScript module, or play audio. Then the browser blocks it, for security reasons. Your code isn’t broken; it just needs to be served over HTTP like a real website. A local development server does exactly that, on your own machine, at an address like http://127.0.0.1:3000.

The quick answer: Live Preview

Live Preview is Microsoft’s extension for exactly this.

Open the Extensions panel (Ctrl+Shift+X), search for Live Preview by Microsoft, and install it.
Open your HTML file.
Right-click in the editor and choose Show Preview.

You get a live browser panel right inside VS Code, and it refreshes automatically as you type. When you want the full browser experience (developer tools, real window size), use Show Preview in External Browser instead, or just open the http://127.0.0.1:3000 address it prints.

What happened to Live Server

The original version of this post recommended the Live Server extension by Ritwick Dey, and 80 million installs say I wasn’t alone. It still works, and the workflow is nearly identical: right-click the file, Open with Live Server, or hit the Go Live button in the status bar.

But the extension went years without maintenance, and in February 2026 a critical vulnerability (CVE-2025-65717) was publicly disclosed: visit the wrong webpage while Live Server is running, and that page can quietly pull files off your machine through the extension’s local server. Source code, config files, .env secrets, whatever the server can reach. Security researchers had been trying to reach the maintainer since mid-2025; the patch (version 5.7.10) landed only after the story went public. If you have Live Server installed, make sure it’s updated to 5.7.10 or later. Better yet, switch.

No extension at all

If you’d rather not install anything, you already have a server or two on your machine:

# Node
npx serve

# Python
python -m http.server 8000

Run either one in your project folder and open the address it prints. You lose the auto-refresh, but for a quick test it’s hard to beat.

Debugging

Once the page is served, the browser’s developer tools (F12 or Ctrl+Shift+I) work exactly as you’d expect: console, breakpoints, network tab, the works.

The original post suggested installing the “Debugger for Chrome” extension to debug from inside VS Code. You don’t need it anymore; JavaScript debugging is built into VS Code now. Create a launch.json with a chrome or msedge configuration pointed at your local server URL, hit F5, and set breakpoints right in the editor.