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.

1. Open the Extensions panel (Ctrl+Shift+X), search for Live Preview by Microsoft, and install it.
2. Open your HTML file.
3. 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.

The game, by the way

Shoot shipped with sound! Play it here: https://shoot.nothans.com/

Here’s how I feel rn.

I really feel like I can engineer anything with this setup, helping me build engineered systems. I have tried new toolboxes, built deep learning projects, and improved my MATLAB coding skills by running AI code reviews.

“Using MATLAB + Claude Code went from ‘vibe coding’ to ‘vibration engineering’ — I was no longer just using AI — I learned from it, got pointed in the right direction, and dug in.

Hans Scharler

Here is what you need:

• MATLAB: https://matlab.mathworks.com
• Visual Studio Code: https://code.visualstudio.com/
• Claude Code: https://www.claude.com/product/claude-code
• MATLAB MCP Core Server for Claude Code: https://github.com/matlab/matlab-mcp-core-server
• MATLAB Extension for Visual Studio Code: https://marketplace.visualstudio.com/items?itemName=MathWorks.language-matlab

To build your own super stack, open a new MATLAB project in Visual Studio Code with the MATLAB and the Claude Code extensions enabled. From a terminal in VS Code, run Claude Code. Claude Code will interact with Visual Studio Code via these extensions. In Claude Code, enable the MATLAB MCP Core Server. This will give you five MCP tools to interact with MATLAB. Claude Code will be able to check code, evaluate code, run files, run test files, and detect your local MATLAB’s toolboxes.

In my vibration project, my team and I created a few files. It has been a minute since I used them, but with Claude Code, I can just get going. It is going to read what I have, learn from he documentation, and do whatever I am looking to do.

Use the vibration model to generate three weeks of vibration data, then use the analyze vibration function to detect any anomilies

What’s great about this workflow is that Claude Code is “not making up” a solution; it is leveraging the models that I have built plus constrained in MATLAB, bringing some engineering rigor to the chat. Claude Code is taking advantage of the Signal Processing Toolbox and how it works, rather than trying to figure out signal processing with some scratch code.

One extra benefit of this engineering stack is that I find myself exploring more, trying out other features of MATLAB that I haven’t used before. I feel way more confident trying something new and then learning how it works. I keep expanding what I know and onboarding into new things, learning, and gaining more experience rather than settling for a static picture. Dynamic.

WHat are your pro tips?

Live Server is a Visual Studio Code extension that allows developers to run a local development server directly from the editor. It provides a quick and easy way to preview HTML, CSS, and JavaScript files in the browser with live-reloading capabilities. When you change your code, the browser automatically updates without needing to refresh manually. This makes it ideal for fast development and debugging. It also works well with single-page applications and supports multiple file types. With just a right-click on an HTML file and selecting “Open with Live Server,” you can immediately launch a server and start developing.

Live Server Extension in Visual Studio Code Step-by-Step

Step 1: Install the Live Server Extension

1. Open Visual Studio Code.
2. Go to the Extensions view by clicking the Extensions icon on the left sidebar (or press Ctrl+Shift+X).
3. In the search bar, type “Live Server.”
4. Click on the Live Server extension (by Ritwick Dey) and then click the Install button.

Step 2: Open Your HTML File

1. After installing the Live Server extension, open the HTML file you want to run.
2. Right-click on the HTML file in the editor or in the file explorer.

Step 3: Start Live Server

1. Choose the option Open with Live Server from the right-click context menu. This will start a local development server and open your HTML file in your default web browser.
2. The server will automatically update whenever you make changes to the HTML, CSS, or JavaScript files, making debugging easier.

Step 4: Debugging HTML with Developer Tools

1. Once the HTML file is running in the browser, open the browser’s developer tools (press F12 or Ctrl+Shift+I in most browsers).
2. Use the Elements, Console, and Network tabs to debug your HTML, CSS, and JavaScript in real-time.

Step 5: Additional Debugging Options for JavaScript

If you need to debug JavaScript in VS Code, you can also attach a debugger. Here’s how:

1. Install the Debugger for Chrome/Edge Extension (Optional):
   • Install the Debugger for Chrome or Debugger for Edge extension from the VS Code extensions marketplace.
   • This allows you to attach a VS Code debugger to the browser session for step-through debugging.
2. Set Up a Launch Configuration:
   • Go to the Run and Debug view (on the left sidebar or press Ctrl+Shift+D).
   • Click on create a launch.json file.
   • Select Chrome (or Edge) as the environment.
   • A launch.json configuration file will be created, which allows you to configure your debugging session.
   • Set up the URL to point to the Live Server URL (e.g., http://127.0.0.1:5500/index.html).

Update August 8, 2026: Now Recommending Live Preview from Microsoft

I have switched to Live Preview. This is maintained by Microsoft and provides the same functionality as the third-party extension. Check out my Live Preview of HTML Pages tutorial.