Live Server - It's a very pleasent extension for all the web developers over there. It helps to open up your project in browser with in a click, and automatically reloads the browser tab, as you save you work.
This tool is a must for those who love to code on Visual Studio Code. Moreover, many of them might only be using VS Code due to this awesome extension.
But here's a catch, it sometimes can also give some awful errors or just don't work, making the whole coding exprience worst. But don't worry, today we will see - How to fix Live Server in Visual Studio Code?
So let's get started!
(Watch Video: Video is available at the end of this article)
Restart VS Code
Sometimes your Visual Studio Code might stop working for a while due to a whole bunch of commands given by you at once, which might not be easier for it to execute at the moment.
In such cases, only re-starting the program can be very useful. This will let your VS Code refresh itself and start again.
So, firstly save your project work. Then, close and re-open VS Code. If this works then it's great, else follow along the next method!
Set default browser (System)
If you hasn't set any default browser of your Operating System (OS) or it has just messed up with the location of the program, then your Live Server won't be able to know which one browser it should open.
So, follow the following steps to set the default browser:
- Step 1. Use Win + I shortcut command to open up the settings.
- Step 2. Now, navigate to Apps & Features.
- Step 3. Then, click on Default apps on the left side.
- Step 4. Scroll down the list, and choose Web browser.
- Step 5. Then, select the browser that suits you the best.
Set default browser (VS Code)
By telling Live Server that which browser it should open, you can also solve this problem.
Follow the following steps to set the default browser in VS Code:
- Step 1. Press F1 key to open up the Command Pallete.
- Step 2. Search for, Preferences: Open Settings (JSON), and open it up.
- Step 3. At the end of the last setting, put a comma(,) and paste this:
"liveServer.settings.CustomBrowser" : "chrome".
Manually Open Live Server
If your Live Server don't opens up the browser tab on giving command, there might be some minimal issue with your Live Server.
So, you can otherwise try opening up the following link manually in browser: http://127.0.0.1:5500/<filesname>
Here, change the <filesname> to your prefered file location. For example: http://127.0.0.1:5500/index.html
If it works then it's great, this means that there was only some problem while opening up your browser, and your Live Server still works effectively.
Also Read
Error: Server is started...but failed to open in Browser Preview
If you are the one who's getting this type of error, shortly after trying to run the Live Server, then this problem can be solved by doing some changes in the settings.
Follow these steps to fix this issue:
- Step 1. Press Ctrl + Shift + X keys to open up the Extensions. Or, you can click on the extensions icon on the left side to open it up.
- Step 2. Move to Live Server extension under Installed.
- Step 3. Click on the gear icon at it's bottom and open up Extension Settings.
- Step 4. Navigate to Live Server > Settings : Use Browser Preview, if it's selected then un-select it.
- Step 5. Now, move to Live Server > Settings : Use Local Ip, if it's un-selected then select it.
Conclusion
- Restart VS Code
- Set Default Browser (VS Code)
- Set Default Browser (System)
- Manually Open Live Server
안되는데ㅠㅠㅠ
ReplyDeletethank you so much it's really useful information and helped me to make live server work
ReplyDelete