Live Browser Preview in VS Code: A Quick Guide

Nothing kills development flow like constantly switching between your editor and browser to check changes. If you’re tired of the alt-tab dance every time you tweak your CSS or update your HTML, VS Code’s live preview extensions can transform your workflow. This guide covers the two best options—Microsoft’s Live Preview and the classic Live Server—and helps you choose the right one for your projects.

Choosing the Right Live Preview Extension for VS Code

Both extensions solve the same core problem but excel in different scenarios. Understanding their strengths helps you pick the tool that matches your workflow.

Microsoft Live Preview: The Modern Choice

Live Preview shines when you need more than basic file serving. Its embedded browser keeps everything inside VS Code, perfect for tutorials, workshops, or when screen real estate matters. The extension offers two refresh modes: instant updates as you type or traditional save-to-refresh behavior.

Use Live Preview when you need:

• Embedded preview alongside your code
• Server request logging for debugging
• Integration with VS Code’s built-in JavaScript debugger
• Edge DevTools for element inspection

The extension works best with static sites and simple SPAs. For complex frameworks with their own dev servers (React, Vue, Angular), stick with the framework’s tooling.

Live Server: The Lightweight Alternative

Live Server remains the go-to for developers who want simplicity. One click launches your project in an external browser with automatic refresh on save. Its killer feature? Network accessibility—test your responsive design on actual phones and tablets using your computer’s local IP address.

Choose Live Server for:

• Quick static site development
• Cross-device responsive testing
• Minimal configuration requirements
• Traditional external browser workflow

Quick Setup: From Install to Live Preview

Installing Your Chosen Extension

Open VS Code’s extension panel (Ctrl+Shift+X or Cmd+Shift+X on Mac). Search for either “Live Preview” (by Microsoft) or “Live Server” (by Ritwick Dey). Verify the publisher name—several deprecated extensions still appear in search results. Click install and you’re ready.

Starting Your First Live Preview

Critical first step: Open your project folder as a workspace (File > Open Folder). Single-file previews work but cause path issues with linked resources.

For Live Preview: Right-click any HTML file and select “Show Preview” for embedded view or “Show Preview in External Browser” for traditional workflow.

For Live Server: Right-click your HTML file and choose “Open with Live Server” or click “Go Live” in the status bar.

Both extensions watch your files and refresh automatically. Save your changes and watch the preview update—no manual refresh needed.

Common Issues and Quick Fixes

Workspace vs Single File Gotchas

Seeing “file is not a child of the server root” warnings? You’ve hit the most common issue. Both extensions serve files from your workspace root. Opening individual files without a workspace breaks relative paths. Always open your project folder, not just the HTML file.

Need to serve from a subfolder? Adjust the server root in settings:

{
  "livePreview.serverRoot": "/src"
}

For Live Server, use:

{
  "liveServer.settings.root": "/src"
}

The Universal “Reload Window” Fix

Context menu options missing? Extension not responding? Before troubleshooting further, try VS Code’s universal fix: Ctrl+Shift+P (or Cmd+Shift+P on Mac), then “Developer: Reload Window”. This resolves most extension glitches without losing your work.

Advanced Tips for Power Users

Port Configuration and Multi-Root Workspaces

Default ports already taken? Configure custom ports in settings:

{
  "liveServer.settings.port": 5501,
  "livePreview.portNumber": 3001
}

Working with multi-root workspaces? Each root gets its own server instance. Hover over the status bar indicator to see all active ports.

Special Environments: Codespaces and Remote Development

Using GitHub Codespaces? The embedded preview needs manual port forwarding. Open the Ports panel, click the forwarded URLs to trigger authentication, then restart the preview. External browser preview typically works without extra steps.

Notice style differences between embedded and external previews? Clear your external browser’s cache—the embedded preview always starts fresh while external browsers may serve cached assets.

Conclusion

Choose Live Preview when you need debugging tools, embedded preview, or server logging. Pick Live Server for straightforward static hosting with device testing. Both extensions receive regular updates and work reliably with modern VS Code.

Start by matching the extension to your project type. Static HTML/CSS/JS? Either works. Need debugging? Live Preview. Testing across devices? Live Server. The best live preview VS Code setup is the one that stays out of your way and lets you focus on building.

FAQs

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.