How to Run a Website in Visual Studio Code

Short answer: Open the website folder in Visual Studio Code, identify its entry point, then preview it either as a local file or through the project’s development server. Use a local HTTP server for pages that use fetch, ES modules, client-side routing, cookies, or other browser features that do not work reliably from file://. Open the resulting localhost URL in VS Code’s integrated browser or a supported external browser. Add .vscode/launch.json when you want repeatable F5 debugging.

1. Open the website folder

Start the desktop version of Visual Studio Code.
Select File > Open Folder.
Choose the folder that contains your HTML, CSS, JavaScript, images, and package files.
Open the integrated terminal with View > Terminal.

Opening the folder, rather than an individual HTML file, keeps relative paths, workspace settings, package scripts, and .vscode configurations consistent.

2. Find the entry point

For a simple site, the entry point is usually index.html. Check that its stylesheet and script references match the actual files:

<link rel="stylesheet" href="css/site.css">
<script type="module" src="js/main.js"></script>

On a framework project, inspect package.json and the README for the documented development command. React, Vue, Angular, Vite, Next.js, and other tools do not all use the same command.

3. Choose the right way to run it

Method	Use it when	HTTP behavior	Reload/debugging
Open an HTML file	A small, dependency-free static page	`file://`; limited	Manual reload; browser DevTools
Live Preview extension	You want a convenient static preview inside VS Code	Local preview server	Convenient refresh; use its Debug Preview command
Simple static server	The page uses modules, fetch, or normal HTTP paths	Full localhost behavior	Manual or configured browser debugging
Framework dev server	The project has a build tool or backend	Project-specific routes, proxy, and HMR	Usually automatic reload and source maps

Option A: open a static file

For a basic page, right-click index.html in the Explorer and open it in a browser, or use VS Code’s integrated browser to open the local file. This is the quickest check for markup and CSS.

Use a server instead if the page imports ES modules, calls an API with fetch, relies on client-side routing, or expects cookies and other HTTP behavior.

Option B: use Live Preview

Install Microsoft’s Live Preview extension, open the page, and run Live Preview: Show Preview or Live Preview: Show Debug Preview from the Command Palette. It is useful for front-end preview, but a framework’s own server remains the source of truth when the project has build steps, API routes, or a proxy.

Option C: start a simple static server

If Node.js and npm are installed, run this from the website folder:

npx http-server

The command prints a localhost address, commonly something like http://localhost:8080. Open the exact address it reports in VS Code’s integrated browser or your normal browser.

Another dependency-free option is Python:

python -m http.server 8000

Then open http://localhost:8000.

Option D: run a framework project

First inspect the available scripts:

npm run

Then run the script documented by the project, commonly:

npm install
npm run dev

Read the terminal output and open the reported URL. Do not assume port 3000 or any other fixed port; tools may select another port when the default is occupied.

4. Open localhost in VS Code

VS Code’s integrated browser can open local HTML files and localhost links. You can also use Debug: Open Link from the Command Palette, paste the URL, and inspect it in the supported browser tooling. Microsoft documents built-in debugging for Edge and Chrome in Browser debugging.

When the browser panel is open, use its developer tools to inspect the Console, Network requests, DOM, and loaded styles. This is especially useful when the page renders but a script or asset fails.

5. Configure F5 browser debugging

Create .vscode/launch.json in the project folder:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch local site",
      "url": "http://localhost:8000"
    }
  ]
}

Start the server first, then press F5 or select Run and Debug. Replace msedge with chrome for Chrome. For VS Code’s integrated browser, use the editor-browser debugger type when it is available in your installation. The URL must match the server’s actual port.

Launch a framework server with a pre-launch task

You can make the workflow repeatable by defining a task in .vscode/tasks.json and referencing it from launch.json. Keep the command aligned with the project’s package script:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "dev server",
      "type": "shell",
      "command": "npm run dev",
      "isBackground": true,
      "problemMatcher": []
    }
  ]
}

For a production project, prefer its documented VS Code configuration or framework tooling when available. A generic background task cannot always detect when a server is ready.

6. Debug JavaScript and network problems

Set a breakpoint by clicking beside a JavaScript line number.
Start the configured browser session with F5.
Use the Console to read syntax errors and uncaught exceptions.
Use Network to inspect request URLs, status codes, response headers, and blocked requests.
Confirm that source maps point to the files you are editing when a bundler is involved.

For a module page, ensure the script is declared with type="module" and is served over HTTP:

<script type="module" src="/js/main.js"></script>

7. Static files versus framework projects

A static page can be opened directly, but an HTTP server gives behavior closer to production. Use the project’s own development server when it has any of the following:

Bundling, TypeScript, JSX, Sass, or another compile step
Hot module replacement or live reload
API routes, rewrites, or a development proxy
Authentication, cookies, service workers, or client-side routing
Environment variables or generated assets

The browser renders the website; VS Code edits files and coordinates the terminal and debugger. Running a command in VS Code does not replace the project’s runtime.

8. vscode.dev limitations

VS Code for the Web is useful for editing, but its browser environment does not provide the terminal and debugger needed for many run and debug workflows. Microsoft recommends the desktop application, GitHub Codespaces, or Remote Tunnels when you need runtime, build, or debugging access. See the VS Code for the Web documentation.

9. Troubleshooting

Symptom	Likely cause	Fix
Blank page	Wrong entry file, JavaScript exception, or broken asset path	Open the Console, verify the entry file, and check Network requests.
CSS or JavaScript is missing	Wrong relative path or filename case	Resolve the path from the HTML file’s directory and match capitalization exactly.
CORS or module error	Page opened with `file://`	Start a localhost server and open the HTTP URL.
Port already in use	Another process owns the port	Stop the old server or select another port, then update `launch.json`.
F5 opens the wrong page	The launch URL does not match the running server	Copy the exact URL printed by the terminal into `launch.json`.
F5 does nothing	Unsupported debugger type or missing browser debugger	Use a supported Edge or Chrome configuration and select it in Run and Debug.
Framework command fails	Dependencies are not installed or the wrong script was used	Run `npm install`, inspect `npm run`, and follow the README.
Routes work on the home page but fail after refresh	The static server is not configured for SPA fallback	Use the framework dev server or configure the server to return the app entry for client routes.
vscode.dev cannot run the project	Web editor has no terminal or debugger	Move to desktop VS Code, Codespaces, or Remote Tunnels.

10. A practical checklist

Open the complete project folder.
Identify index.html or the framework entry command.
Use a server for modules, fetch, routing, cookies, or APIs.
Open the exact localhost URL reported by the terminal.
Inspect Console and Network before changing code.
Match the F5 URL and debugger type to your browser.
Use desktop VS Code, Codespaces, or Remote Tunnels when browser-only VS Code lacks runtime access.

Or skip the browser setup

If your goal is to obtain a clean image of a public page rather than develop it locally, ScreenshotNeo provides a website screenshot API and MCP server. It accepts one GET request and returns PNG, JPEG, WebP, or PDF. Cookie and consent banners, newsletter popups, and chat widgets are removed before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed.

See the ScreenshotNeo API documentation for all options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', data);

ScreenshotNeo also offers an MCP server with take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. Every plan includes the features, and the free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

FAQ

Can I run HTML without installing an extension?

Yes. Open the HTML file directly for a simple page, or run python -m http.server 8000 for reliable localhost behavior.

Which command runs every JavaScript website?

There is no universal command. Use the script documented in the project’s package.json and README.

Why does my page work in a normal browser but not in VS Code?

Compare the URL, browser, and server. The page may depend on a different port, browser feature, environment variable, or HTTP route.

Should I use Live Preview for React or Next.js?

Use the framework’s development server for projects with compilation, routing, API routes, or hot reload. Live Preview is primarily a front-end preview convenience.