🚀 Side-by-Side Code Preview in VSCode Using Web Preview Extension

[Nikesh]

If you’re a web developer working with HTML/CSS, React, Vue, or TailwindCSS, then the Web Preview extension for VSCode is a game-changer — especially if you’re using a single screen setup.

This extension allows you to preview your development server side by side with your code, with full access to browser DevTools, all within VSCode!



Why Use Web Preview?

Live preview of your local development server
Built-in DevTools for inspection and debugging
Super handy for developers who code and preview on a single screen
Works seamlessly with major web frameworks
Supports screen size overrides for responsive testing (Mobile, Tablet, Laptop)


Installation & Setup

1. Open VSCode
2. Install Web Preview from Extensions Marketplace
3. After installation, go to your Settings.json file
4. Paste the following configuration (replace the `url` with your dev server URL)

"webPreview.url": "http://localhost:5173",
"webPreview.mediaScreenOverride": true,
"webPreview.mediaScreen": {
    "Mobile": "380x796",
    "Tablet": 768,
    "Laptop": 1024
}

Note: Replace `http://localhost:5173` with the actual port your dev server is running on. For example:
- React: `http://localhost:3000`
- Vue: `http://localhost:5173`
- Vite or others: Your configured port


How to Use

Once configured:

• Open your project in VSCode
• Hit `Ctrl + Shift + P` and search for “Web Preview: Show Preview”
• Select your desired screen size from the dropdown (Mobile, Tablet, etc.)
• Boom — You now have a live responsive preview right inside VSCode with DevTools!


Final Thoughts

If you love writing modern front-end code but hate context switching between editor and browser — this setup is for you.
It streamlines the dev process and keeps everything you need right inside VSCode.

Try it once, and you won’t go back!