Post thumbnail
WEB DEVELOPMENT

Fixing Live Server in VS Code: A Complete Guide

By Naveen Kumar

Live Server in VS Code is one of the most loved extensions in Visual Studio Code for web developers. It provides real-time updates in the browser whenever you make changes to your HTML, CSS, or JavaScript files. But what if it suddenly stops working?

If you’re facing issues with Live Server not working in VS Code, you’re not alone. Let’s go through a step-by-step guide to fix it and get you back on track.

Table of contents


  1. Common Issues with Live Server in VS Code
  2. Step-by-Step Solutions
    • Check if Live Server is Installed
    • Restart VS Code
    • Open Folder (Not Just File)
    • Check Default Browser Settings
    • Use the Correct HTML File
    • Disable Conflicting Extensions
    • Check Firewall or Antivirus Settings
    • Update VS Code & Extensions
    • Check Live Server Port & Address
    • Reinstall Live Server Extension
  3. Terminal Troubleshooting
  4. Conclusion

Common Issues with Live Server in VS Code

Common Issues with Live Server in VS Code

Before we dive into the solutions, here are a few common symptoms:

  • The browser is not opening automatically
  • The page doesn’t refresh after saving changes
  • “Live Server is not working” error
  • Right-click > “Open with Live Server” not showing

Step-by-Step Solutions

Step-by-Step Solutions

1. Check if Live Server is Installed

First, ensure the extension is installed:

  • Go to the Extensions tab (Ctrl + Shift + X)
  • Search for Live Server by Ritwick Dey
  • If it’s not installed, click Install
  • If it’s installed, try clicking Reload to restart the extension

2. Restart VS Code

Sometimes, a simple restart can fix temporary glitches. Close all VS Code windows and reopen your project.

3. Open Folder (Not Just File)

Live Server only works if you’ve opened a folder, not just a single file.

Solution:

  • Go to File > Open Folder
  • Select the folder where your project is located
  • Then try again with Go Live

4. Check Default Browser Settings

Live Server might open the wrong browser or fail if the default browser is misconfigured.

Set your preferred browser:

  • Press Ctrl + Shift + P → search for Preferences: Open Settings (JSON)
  • Add or update:

json

"liveServer.settings.CustomBrowser": "chrome"

Supported values: "chrome", "firefox", "edge", "safari" (for Mac)

5. Use the Correct HTML File

Make sure you’re trying to run an actual .html file.

Solution:

  • Right-click your index.html (or other HTML file)
  • Choose “Open with Live Server.”

6. Disable Conflicting Extensions

Some extensions might interfere with Live Server (e.g., Preview on Web Server, Path Autocomplete, etc.).

Try this:

  • Go to Extensions
  • Temporarily disable other web server-related extensions
  • Restart VS Code and try again

7. Check Firewall or Antivirus Settings

Firewalls or antivirus programs can block the local server.

Solution:

  • Temporarily disable the firewall or antivirus
  • Try running Live Server
  • If it works, add an exception for VS Code

8. Update VS Code & Extensions

Outdated software can cause compatibility issues.

Update VS Code:

  • Go to Help > Check for Updates

Update Extensions:

  • In the Extensions tab, click on the update icon if available
MDN

9. Check Live Server Port & Address

By default, Live Server uses port 5500. If another service is using that port, it might fail.

Change the port:

  • Open Settings (JSON) and add:

“liveServer.settings.port”: 0

This will allow Live Server to use a random free port.

10. Reinstall Live Server Extension

If none of the above work:

Uninstall & reinstall:

  • Go to Extensions
  • Uninstall Live Server
  • Reload VS Code
  • Reinstall it

Terminal Troubleshooting

Open the terminal (Ctrl + ~) and see if any errors pop up when you run Live Server. You might see useful error messages related to ports or permissions.

If you want to learn more about HTML, Live servers, VScode, and how it enables developers to work seamlessly, consider enrolling in GUVI’s IIT-M Pravartak-certified Full Stack Development Course that not only teaches you the basics but also makes you an experienced developer through hands-on projects guided by an actual mentor. 

MDN

Conclusion

Live Server is a powerful tool, but like any extension, it can run into hiccups. The good news is, most problems are easy to solve once you know where to look. By following the fixes in this guide, you’ll have a reliable development setup back in no time. And if one solution doesn’t work, don’t give up. Stack the steps, stay patient, and your Live Server will be up and running smoothly again.

Career transition

Did you enjoy this article?

Schedule 1:1 free counselling

Similar Articles

Loading...
Share logo Copy link
Power Packed Webinars
Free Webinar Icon
Power Packed Webinars
Subscribe now for FREE! 🔔
close
Webinar ad
Table of contents Table of contents
Table of contents Articles
Close button

  1. Common Issues with Live Server in VS Code
  2. Step-by-Step Solutions
    • Check if Live Server is Installed
    • Restart VS Code
    • Open Folder (Not Just File)
    • Check Default Browser Settings
    • Use the Correct HTML File
    • Disable Conflicting Extensions
    • Check Firewall or Antivirus Settings
    • Update VS Code & Extensions
    • Check Live Server Port & Address
    • Reinstall Live Server Extension
  3. Terminal Troubleshooting
  4. Conclusion