Visual studio code не работает live server
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 the default browser
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.
After this, re-open your VS Code and try opening your work in browser using Live Server. If it still didn`t work, then you can try out the next way.
Set the browser
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:
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.
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.
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.
It's done, now you can try opening your work in browser using the Live Server. Now, it should work properly.
Conclusion
These were the different ways using which you can fix your Live Server not working problem inside Visual Studio Code. In case of any problem, you can write it down in the comments section below.
I have installed the live server extension but the browser does not update after I save my HTML or other files. What might be causing a problem?
19 Answers 19
Re-install the extension and restart your text editor to fix the issue.
I had this problem and I solved it by changing the port number in the settings.json file to an opened one.
To get to the settings.json file you just click CTRL + SHIFT + P , then type "settings", click the "Preferences: Open Settings (JSON)", then paste this inside the < >:
This will randomly pick an opened port each time. This is how my JSON file looks like:
If there are multiple lines in the JSON file, make sure each line is separated by a comma( , ), like this:
Then this may be due to connection issue on your system.
I had same problem when i was compiling below html page:
Solved it by changing live server settings to my local IP and it fixed issue.
This works for anyone for whom live server is not running by default with port 5500.
For such issues, refer settings.json file in vs code. < "liveServer.settings.useLocalIp": true, "liveServer.settings.CustomBrowser": "chrome" >Also if you are behind company firewall, this method might not work and you need to get it opened.
It is because you have added insufficient paths in your Environmental variables.
First you can do is close the vs code
Go to the properties of My Pc
Click on Advanced Settings
click on Environmental Variables
from there you can add path clicking the path variables in the table shown there 6 . Add a new line to the path and copy paste the path of your system 32
hope this solution works in your case
Live server started but still isn't opening the page in your browser automatically
Note: some time port number 5500 will be changed to 5501
I had a space in the file name, where the index.html was to be found.
Like: 3. Typography .
Just got rid of the space: 3.Typography because (of course) we can not have empty spaces in a url.
its easy to solve. just open setting by (ctrl + ,)and pick commonly Used first field is a (Auto save) Its value is by default off you must change it to After delay
I have same problem then i solve it by deleting all settings of live server from settings.json file and reinstall live server extension and now running it correctly.
Turn on the autosave feature on. File-> AutoSave
Please use the proper HTML syntax which is 👇
Being a newbie to web development, I was only using the head tag . The web page was working in the browser but the live server couldn't process it. You can get the above snippet in vscode by typing html:5 and then hitting tab.
Also, make sure that the autosave feature in vscode is enabled, which you can do by going to vscode settings shortcut : Ctrl + , and then type autosave. Change Files: Auto Save to afterDelay and if you want to view the changes in your code instatenously, edit Files: Auto Save Delay to 1 .
Now sit back and watch the magic happen😁.
I came across this issue a few times in VSCode and for me it was because I was calling live-server from PS prompt. I switched to "command prompt" and it worked just fine.
Best way to solve 5500 port number error
Check the port number below in the Go Live section if it is (5500 port number) then go to browser window and type localhost:5500 then select your project folder then you can see the automatic update.
If you can reach the address and only the browser does not open, follow this method:
- Check the browser with the default option from the live server settings.
- Reset Windows default apps.
- I was using Brave browser and when I made the default browser from the browser's settings and restarted the vscode program, the problem was resolved. It also works in other browsers.
I was using this in a folder and folder's name has some irregular letters like capital i "İ". When I chance the folder's name to suits english rules it works.
This is happening because you have changed some default settings. You should reset them all to run the live server. Unless you should define what did you change to the live server.
If the live server still not working,
Make sure you have embedded your folder to VS code. If you didn't just press Ctrl + B and Click on the Add New Folder Icon. Then choose your project's folder. Then right-click on your project.html and it will open.
If didn't work, type in the Address bar in your browser like 127.0.0.1:5500. Localhost server should open now.
Still, you had the problem, they try to close and reopen VS code several times.
If still, you got the problem, try to install your default web browser in the default path in your C drive. (C://Program files. )
If you still have the problem it might be a problem with the live server. You should uninstall it and install another version outed lately.
VSCode имеет множество отличных расширений, и Live Server - одно из лучших.
Всего за пару кликов Live Server позволяет увидеть вашу страницу в реальном времени в реальном браузере. Более того, он имеет функцию перезагрузки в реальном времени, поэтому, если вы обновите свой код, изменения также будут отражены в браузере.
Все, что вам нужно сделать, это щелкнуть правой кнопкой мыши HTML-файл, который вы хотите просмотреть, затем щелкнуть правой кнопкой мыши и выбрать «Открыть с помощью Live Server»:
Но что, если Live Server не открывает ваш браузер и не отображает вашу страницу так, как вы ожидаете? Если это происходит с вами, вот несколько вещей, которые вы можете попробовать.
Перезапустить VSCode
Иногда лучшее, что вы можете сделать, - это запустить VSCode с нуля.
Во-первых, сохраните всю свою работу. Затем закройте VSCode, который также остановит все установленные вами расширения.
Затем снова откройте VSCode и попробуйте еще раз - перейдите к HTML-файлу, который вы хотите просмотреть, щелкните правой кнопкой мыши и выберите «Открыть с помощью Live Server».
Установите браузер для Live Server
Возможно, расширение работает, но в вашей системе нет браузера по умолчанию.
Даже если вы установили браузер по умолчанию для своей системы, не помешало бы сообщить Live Server, какой браузер вы хотите использовать явно.
Сначала откройте Command Pallete с помощью F1, затем введите Preferences: Open Settings (JSON) и выберите эту опцию.
Это откроет ваш settings.json файл VSCode .
Прокрутите файл до конца и вставьте его "liveServer.settings.CustomBrowser": "chrome" .
Прокрутите файл до конца, добавьте запятую после последнего параметра и вставьте "liveServer.settings.CustomBrowser": "chrome" :
Обратите внимание, что вы также можете использовать "firefox" , "safari" или любой другой браузер в качестве значения "liveServer.settings.CustomBrowser" параметра.
Наконец, сохраните settings.json файл и попробуйте снова запустить Live Server.
Установите браузер по умолчанию для вашей операционной системы
Даже после того, как Live Server сообщил, какой браузер вы хотите использовать, возможно, что он по-прежнему неправильно открывает вашу страницу в этом браузере.
Следующее, что нужно попробовать, - это установить браузер по умолчанию для самой операционной системы.
Точный метод для этого может варьироваться в зависимости от вашей операционной системы, поэтому лучше поискать, как это сделать, если вы не уверены.
Вот как выглядит страница настроек в Windows:
Зайдите на живую страницу сами
Если по какой-то причине Live Server по-прежнему не открывает страницу в вашем браузере автоматически, не беспокойтесь. Вы всегда можете открыть любой браузер по вашему выбору и просмотреть страницу напрямую.
Просто откройте предпочтительный браузер и перейдите в //127.0.0.1:5500/ .
Например, если ваш файл называется index.html , просто перейдите по ссылке //127.0.0.1:5500/index.html .
Пока работает Live Server, вы должны видеть свою страницу.
В заключение
Это несколько распространенных исправлений, которые вы можете попробовать, если Live Server не работает так, как вы ожидаете.
VSCode has a lot of great extensions, and Live Server is one of the best.
With just a couple of clicks, Live Server lets you see your page live in an actual browser. Better yet, it features live reloading, so if you update your code, the changes are also reflected in the browser.
All you have to do is right click in the HTML file you want to view, right click, then select "Open with Live Server":
Live Server in action
But what if Live Server doesn't open your browser and show your page like you expect? If this is happening to you, here are a few things you can try.
Restart VSCode
Sometimes the best you can do is start VSCode from scratch.
First, save all of your work. Then close VSCode, which will also stop all of the extensions you've installed.
Then, reopen VSCode and try again – go to the HTML file you want to view, right click, and select "Open with Live Server".
Set the browser for Live Server
It's possible that the extension is working, but your system doesn't have a default browser.
Even if you did set the default browser for your system, it wouldn't hurt to let Live Server know which browser you'd like to use explicitly.
First, open the Command Pallete with F1, then type in Preferences: Open Settings (JSON) and select that option.
This will open your VSCode settings.json file.
Scroll all the way to the bottom of the file, add a comma after the last setting, then paste in "liveServer.settings.CustomBrowser": "chrome" :
Note that you can also use "firefox" , "safari" , or any other browser as the value for the "liveServer.settings.CustomBrowser" setting.
Finally, save the settings.json file and try to run Live Server again.
Set the default browser for your operating system
Even after telling Live Server which browser you want to use, it's possible that it's still not opening your page in that browser correctly.
The next thing to try is to set the default browser for your operating system itself.
The exact method for doing this can vary based on your operating system, so it's best to search for how to do this if you aren't sure.
Here's what the settings page looks like in Windows:
Credit: Advitya-sharma
Go to the live page yourself
If for some reason Live Server still isn't opening the page in your browser automatically, no worries. You can always open the browser of your choice and view the page directly.
As long as Live Server is running, you should see your page.
In closing
Those are a few common fixes you can try if Live Server isn't working the way you expect.
Stay safe, and happy (live) coding.
If this article was helpful, tweet it .
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)
Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.
Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.
не открывает расширение Live server. Оно установилось, но при нажатии Open with Live server ничего не происходит. Приходиться в браузере LocalHost прописывать. Есть идеи, как это решить?
Всем привет! Кто сталкивался с такой проблемой, VS Code после установки через некоторое время сам удаляется, пропадает значок с рабочего стола и из меню пуск исчезает тоже, хотя при повторной установке сохраняются все настройки и плагины, которые я устанавливал.
Доброе время суток. Днём писал в vs code и всё нормально работало и запускалось там в консоли. Сейчас вечером выдаёт такую ошибку
PS C:\Users\Иван\Documents\Обход в ширину> & C:/Users/ван/AppData/Local/Programs/Python/Python37-32/python.exe "c:/Users/ван/Documents/бход в ширину/бход в ширину.py"
& : Имя "C:/Users/ван/AppData/Local/Programs/Python/Python37-32/python.exe" не ра
чего повторите попытку.
строка:1 знак:3
+ & C:/Users/ван/AppData/Local/Programs/Python/Python37-32/python.exe " .
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (C:/Users/ван/Ap. 7-32/python.exe
:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
С чем она связана?
Подскажите, что можно сделать:
vscode при html/css верстке не видит файлы css, лежащие в отдельной папке css. Не понимает относительные пути.
Пришлось все писать во встроенных стилях самой html.
Причем, эта проблема на домашнем компьютере не возникает, а только на работе, на одном компьютере.
В чем может быть причина? Что там не так? Что-то блокируется, как буд-то.
Верстку, сделанную на другом компьютере он понимает.
Но в нем самом если писать путь к файлу - не видит.
Читайте также: