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.
Key Takeaways
- Live Preview offers embedded browser viewing and debugging integration within VS Code
- Live Server provides lightweight external browser preview with network accessibility
- Proper workspace setup prevents common path and server root issues
- Both extensions support automatic refresh on file changes
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.
Discover how at OpenReplay.com.
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
Yes, you can install and use both extensions at the same time. They operate independently and can serve different projects on different ports. Just be mindful of port conflicts and configure custom ports if needed.
Check if your browser is caching the CSS file. Try hard refreshing with Ctrl+Shift+R or clearing the cache. For embedded preview, ensure auto-save is enabled or manually save your files. Some users find switching refresh modes in settings helps.
Neither extension handles server-side languages like PHP or Python. For these, you need a proper local server environment like XAMPP, WAMP, or Docker. These extensions only serve static files and client-side JavaScript.
Yes, Live Server allows you to specify your default browser in settings. Add this to your settings.json file with your preferred browser name like chrome, firefox, or edge. The exact browser names vary by operating system.
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.
