The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →To run a website in Visual Studio Code, open its folder, identify the entry file or package script, and choose the right runtime: open a simple static index.html directly for a basic preview, use a local HTTP server for fetch, modules, and routing, or run the framework’s documented development command. Open the resulting page in VS Code’s integrated browser or a supported external browser. Add .vscode/launch.json when you want F5 to launch the same URL and debugger every time.
What “run a website” means in VS Code
Visual Studio Code edits your files; a browser renders them. VS Code can open an HTML file for a quick view, but it does not automatically know how to start every web project. The correct method depends on whether the site is static or requires an HTTP server, build tool, API, or framework runtime.
- Static preview: HTML, CSS, and uncomplicated JavaScript can be opened as a local file.
- Local HTTP server: Use this for
fetch(), ES modules, service workers, client-side routing, cookies, or code that assumes an HTTP origin. - Framework project: Run the
dev,start, or other script documented inpackage.jsonand the project README. - Debug session: Launch the local URL with Edge or Chrome debugging, set breakpoints, and inspect Console and Network panels.
Run a simple static HTML site
1. Open the complete project folder
- Start the desktop version of VS Code.
- Choose File > Open Folder and select the folder containing the website.
- Keep HTML, CSS, JavaScript, images, fonts, and package files inside the workspace. Relative paths are resolved from the HTML file and its location, so opening only an individual file can hide path mistakes.
2. Check the entry point and paths
For a small site, the entry point is usually index.html. Open it and verify that every reference matches the real filename and directory:
<link rel="stylesheet" href="css/site.css">
<script type="module" src="js/app.js"></script>
<img src="images/logo.svg" alt="Site logo">Case matters on many servers. A reference to App.js will not reliably find app.js.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minute#1 Best Overall
3. Preview the page
Use VS Code’s integrated browser to open the local .html file, or open the file in a browser from the Explorer. The integrated browser can also open localhost links and provides Developer Tools for inspection. If you prefer a Marketplace extension, Live Preview offers the Live Preview: Show Debug Preview command and an integrated-browser preview. Treat that extension as a convenience for front-end preview, not as a replacement for a framework’s own server.
When you need localhost instead of file://
Opening index.html directly gives the page a file:// URL. Browsers restrict some features in that context. Start an HTTP server when you use JavaScript modules, make API requests, load data with fetch(), test service workers, depend on cookies, or use client-side routes that should behave like production URLs.
Use the project’s own server first
Look in package.json for scripts, then follow the README. Common commands include npm run dev or npm start, but there is no universal command for React, Vue, Angular, Vite, Next.js, or another framework. Run the command in VS Code’s integrated terminal through View > Terminal:
npm install
npm run devRead the terminal output for the actual address, such as http://localhost:5173, and open that exact URL in the integrated browser or an external browser.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteServe a basic folder with Node.js
If the folder is plain static content and Node.js with npm is installed, Microsoft’s Edge guidance uses http-server:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
npx http-serverThe command prints a port, commonly an address such as http://localhost:8080. Open the displayed address rather than assuming a port. Stop the server with Ctrl+C.
Choose the right preview method
| Method | HTTP behavior | Automatic reload | API/proxy and routing | Debugging | Setup |
|---|---|---|---|---|---|
| Open HTML directly | No; file:// |
No | Limited; routing and origin-sensitive APIs can fail | Basic browser tools | Lowest |
| Live Preview | Yes for its preview server | Convenient for front-end edits | Not a universal framework/API proxy | Integrated debug preview | Install extension |
| Simple static server | Yes | Depends on server | Static files only unless configured | Use browser debugger | Low |
| Framework development server | Yes, with project-specific behavior | Usually built in | May provide API proxies, transforms, and history fallback | Best match for the application | Requires dependencies and scripts |
Use direct preview for a quick visual check, a static server for HTTP-dependent vanilla sites, and the framework server whenever the project has one.
Open and debug the running site
Open a localhost link
When a terminal command prints a localhost URL, select or open that link in VS Code. You can also run the browser command that opens a URL, or paste the address into the integrated browser. If the page does not load, compare the URL and port with the terminal output.
Use built-in Edge or Chrome debugging
Visual Studio Code includes a built-in debugger for Edge and Chrome. Use Run and Debug, Debug: Open Link, or a launch configuration. In a debugging session:
- Set a breakpoint by clicking beside a JavaScript line number.
- Use the Console to read syntax errors, exceptions, and failed imports.
- Use Network to check status codes, request URLs, blocked resources, and response content.
- Confirm source maps point back to your source files when a bundler generates transformed JavaScript.
Make F5 launch the site with launch.json
Create a .vscode directory in the project and add launch.json. Start the development server separately in the integrated terminal, then press F5 or choose Run and Debug:
Rank #3
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch local site",
"url": "http://localhost:8000"
}
]
}Replace 8000 with the port your server actually reports. For Chrome, replace msedge with chrome. To use VS Code’s integrated browser, use the supported editor-browser configuration type. A launch configuration opens the browser and attaches the debugger; it does not replace the command that starts your application server.
Framework projects: run the documented command
Frameworks differ in dependency installation, ports, environment variables, asset processing, and routing. From the folder containing package.json:
Recommended Free Tools
- Install the project’s declared dependencies, normally with
npm installunless its documentation specifies another package manager. - Inspect the
scriptsobject and README. - Run the documented development script, such as
npm run devornpm start. - Copy the reported localhost URL into the integrated browser.
Do not substitute a generic static server for a framework server: doing so can omit JSX or TypeScript transforms, environment variables, API proxies, hot reload, and history fallback. If a project requires a database or backend, start those services according to its documentation as well.
VS Code for the Web limitations
vscode.dev is useful for browser-based editing, but its browser environment does not provide the desktop terminal or debugger. If the workflow needs runtime access to run, build, or debug code, use desktop VS Code, GitHub Codespaces, or Remote Tunnels. Editing in the web client alone cannot start a local server on your computer.
Troubleshoot the usual failures
Blank page
- Confirm that you opened the intended entry file or the URL printed by the server.
- Open Developer Tools and read the first Console error.
- Check that the HTML body is not hidden by CSS or an unhandled JavaScript exception.
CSS, images, or JavaScript do not load
Compare each path and filename with the Explorer, including capitalization. A path beginning with / is rooted at the server origin; a path beginning with ./ is relative to the current document. Correct the reference, then reload.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
“CORS” or module errors
Serve the project over http://localhost instead of opening it with file://. For a framework, use its own development server so module transforms and proxy settings are applied.
Free tools Windows power users keep installed
One-click scans. No signup required.
Port already in use
Stop the old terminal process with Ctrl+C, or choose the alternate port supported by your server. Update both the browser URL and launch.json; an F5 configuration pointing at the old port cannot open the new one.
F5 opens nothing or shows the wrong page
- Verify that the selected debugger is installed and supported.
- Check the
urlvalue and port inlaunch.json. - Start the server before pressing F5, unless you have separately configured a task to start it.
The page works in a browser but not in vscode.dev
Move runtime work to desktop VS Code, Codespaces, or Remote Tunnels. The web editor cannot provide the terminal or debugger needed by the project.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If the site is already reachable at a public URL and you need a clean image or PDF rather than a local debugging session, ScreenshotNeo provides a one-request website screenshot API. It accepts cookie and consent banners like a visitor, then removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response reports its result in X-Page-Verdict and X-Billed headers.
Use the API documentation at https://screenshotneo.com/docs/ for all options, including full-page lazy-image loading, CSS-selector element capture, dark mode, device presets, retina scale, PDF paper and page settings, custom CSS and JavaScript, clicks, waits, blocked resources, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous webhooks, bulk capture, usage data, and the OpenAPI specification. Its parameter names also match those used by other screenshot APIs, which helps when switching.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
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}`);Replace the example URL with your deployed, publicly reachable site; a remote API cannot fetch a private localhost address. ScreenshotNeo also offers an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots, with every feature on every plan. Create a free ScreenshotNeo account.
A repeatable daily workflow
- Open the repository folder, not just one HTML file.
- Identify the entry page and verify relative paths.
- Decide whether the page needs
file://, a static HTTP server, or the framework’s server. - Start the server in View > Terminal and note the reported URL and port.
- Open that URL in the integrated browser.
- Use Console, Network, breakpoints, and source maps to diagnose behavior.
- Save a matching
launch.jsonso F5 repeats the debugging setup.
Frequently Asked Questions
Can I run an HTML file in VS Code without installing an extension?
Yes. Open the folder in desktop VS Code and open the HTML file in a browser or the integrated browser. Install or use a server only when the page needs HTTP behavior or automatic preview features.
Why does my localhost port change between projects?
Development servers choose an available port or use a project-specific setting. Always use the address printed by the current terminal process and keep that value synchronized with launch.json.
Can F5 start both my server and browser?
The shown launch configuration starts the browser debugger. Starting the application server remains a separate terminal step unless you add a VS Code task and a compound configuration tailored to that project.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →The Bottom Line
Open the whole project in desktop VS Code, use direct preview only for genuinely simple static files, run the project’s HTTP or framework server for realistic behavior, and point a browser debugger at the reported localhost URL. A small launch.json turns that setup into a repeatable F5 workflow.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
