How to Fix VS Code Unable to Connect to Browser on Windows 11

Visual Studio Code (VS Code) is one of the most popular editors for building and debugging web applications. It allows you to open, edit, and preview your code directly in a browser — but sometimes, when you try to run a project or launch a live preview, you might encounter an error like: “Unable to connect to browser” or “Cannot connect to Chrome – please check if it’s installed or running.”

If that sounds familiar, don’t worry — it’s a common issue caused by browser or extension configuration problems.

In this guide, we’ll walk you through the main causes and provide step-by-step fixes to get your browser connected to VS Code again.

Why VS Code Fails to Connect to Browser

Several issues can cause this problem — here are the most common ones:

Live Server extension misconfiguration
Firewall or antivirus blocking local ports
Corrupted browser or VS Code settings
Debugger or runtime path not set correctly
Outdated extensions or VS Code version
Chrome/Edge not installed in the default path

Now let’s go step-by-step through the working fixes.

1. Restart VS Code and Browser

Before diving into deeper troubleshooting, start with the basics.

Close all running instances of VS Code and your browser.
Press Ctrl + Shift + Esc → open Task Manager.
End all Code.exe and chrome.exe / msedge.exe processes.
Reopen VS Code and try launching the project again.

Why this helps: Sometimes, background processes interfere with VS Code’s connection to the browser, especially after debugging sessions.

2. Check Live Server Extension Configuration

If you’re using the Live Server extension to open your HTML project in a browser, it might not be configured properly.

In VS Code, click the gear icon at the bottom left → Settings.
Search for Live Server.
Scroll down and check these settings:
- Custom Browser: Ensure it’s set to your browser name (e.g., chrome or edge).
- Port Number: Default is usually 5500. Change it if another app uses the same port.
Restart VS Code and click Go Live again.

Pro Tip: You can manually set the browser using a command:

Ctrl + Shift + P → Preferences: Open Settings (JSON)

Then add this line:

"liveServer.settings.CustomBrowser": "chrome"

3. Set Chrome or Edge as Default Debugging Browser

If you’re debugging using the Debugger for Chrome or Debugger for Edge extension, you may need to update your launch configuration.

1. Open your project folder in VS Code.

2. Go to the .vscode folder → open launch.json.

3. Make sure the configuration looks like this:

For Chrome:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:5500",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

For Edge:

{
  "type": "pwa-msedge",
  "request": "launch",
  "name": "Launch Edge",
  "url": "http://localhost:5500",
  "webRoot": "${workspaceFolder}"
}

4. Save the file and click Run → Start Debugging (F5).

Note: Replace 5500 with your actual server port if you use a different one.

4. Allow VS Code Through Windows Firewall

Windows Firewall might block VS Code or Live Server from opening a port.

Press Windows + I → Privacy & Security → Windows Security → Firewall & network protection.
Click Allow an app through firewall.
Find Visual Studio Code (or add it manually if not listed).
Check both Private and Public boxes.
Click OK, then restart VS Code.

Pro Tip: If you’re using WAMP, XAMPP, or any local server tool, allow them through the firewall too.

5. Update or Reinstall the Browser Debugging Extension

Sometimes, the Debugger for Chrome or Debugger for Edge extension itself is outdated or corrupted.

In VS Code, press Ctrl + Shift + X to open Extensions.
Search for:
- “Debugger for Chrome”
- “Debugger for Microsoft Edge”
Uninstall the extension.
Restart VS Code, then reinstall the latest version.

After reinstalling, retry launching your project using F5.

6. Update or Reinstall Visual Studio Code

If the problem persists, it might be a deeper issue with VS Code itself.

Go to https://code.visualstudio.com/.
Download the latest version of VS Code.
Install it over your existing version (no need to uninstall).
Once updated, open your project and test again.

Why this helps: Older builds may not support new debugging APIs or browser updates.

7. Verify Chrome or Edge Installation Path

If your browser isn’t installed in the default directory, VS Code may fail to detect it.

Press Windows + R → type: where chrome or where msedge
Copy the path it shows (e.g., C:\Program Files\Google\Chrome\Application\chrome.exe).
Add that path to your launch.json configuration manually:
"runtimeExecutable": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
Save and restart debugging.

8. Run VS Code as Administrator

Sometimes, permission issues block VS Code from opening ports for Live Server or debugging.

Right-click the VS Code icon.
Select Run as administrator.
Try launching your project again.

If it works, you can make this permanent:

Right-click the shortcut → Properties → Compatibility → Check “Run this program as administrator” → Apply → OK.

9. Disable Conflicting Extensions

Extensions like Prettier, Path Intellisense, or Live Preview can sometimes conflict with Live Server.

Press Ctrl + Shift + X → open Extensions.
Disable all except Live Server and Debugger.
Restart VS Code and test again.

If it works, re-enable extensions one by one to find the culprit.

10. Reset VS Code Settings

If none of the above fixes work, reset your VS Code settings to factory defaults.

Press Ctrl + Shift + P → type: Preferences: Open Settings (JSON)
Delete all custom configurations inside and save the file.
Restart VS Code — it’ll recreate default settings.

Alternatively, delete:

%AppData%\Code\User\settings.json

Wrapping Up

If VS Code can’t connect to your browser, it’s usually due to Live Server or Debugger misconfiguration, blocked ports, or missing permissions.

Start by restarting VS Code, setting the correct browser in Live Server settings, and ensuring both VS Code and your browser are allowed through Windows Firewall. If the issue persists, update or reinstall VS Code, your browser, or the Debugger extension.

With these fixes, you’ll be able to preview and debug your web projects directly from VS Code — just as intended.