Не работает live server vs code

Live server installed but not working in VS code

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?

22 Answers 22

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

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.

This will randomly pick an opened port each time. This is how my JSON file looks like:

If live server is not runnning and rendering html page on port 5500,for example http://127.0.0.1:5500/index.html not working.

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.

My local ip: http://192.168.2.16:5500/index.html is rendering changes on fly and working.

This works for anyone for whom live server is not running by default with port 5500.

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

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

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 👇

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.

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.

[Fixed] Live Server Not Working in VS Code

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.

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:

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:

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/

Here, change the 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.

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:

Conclusion

Vscode-live-server: живой сервер не перезагружается автоматически

« html
[x] Регрессия (поведение, которое раньше работало и перестало работать в новой версии)
[x] Отчет об ошибке
[] Запрос функции
[x] Проблема или запрос документации

Текущее поведение

живой сервер не перезагружается автоматически

Ожидаемое поведение

он перезагружается без перезагрузки браузера вручную

Среда

По вопросам, связанным с инструментами:

Все 105 Комментарий

Решено

У меня здесь та же проблема.
Я думаю, что недавнее обновление VSCode сделало его неработающим, как и ожидалось.
До обновления работало хорошо.

У меня здесь та же проблема.
Я думаю, что недавнее обновление VSCode сделало его неработающим, как и ожидалось.
До обновления работало хорошо.

Да, последнее обновление сломало его

Привет, у меня такие же проблемы.
Автообновление не работает.

Моя среда:
Windows 10.
VSCode 1.35.1 (я также пробовал в 1.34, и это тоже не сработало)
Живой сервер: 5.6.1
Браузер: Chrome или Firefox (пробовал в обоих)

Я попытался переустановить и удалить файлы из файла расширения для завершения сброса.
Любое решение?

У меня тоже такая же проблема. Живая перезагрузка не работает

Версия Chrome: 75.0.3770.100 (официальная сборка) (64-разрядная версия)
Vscode версии 1.36
Живой сервер версии 5.6.1

У меня была такая же проблема, и моя проблема заключалась в том, что мой html-файл не был закодирован в utf8

Я была такая же проблема. До сих пор я не мог понять, в чем проблема. Моя среда:
Windows 10
Версия Chrome: 76.0.3809.100 (официальная сборка) (64-разрядная версия)
VSCode 1.36.1
Живой сервер 5.6.1

До сих пор для меня это был случайный случай, когда я сталкивался с тем, что «страница не перезагружается автоматически». Иногда он работает после того, как я нажимаю кнопку «Сохранить», но только через пару минут, пока «автоперезагрузка» не перестанет работать. Когда я перезагружаю свой компьютер, вероятность того, что LiveServer будет работать правильно, составляет 50/50. Прямо сейчас у меня нет надежного решения, что может вызвать эту проблему. Думаю, это может быть моя Windows 10, но я не знаю, как это проверить.

Обязательно сохраните конфигурацию рабочего пространства, тогда все будет работать.

Visual Studio Code Live Server не коректно отображает страницу

Visual Studio Code + Python. Intellisense не отображает некоторые члены модулей
Захотелось мне немного изучить питон и покодить с примерами по книге. Установил анаконду и студию.

Visual Studio 10 не отображает html страницу в WebBrowser
здравствуйте в форме добавила компонент webBrowser прописала код private void.

Как настроить live server в VS Code?
Здравствуйте! А как настроить VS Code, чтобы в правой части интерфейса автоматически отображались.

Зачем для создания формы на Angular использовать Visual Studio и Visual Studio Code?
Мне нужно написать форму на ангуляре, которая будет выполнять Select, Insert,Delete из базы данных.

Чем отличается Visual Studio Community и Visual Studio Code?
в чем разница Visual Studio Code или Visual Studio Community. Описание на англиском где я полный.

Debian 9 Visual Studio Code С++ нужно настроить VS Code
Доброго времени суток, скажите пожалуйста как настроить в VS Code Path при работе с C++.

Code First с БД PostgreSQL в Visual Studio Code на Linux
Здравствуйте! Возникла проблема с подключением к БД PostgreSQL, обо всем по порядку: Стоит.

Visual Studio не отображает список методов класса
Вопрос может немного детский, но я не пойму причину этого глюка. Установил сегодня VS 2008 написал.

cx, cy, r в visual studio code
Здраствуйте, подскажите пожалуйста, как сделать так чтоб cx, cy, r в scss не отображались ошибками

Браузер не запускается с BrowserSync или live-сервером

Я использовал live-сервер с VS Code для отладки некоторых веб-страниц. Все было хорошо, я запустил live-server из командной строки в каталоге страниц, и Chrome открыл новую вкладку со страницей.

Тогда вдруг это перестало работать! Я подумал, что это немного странно, поэтому я снова установил Nodejs, и впоследствии возникла проблема. Сервер работает, но не может открыть Chrome (или любой другой браузер)

Я попытался использовать BrowserSync вместо live-сервера, и снова сервер работает, но он не может автоматически открыть Chrome

Я попытался удалить и установить как live-сервер, так и browserSync, Chrome. Сбрасывая мой днс, проверяя на наличие вредоносных программ, проверяя, блокирует ли брандмауэр Windows что-либо связанное, и некоторые другие вещи, которые ничего не сделали для меня, я все еще получаю:

Couldn’t open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

Может кто-нибудь сказать мне, что может быть причиной этой проблемы или как я должен попытаться ее исправить?

Troubleshooting Visual Studio Live Share

This article covers troubleshooting tips, workarounds, and answers for common problems and questions. You may also want to take a look at the FAQ.

Installation / tool requirements

The following are troubleshooting tips related to installing Visual Studio Live Share.

Sign in

The following are troubleshooting tips for sign in problems.

Share and Join

The following are troubleshooting tips for share and join problems.

Connectivity

The information below can help you troubleshoot if you’re having problems related to connectivity or timeouts when signing in, sharing, or joining.

As outlined in the connectivity requirements for Live Share article, different connection modes have different requirements to function so there are a few different potential issues going on.

See the connectivity requirements for Live Share article, for more information on connectivity requirements.

See also

Still having problems? You can provide feedback.

Лучшие плагины для VS Code

Рассмотрим лучшие плагины редактора Visual Studio Code для Web-разработки в 2021 году.

Live Server

Автоматическая перезагрузка статических и динамических страниц.

1. Нажатием Go Live в статус баре.

Как настроить автоматическое обновление страницы для PHP-файлов c помощью Live Server

1. Нужно установить дополнение для браузера Chrome или Firefox.
2. Должен быть установлен локальный сервер. Я использую Open Server.
3. Помещаем свой проект на локальный сервер и запускаем его.
4. Откроем установленное расширение и заполним необходимые поля.

5. Нажимаем кнопку Go Live в статус баре.

Path Intellisense

Подсказка для заполнения пути и имени файла.

Bracket Pair Colorizer

Расширение подкрашивает симметричные скобки одинаковым цветом, но отличным от других скобок.

Higlight Matching Tag

Подсветку выделения тегов можно изменить под себя. Моя настройка:

Color Highlight

Выделение web-цветов в редакторе соответствующим цветом.

Auto Rename Tag

При изменении одного парного тега, второй будет изменён автоматически.

По умолчанию расширение работает для всех языков, чтобы изменить данную настройку используйте следующий код:

Auto Close Tag

Автоматическое закрытие тегов.

По умолчанию работает для всех языков: HTML, PHP, JavaScript, markdown, liquid и т.д.
Изменить настройки можно в setting.json :

PHP Intelephense

Например, для того чтобы добавить функции WordPress в данный сервер, вам необходимо добавить в ваш settings.json настройку:

Format HTML in PHP

Apache Conf

Code Spell Checker

Проверка орфографии в VS Code.

Проверка орфографии русского языка

Чтобы VS Code мог проверять орфографию русского языка, выполните следующие действия:

Автоматическая замена табов пробелами в VS Code

Сначала зададим количество пробелов в одном табе:

Теперь настроим автоматическую замену табов пробелами:

JS-файл не загружается на Live Server в VS Code

Я начинаю использовать VS Code, поэтому у меня нет большого опыта в этом. Похоже, мне нужно добавить все необходимое вручную. Исходя из Visual Studio, это сначала немного странно, хотя я вижу преимущества.

Я выбрал Live Server ( https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer ) в качестве веб-сервера для своих проектов, над которыми я буду работать в Visual Studio Code. Не уверен, что это хороший выбор, но он получил высокую оценку.

Вот проблема, с которой я столкнулся: когда я запускаю Live Server, я могу html загрузить свой файл в корень, но Live Server отказывается загружать bundle.js файл, который также находится в корневой папке.

Когда я запускаю инструменты разработчика в Chrome, я вижу следующее, но когда я перехожу в настоящую папку, я вижу, что файл там.

Есть идеи, почему это происходит и как это решить?

Vscode-live-server: Браузер не открывается после выхода в эфир

Я запускаю Ubuntu на Virtual Box. После установки расширения на VS Code и нажатия Go Live,
он предлагает мне два сообщения: одно: «Сервер запущен», другое: «Ошибка при открытии браузера. См. ошибку на консоли».
Обратите внимание, что сервер успешно запущен, и я убедился, что он работает, введя IP-адрес в моем Google Chrome.

Все 19 Комментарий

Ага! Я только что заметил, что он не работает в Linux, но в Windows такой проблемы нет.

Кстати, большое спасибо за отчет о репозитории GitHub. 🙂

Добро пожаловать.
Итак, я обновил свою установку после того, как вы нажали исправление.
На этот раз я получаю следующее сообщение об ошибке: «Сервер запущен на 5500, но не удалось открыть браузер. См. Ошибку на консоли».

дайте мне знать, что после этого вы все еще сталкиваетесь с проблемой?

Теперь он работает хорошо!
Спасибо за вашу быструю помощь

Удалите liveServer.settings.CustomBrowser: chrome и попробуйте v1.6.11. Надеюсь, он откроет браузер системы по умолчанию без каких-либо ошибок.

Дайте мне знать, работает ли это для вас или нет.

Я просто удалил пользовательские настройки и переустановил Live Server.
Теперь он работает отлично! Благодарность

Сервер запущен на 5500, но не удалось открыть в браузере. Установлено расширение предварительного просмотра в браузере?

Сервер запущен на 5500, но не удалось открыть в браузере. Установлено расширение предварительного просмотра в браузере?

Сервер запущен на 5500, но не удалось открыть в браузере. Установлено расширение предварительного просмотра в браузере?

пожалуйста, все еще получаю эту проблему, перепробовал все

Это то, что я вижу, когда нажимаю эту опцию запуска в нижней панели. Однако предварительный просмотр браузера не запускается. Есть ли параметр, который мне нужно добавить в свой файл json? Как должен выглядеть файл jSON, чтобы он работал? Пожалуйста, помогите спасибо

Это то, что я вижу, когда нажимаю эту опцию запуска в нижней панели. Однако предварительный просмотр браузера не запускается. Есть ли параметр, который мне нужно добавить в свой файл json? Как должен выглядеть файл jSON, чтобы он работал? Пожалуйста, помогите спасибо

Та же проблема и здесь. Пожалуйста, дайте какое-нибудь решение!

Это то, что я вижу, когда нажимаю эту опцию запуска в нижней панели. Однако предварительный просмотр браузера не запускается. Есть ли параметр, который мне нужно добавить в свой файл json? Как должен выглядеть файл jSON, чтобы он работал? Пожалуйста, помогите спасибо

Та же проблема и здесь. Пожалуйста, дайте какое-нибудь решение!

Попробуйте запустить сервер на порту 80, так как вам не нужно вводить номер порта.

перейдите в браузер и введите localhost: 5500

Попробуйте запустить сервер на порту 80, так как вам не нужно вводить номер порта.

Значит, я должен вручную менять порт с 5500 на 80? Или есть какая-то техническая процедура.

Попробуйте запустить сервер на порту 80, так как вам не нужно вводить номер порта.
перейдите в браузер и введите localhost: 5500

Значит, я должен вручную менять порт с 5500 на 80? Или есть какая-то техническая процедура.

Может быть и другой способ, но я говорю вам простой способ сэкономить время 1. измените порт на 80 ИЛИ 2. введите localhost: 5500 в строке поиска вашего браузера.

Попробуйте запустить сервер на порту 80, так как вам не нужно вводить номер порта.
перейдите в браузер и введите localhost: 5500

Значит, я должен вручную менять порт с 5500 на 80? Или есть какая-то техническая процедура.

Может быть и другой способ, но я говорю вам простой способ сэкономить время 1. измените порт на 80 ИЛИ 2. введите localhost: 5500 в строке поиска вашего браузера.

Это тоже способ решить вашу проблему.

Попробуйте запустить сервер на порту 80, так как вам не нужно вводить номер порта.
перейдите в браузер и введите localhost: 5500

Значит, я должен вручную менять порт с 5500 на 80? Или есть какая-то техническая процедура.

Может быть и другой способ, но я говорю вам простой способ сэкономить время 1. измените порт на 80 ИЛИ 2. введите localhost: 5500 в строке поиска вашего браузера.

Это тоже способ решить вашу проблему.

Live server installed but not working in VS code

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?

22 Answers 22

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

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.

This will randomly pick an opened port each time. This is how my JSON file looks like:

If live server is not runnning and rendering html page on port 5500,for example http://127.0.0.1:5500/index.html not working.

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.

My local ip: http://192.168.2.16:5500/index.html is rendering changes on fly and working.

This works for anyone for whom live server is not running by default with port 5500.

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

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

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 👇

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.

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: «Go Live» не отображается.

«Go Live» не отображается.
Были ли какие-либо изменения в обновлении версии, поскольку он отображался всего несколько дней назад?

Команда «Открыть с помощью Live Server» отображает поле ввода, но не содержит указаний относительно того, что вводить.

живой сервер версии 5.0.0

Отобразилась кнопка «Go Live»!

Когда вы открываете проводник с помощью Ctrl + Sfhit + E и добавляете папку, отображается кнопка «Go Live»!

Похоже, проблема в том, что в моей рабочей области не было зарегистрировано ни одной папки.

Проблема была решена. Спасибо.

Все 33 Комментарий

@ tori-333 Нет, в commands/keybindings/menus нет изменений. Можете ли вы проверить свою консоль? Есть ли ошибка?

Ввод « http: // localhost : 5050 /» в команду «Открыть с помощью Live Server» вызовет длительную ошибку в консоли средства разработки.
Думаю, это только потому, что я не понимаю, как использовать эту команду.

console.ts: 136 [Extension Host] ПРЕДУПРЕЖДЕНИЕ: Обещание без обратного вызова ошибки
log.ts: 171 ERR Невозможно прочитать свойство uri из undefined: TypeError: невозможно прочитать свойство uri из undefined
в setOrChangeWorkspace.then.workspaceName (C: \ Users \ USERNAME.vscode \ extensions \ ritwickdey.liveserver-5.0.0 \ out \ src \ workspaceResolver.js: 46: 86)
в Object.g [как _notify] (c: \ Program Files \ Microsoft VS Code \ resources \ app \ out \ vs \ workbench \ node \ extensionHostProcess.js: 76: 971)
.
Я пропущу его, потому что он такой длинный.

Не знаю, по какой причине не отображается кнопка «Go Live».
Он отображается автоматически при редактировании файлов HTML, верно?

Извините, так как я не понимаю по-английски, это предложение перевел Гул.

Live-сервер не загружает файл css

У меня есть файл css, связанный с моим html файлом. Мой css не работает при загрузке html-файла через live-сервер.

CSS отлично работает при открытии html-файла непосредственно через браузер. У меня есть файл css вне каталога, где находится файл html. При использовании live-сервера для моего сценария npm в качестве запуска npm без каких-либо аргументов он просто показывает все файлы моей рабочей области, и css работает, если я нажимаю на каталог, в котором находится мой html-файл. Но если я добавлю html-файл в качестве аргумента для live-сервера, он загрузит только html-файл без каких-либо изменений css.

у всех одинаковые результаты. Только

работает, который показывает рабочий каталог в браузере. Я щелкаю домашний каталог, а затем загружается html-файл с css.

При вводе npm start из терминала мой html-файл нормально загружается в моем браузере, но по какой-то причине связанный файл css не загружается. Код ссылки css должен быть в порядке, поскольку он работает правильно при открытии непосредственно из браузера. Должен ли файл css находиться в том же каталоге?

Пожалуйста, проверьте атрибуты тега ссылки и правильность написания их значений. text\css никогда не загрузит файл css. Правильным является text/css (это косая черта ). Также попробуйте открыть html-файл из проводника и проверить, работает ли он.

Я смог заставить его работать, переустановив расширение живого сервера на vscode. Надеюсь это поможет!

Причина, по которой это происходит, мы можем увидеть из документации live-сервера:

The server is a simple node app that serves the working directory and its subdirectories.

В общем, при использовании live-сервера попробуйте создать публичный или удаленный каталог, в котором вы планируете хранить весь свой статический контент. Вот пример структуры каталогов, в которой машинописный текст компилируется в каталог dist/js, а sass — в каталог dist/css:

Затем вы можете запустить «live-server dist» — ключевым фактором является то, что я не прошу live-server смотреть за пределы каталога, который он обслуживает.

Вот документация live-сервера для получения дополнительной информации о параметрах конфигурации.

Не удается отладить в VSCode путем подключения к Chrome

У меня есть конфигурации по умолчанию в launch.json, сайт работает на порт 8080

Однако, когда я нажимаю кнопку «Отладка», я получаю эту ошибку:

Не удается подключиться к цели: connect ECONNREFUSED 127.0.0.1:9222

Вопрос1: почему VSCode назначает порт 9222 при создании этого json

Что такого особенного в этом порте, что MS решила поместить его в этот launch.json?

Вопрос 2. Что нужно изменить, чтобы все заработало?

6 ответов

Вам нужно установить расширение Debugger for Chrome, чтобы это работало. Открытые расширения в VS Code и поиск отладчика для Chrome

Выберите опцию Launch Chrome против localhost. Он запустит браузер, и вы можете установить точки останова в своем коде, и отладка должна работать.

Например «urlFilter»: «http://localhost:4200/*»

Полные точные шаги, чтобы предпринять:

настройте файл lanch.json так, чтобы он выглядел примерно так:

Закройте все открытые экземпляры Chrome (убедитесь, что все они убиты с помощью диспетчера задач в Windows).

убедитесь, что порт в этом параметре совпадает с портом, настроенным в свойстве ‘port’ атташе к конфигурации chrome в файле lunch.json (как в примере выше)

Вы можете добавить этот параметр в свойствах ярлыка Chrome:

Перейдите на свой сайт. В этом примере http: // localhost: 4200

Запустите «Начать отладку» в vscode.

Следующая процедура предназначена для приложений React, созданных create-react-app:

Нажмите кнопку Расширения на панели действий и установите расширение Debugger for Chrome, если оно еще не установлены.

В этой конфигурации ничего менять не нужно.

Добавьте в ту же папку новый файл с именем launchChrome.js со следующим содержанием:

Запустите приложение React из окна Терминала:

Через несколько секунд вы должны увидеть следующий текст:

В верхней части боковой панели выберите конфигурацию Attach to Chrome и нажмите зеленый треугольник.

В vscode есть новая отладка, которая еще не стабильна, но в настоящий момент работает по умолчанию в версии Insiders.

Он автоматически открывает новый экземпляр Chrome с отладкой для прикрепленных с этими настройками:

Live server installed but not working in VS code

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?

22 Answers 22

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

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.

This will randomly pick an opened port each time. This is how my JSON file looks like:

If live server is not runnning and rendering html page on port 5500,for example http://127.0.0.1:5500/index.html not working.

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.

My local ip: http://192.168.2.16:5500/index.html is rendering changes on fly and working.

This works for anyone for whom live server is not running by default with port 5500.

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

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

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 👇

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.

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.

how to run react app on vscode live server? #8920

Comments

chwasiq0569 commented Apr 28, 2020

The text was updated successfully, but these errors were encountered:

karthik1704 commented Apr 28, 2020 •

you don’t need vs code live server
if you use create-react-app to create react app
create react app comes with hot reloading development server

it will start development server with hot reloading
http://localhost:3000/

tip:
don’t use internet explorer
use chrome (it’s best, and good developing tool there) or Firefox,

jaslloyd commented May 5, 2020

@chwasiq0569 @karthik1704 is right you don’t need live server, live server is useful when you need to run or host static assets. Create react app has a built-in server you can either run npm start in your terminal or in vscode open «npm scripts» section in the sidebar and you can click the ‘start’ script and it will run create react app on a server.

vivekvt commented May 21, 2020

run npm start then by default your app will run on http://localhost:3000/
if you want to change the port number to 5500
then do this changes in package.json file scripts
by default it will be «start»: «react-scripts start»
Linux & MacOS «start»: «PORT=5500 react-scripts start»
Windows «start»: «set PORT=3006 && react-scripts start»

stale bot commented Jun 20, 2020

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

stale bot commented Jun 26, 2020

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

Hacking-NASSA-with-HTML commented Dec 18, 2020

theBigFU commented Jan 8, 2021

Just ran into this issue, and found the solution.

SamuelTelesSilva commented Feb 15, 2021

yellhtutmonetize4 commented May 23, 2021

olawaleoyedele commented Oct 23, 2021

I ran into the same issue but fixed it by just changing the live server port (5500) only to react app port (3000) leaving the remaining IP as generated by live server. For example, changing live server (xxx.x.x.x:5500/my_index.html_directory) to (xxx.x.x.x:3000/my_index.html_directory).

olawaleoyedele commented Oct 23, 2021

I ran into the same issue but fixed it by just changing the live server port (5500) only to react app port (3000) leaving the remaining IP as generated by live server. For example, changing live server (xxx.x.x.x:5500/my_index.html_directory) to (xxx.x.x.x:3000/my_index.html_directory).

NOTE: The change only happens in your browser address bar.
The previous answers are all perfect too. You don’t need live server but if you must use it, just change the port from 5500 to 3000.

Где установить значение liveServer.settings.port в расширении живого сервера кода Visual Studio

Я работаю над Angular7 с визуальным редактором кода студии URL: http: // localhost: 4200 (работает нормально)

«Ошибка на порту 5500. Пожалуйста, попробуйте изменить порт через настройки или сообщите на GitHub.»

Итак, я открыл Файл-> Настройки-> Настройки-> LiveServerConfig и пытался изменить порт в файле settings.json

Я иду в правильном направлении или я что-то упустил? Я не уверен, как изменить номер порта 5500 на 0, так как я хочу случайный номер порта.

2 ответа

Также я поставил следующий код:

Но спасибо Дэнни

Надеюсь, это поможет: в settings.json добавьте следующую строку.

Значение 0 (ноль) используется для случайного порта. Любые другие номера предназначены для фиксированного номера порта.

Невозможно отладить в VS Code, подключившись к Chrome

У меня есть конфигурация по умолчанию в launch.json. Сайт работает на порту 8080.

Однако когда я нажимаю кнопку «Отладка», я получаю такую ​​ошибку:

Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

Вопрос 1: почему VS Code назначает порт 9222 при создании этого json?

Что такого особенного в этом порте, что MS решила поместить его в файл launch.json?

Вопрос 2: Что мне нужно изменить, чтобы все заработало?

Чтобы это работало, вам необходимо установить расширение Debugger for Chrome. Откройте расширения в VS Code и найдите отладчик для Chrome.

Выберите параметр «Запустить Chrome на локальном хосте». Он запустит браузер, и вы сможете установить точки останова в своем коде, и отладка должна работать.

При использовании конфигурации url vscode будет искать вкладку с ТОЧНЫМ URL-адресом и прикрепляться к ней, если она найдена.

например «urlFilter»: «http://localhost:4200/*»

Полные и точные шаги, которые необходимо предпринять:

настройте файл launch.json, чтобы он выглядел примерно так:

Закройте все открытые экземпляры Chrome (убедитесь, что все они убиты с помощью диспетчера задач в Windows).

Убедитесь, что порт в этом параметре такой же, как и порт, настроенный в свойстве ‘port’ конфигурации attache to chrome в файле launch.json (как в примере выше).

Вы можете добавить этот параметр в свойства ярлыка Chrome:

Щелкните правой кнопкой мыши файл ярлыка и выберите свойства.

Привязать его к Target собственности, например

Перейдите на свой сайт. В этом примере http: // localhost: 4200

Запустите «Начать отладку» в VS Code.

Я столкнулся с этим вопросом, когда искал помощи при использовании конфигурации «Присоединиться к Chrome» в VSCode. Хотя принятый ответ дал мне несколько подсказок, мне пришлось еще покопаться. Вот шаги, которые сработали для меня на тот случай, если кто-то сочтет их полезными:

Установите расширение Debugger for Chrome в VSCode

Обслуживайте свои файлы с помощью веб-сервера по вашему выбору

В этом новом окне Chrome перейдите по URL-адресу, на котором размещен ваш веб-сервер (например, http: // localhost: 8080).

В VSCode добавьте в launch.json файл конфигурацию, которая выглядит следующим образом:

Нажмите кнопку воспроизведения в VSCode с параметром «Присоединить к Chrome», выбранным в раскрывающемся списке.

Для полноты картины вот как вы запускаете Chrome с включенной удаленной отладкой ( из отладчика для Chrome README ):

VS Code имеет новую отладку, которая еще нестабильна, но на данный момент работает по умолчанию в версии для инсайдеров.

Он автоматически открывает новый экземпляр Chrome с отладкой для прикрепленных со следующими настройками:

Как и любой другой прикрепленный файл, вы можете запустить отладку в любое время в этом новом окне, открытом VS Code. Или вы можете запустить Chrome в качестве режима отладки ранее, чтобы код VS не открывал новое окно отладки, как @quicklikerabbit answer https://stackoverflow.com/a/51392142/7050878, но на этот раз без необходимости в параметре URL.

Следующая процедура предназначена для приложений React, созданных с помощью create-react-app :

В этой конфигурации ничего менять не нужно.

Добавьте новый файл с именем launchChrome.js в ту же папку со следующим содержимым:

Запустите приложение React из окна Терминала:

Через несколько секунд вы должны увидеть следующий текст:

В верхней части боковой панели выберите конфигурацию Attach to Chrome и нажмите зеленый треугольник.

Я вложу свои жалкие два цента 🙂 к сожалению или к счастью, у меня была аналогичная проблема, и вышеупомянутый пост указал мне в правильном направлении, и я кое-что узнал по пути. Пожалуйста, смотрите мои заметки ниже:

1) Если вы работаете в Linux, после запуска vsCode выполните следующую команду Linux:

это позволит вам увидеть, какие порты используются, в моем случае вы можете увидеть код на 5500.

2) Предполагая, что у вас есть тестовый код html / js, а в vsCode установлены сервер и отладчик, необходимо настроить следующие файлы как таковые:

файл кода рабочей области:

launch.json:

setting.json:

6) Примечание. Убедитесь, что вы находитесь в файле, который хотите отладить. Мы почти закончили, теперь просто нажмите на значок «Отладка», затем перейдите к ЗЕЛЕНУЮ кнопку воспроизведения и выберите вариант присоединения из раскрывающегося списка. Обратите внимание, что информация, настроенная в файле launch.js, будет отображаться в раскрывающемся списке.

7) Время действовать! Теперь все, что вам нужно сделать, это нажать ЗЕЛЕНУЮ кнопку воспроизведения, и отладчик присоединится к вкладке, которую вы открыли по адресу 127.0.0.1:5500/ путь к вашему файлу>, и выполните отладку на порту 127.0.0.1:9222.

Live server installed but not working in VS code

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?

22 Answers 22

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

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.

This will randomly pick an opened port each time. This is how my JSON file looks like:

If live server is not runnning and rendering html page on port 5500,for example http://127.0.0.1:5500/index.html not working.

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.

My local ip: http://192.168.2.16:5500/index.html is rendering changes on fly and working.

This works for anyone for whom live server is not running by default with port 5500.

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

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

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 👇

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.

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.

Live server installed but not working in VS code

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?

22 Answers 22

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

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.

This will randomly pick an opened port each time. This is how my JSON file looks like:

If live server is not runnning and rendering html page on port 5500,for example http://127.0.0.1:5500/index.html not working.

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.

My local ip: http://192.168.2.16:5500/index.html is rendering changes on fly and working.

This works for anyone for whom live server is not running by default with port 5500.

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

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

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 👇

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.

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.

I right-click my file in the Explorer as instructed, but «Open With Live Server» doesn’t show. I’ve even tried right-clicking the tab and that doesn’t work either. I’ve quit and re-started VSCode and that didn’t work. I set Chrome as my default browser in settings.json and that didn’t work. I double checked to make sure Live Server is installed and enabled globally and it is. Please help me figure out what’s going on! Thank you!

2 Answers 2

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Oh! I figured it out. I had to open my file by selecting «Open Folder» and then open my folder from there. Then I was able to select my file under the Explorer tab and right-click to open with Live Server. I’m not sure why it worked that way.

It’s happened to me few times. My problem was the folder and files names. Check those names and don’t use spaces or weird characters.

Не работает live server vs code

#html #css #visual-studio-code #browser #flexbox

Вопрос:

Я создал статическую страницу, используя HTML и CSS в коде vs. Все работает нормально, когда я просматриваю страницу в VS COde live server, которая открывает Mozilla firefox (который я установил по умолчанию для live server). Hower изображения не загружаются при просмотре файла (index.html) в других браузерах. Я проверил, чтобы проверить элемент, в котором говорится, что не удалось загрузить ресурс: net::ERR_FILE_NOT_FOUND введите описание изображения здесь

Комментарии:

1. Как вы получаете доступ к нему в других браузерах?

2. Пожалуйста, @Huzaifa добавьте реальный код quotes вместо изображения.

Ответ №1:

пожалуйста, предоставьте нам структуру каталогов, чтобы мы могли вам лучше помочь.

Комментарии:

Ответ №2:

Это не имеет никакого отношения к выбору браузера.

В одном из ваших сообщений об ошибке говорится, что он пытается загрузить файл с вашего диска D:.

Относительные URL-адреса будут разрешаться в разных местах, когда HTML-документ загружается из разных мест.

URL-адрес сервера ( http://localhost:somePort/ ) и URL-адрес локального файла ( file://something ) будут отличаться.

Вам всегда нужно загружать HTML-документ с URL-адреса, предоставленного сервером. Вы не можете просто открыть файл из своей локальной файловой системы.

php file not working live #35

Comments

abhiinos111abhi commented Oct 28, 2017 •

https://imgur.com/stJzoBS
and also open with live server option is not coming
https://imgur.com/Vi6NsFx

The text was updated successfully, but these errors were encountered:

ritwickdey commented Oct 28, 2017

Note: live Server will not able to compile you dynamic pages, you’ve to use the existing server, live server will help you to reload the pages when you made any change on your code, so that you have not to reload manually browser on every changes

It needs a different extension

wendellsheh commented Dec 22, 2017

When i use ajax only set the ‘type: GET’ can work

ritwickdey commented Dec 23, 2017

Hi @wendellsheh, sorry! What you actually meant?

rjoydip-zz commented May 20, 2018 •

@abhiinos111abhi Please try with @ritwickdey ‘s procedure. That’s the perfect solution. Thanks for reporting.

Почему живой сервер VS code открывает каталог, а не запускает код в браузере?

Я использую код VS для реакции. У меня установлено расширение живого сервера, и всякий раз, когда я пытаюсь запустить код VS, он показывает мне список каталогов со всеми моими папками и файлами в браузере вместо запуска моего приложения. Любая подсказка, почему он это делает?

Вам необходимо предоставить файл index.html в открытом каталоге. Он должен быть назван именно так (‘index.html’)

У вас должна быть специальная папка для файла (index.html), чтобы запускать код непосредственно в браузере с сервера VS code Live.

LiveServer загрузит файл из папки в РАБОЧЕЙ ОБЛАСТИ, назначенной ему.

Поэтому укажите правильную папку и, что более важно, ЗАКРЫТЬ активные рабочие столы, уже открытые с помощью LiveServer.

Так. Откройте Проводник в VSC и закройте все открытые «Рабочие области» (сохраните свою работу).

Выберите правильный файл index.html в новой рабочей области.

Как только он укажет на нужный файл, просто щелкните правой кнопкой мыши и выберите «открыть с помощью LiveServer».

Он должен работать.

Только что была эта ошибка, вы должны открыть папку, используя «открыть папку». Теперь он будет в панели редактора. И когда вы выходите в эфир, вы попадаете во все, что находится на панели редактора.

Это простое решение. Спасибо, это решило мою проблему.

Изначально все работало ок.
Через некоторое время перестал работать live server.
Перезагрузка самой студии, компа и переустановка плагина не принели положительного результата.
Подскажите пожалуйста

CCNA Discovery Live CD Server-где найти
Очень часто упоминается в курсах CCNA Discovery. Но нигде не могу найти этот самый iso-образ Может.

Live CD не работает мышь
Live CD не работает мышь с чем это может быть связанно? При загрузки ОС некоторые мыши работают но.

Не работает live(‘scroll’, handler)
Всем привет! Не могу заставить работать live() с событием прокрутки страницы. Может кто.

Live usb linux mint работает, а установленная нет
Дело в том, что линукс минт (с которой я сейчас собственно и сижу) работает только с флешки, а.

Аудиокарта Creative SB Live! 24 bit работает только после перезагрузки
Добрый день подскажите как решить ситуацию. Поставил на комьютер (Винда 7к/64 проц i3-540, мать.

Aimp 3.55.1307 не работает с дровами KX Project 3550 на Creative SB Live! 0220
Здравствуйте, У меня звуковая карта Creative SB Live! 5.1 Digital (SB0220) Sound Card SB0220.

Visual studio code. Как настроить автообновление браузера?

Как настроить автообновление браузера? Есть ли какие-то аналоги live reload.

2 ответа 2

Все. Без галпа и всего прочего у вас будут обновляться страницы при изменении файлов. При изменении css обновление происходит без перезагрузки страницы.

Самый быстрый способ:

Можно пользоваться. Открываете папку с проектом, нажимаете внизу Go Live или пкм + Open with Live Server.

Преимущества именно сервера объяснять думаю не нужно.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками visual-studio-code или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Отладчик Visual Studio Code с Chrome отказался подключаться к localhost

Я перепробовал уже несколько предложений по другим постам безрезультатно.

У меня есть 9-месячный проект, который больше не показывает в браузере из отладки по F5 в vs code.

Я настроил совершенно новый простой проект с файлом index.html, чтобы попытаться получить Visual Studio code, чтобы запустить его в окне браузера Chrome.

Я продолжаю получать страницу ошибки в хроме, которая гласит:

This site can’t be reached localhost refused to connect. Did you mean http://localhost8000.com/? Search Google for localhost 8000 ERR_CONNECTION_REFUSED

Любая помощь была бы очень признательна!

9 ответов

Если у кого еще возник данный вопрос, я решил его путем:

1) установки ритвикдей/vscode-live-server доступного тут: vscode-live-server link

2) перезапуска vscode

3) нажатия кнопки Go Live внизу экрана

4) получения адреса сервера из полученного окна Chrome (ex: http://localhost:5500/)

6) создания(или редактирования) файла settings.json со следующим json:

7) переключения в отладочной панели vscode слева и нажатия зеленой стрелкой рядом с «Launch Chrome against localhost»

Надеюсь это кому-то еще поможет!

Если у вас нет веб-сервера, то можно просто поменять опцию «webroot» на «file», и убрать опцию «url», вот так:

Для других, использующих VS code для отладки Vue это могло быть так же просто:

У вас должен быть запущен ваш проект до того, как вы начнете отладку. Вопреки тому, что бы думал пользователь, нажатие кнопки play не запускает ваш проект. Оно как раз запускает отладчик. Решением для меня (используя yarn) был запуск «yarn serve» до запуска отладчика. Может быть это очевидно!

Это работает с моим случаем.

Я использую laragon для windows, чтобы хостить мои веб-сайты локально. Для себя мне просто нужно было поменять URL на laragon url и это нормально работало

Я использую chrome developer edition, вот такая конфигурация, которая у меня сработала:

Заметьте, что это работает для экспериментального JS, но для react, vue, или продакшн окружения это, вероятно, вас не устроит.

Я не могу запустить отладчик на Visual Studio Code и также расширение CORS на chrome, он просто не появляется как когда я консольно запускаю yarn. Есть ли какой-то способ указать, что я хочу чтобы при отладке было включено расширение CORS на Chrome? Это мой launch.json: < version: 0.2.0.

Для меня я использовал код ниже установленного расширения chrome для javascript и он отрабатывал нормально

Похожие вопросы:

Я работаю над несколькими проектами одновременно, и для одного из них хочу использовать Chrome Canary для отладки своего приложения в Visual Studio Code. Так для Stable Chrome у меня есть < name.

Получаю issue на открытие службы WCF в браузере с localhost:8733. Там написано что This site can’t be reached localhost отказался подключаться. Поискал в гугле по адресу localhost 8733 Home Search.

У меня на данный момент есть следующий launch.json в моем приложении Visual Studio Code. < version: 0.2.0, configurations: [ < type: node, request: launch, name: Launch Program, program.

Я не могу запустить отладчик на Visual Studio Code и также расширение CORS на chrome, он просто не появляется как когда я консольно запускаю yarn. Есть ли какой-то способ указать, что я хочу чтобы.

Я использую Wamp64 с файлом text.php в android_connect в рамках www в wamp64 папке на системе Windows 7 (64-bit). Однако на типизацию localhost/android_connect/text.php в обоих Chrome и Internet.

Live-сервер не загружает файл css

У меня есть файл css, связанный с моим html файлом. Мой css не работает при загрузке html-файла через live-сервер.

CSS отлично работает при открытии html-файла напрямую через браузер. У меня есть файл css вне каталога, где находится файл html. При использовании live-сервера для моего сценария npm в качестве запуска npm без каких-либо аргументов он просто показывает все файлы моей рабочей области, и css работает, если я нажимаю на каталог, в котором находится мой html-файл. Но если я добавлю html-файл в качестве аргумента для live-сервера, он загрузит только html-файл без каких-либо изменений css.

у всех одинаковые результаты. Только

работает, который показывает рабочий каталог в браузере. Я щелкаю домашний каталог, а затем загружается html-файл с css.

При вводе npm start из терминала мой html-файл нормально загружается в моем браузере, но по какой-то причине связанный файл css не загружается. Код ссылки css должен быть в порядке, поскольку он работает правильно при открытии непосредственно из браузера. Должен ли файл css находиться в том же каталоге?

Вы должны включить свои стили в файл src/angular.json под объектом «styles».

@TheUnKnown Я не использую Angular.

Тогда, пожалуйста, объясните, какой стек вы используете и как вы запускаете сервер, используя npm, если он не угловой.

@TheUnKnown Нет. Я решил не использовать React для этого сайта. Вот почему я использую live-сервер вместо встроенного в React запуска npm. Я мог бы просто поместить файлы html и файл css в один и тот же каталог, если нет лучшего способа.

Пожалуйста, проверьте атрибуты тега ссылки и правильность написания их значений. текст\css никогда не загрузит файл css. Правильно текст/CSS (это косая черта). Также попробуйте открыть html-файл из проводника и проверить, работает ли он.

Все работает на производстве. Только не на лайв-сервере.

Я смог заставить его работать, переустановив расширение живого сервера на vscode. Надеюсь это поможет!

Причина, по которой это происходит, мы можем увидеть из документации live-сервера:

The server is a simple node app that serves the working directory and its subdirectories.

В общем, при использовании live-сервера попробуйте создать общедоступный или удаленный каталог, в котором вы планируете хранить весь свой статический контент. Вот пример структуры каталогов, в которой машинописный текст компилируется в каталог dist/js, а sass — в каталог dist/css:

Затем вы можете запустить «live-server dist» — ключевым фактором является то, что я не прошу live-server смотреть за пределы каталога, который он обслуживает.

Вот живой сервер документация для получения дополнительной информации о параметрах конфигурации.

спасибо за решение сработало для меня. Я использовал Windows, а затем просто добавил команду live-server ‘foldername’

Live server installed but not working in VS code

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?

22 Answers 22

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

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.

This will randomly pick an opened port each time. This is how my JSON file looks like:

If live server is not runnning and rendering html page on port 5500,for example http://127.0.0.1:5500/index.html not working.

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.

My local ip: http://192.168.2.16:5500/index.html is rendering changes on fly and working.

This works for anyone for whom live server is not running by default with port 5500.

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

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

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 👇

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.

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.

Почему живой сервер VS code открывает каталог вместо запуска кода в браузере?

Я использую код VS для реакции. У меня установлено расширение live server, и всякий раз, когда я пытаюсь запустить код VS, оно показывает мне каталог со всеми моими папками и файлами в браузере вместо запуска моего приложения. Есть какие-нибудь подсказки относительно того, почему он это делает?

Вам необходимо предоставить файл index.html в открытом каталоге. Он должен называться именно так. (‘Index.html’)

LiveServer загрузит файл из папки в назначенное ему РАБОЧЕЕ МЕСТО.

Итак, укажите правильную папку и, что более важно, ЗАКРОЙТЕ активные рабочие столы, уже открытые с помощью LiveServer.

Задайте правильный файл index.html в новой рабочей области.

Как только он укажет на нужный файл, просто щелкните правой кнопкой мыши и выберите «Открыть с помощью LiveServer».

Не работает #2374

Comments

sany2801 commented Mar 7, 2022

Issue Type: Performance Issue

Вообще ни как не реагирует. Браузер не открывается. В правом нижнем углу раньше был написан хост (Go Live). сейчас там ничего нет.
Переустановка плагина, смена версии не помогла

Extension version: 5.3.1
VS Code version: Code 1.64.2 (f80445acd5a3dadef24aa209168452a3d97cc326, 2022-02-09T22:02:28.252Z)
OS version: Windows_NT x64 10.0.19043
Restricted Mode: No

System Info

Process Info

The text was updated successfully, but these errors were encountered:

Live server installed but not working in VS code

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?

22 Answers 22

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

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.

This will randomly pick an opened port each time. This is how my JSON file looks like:

If live server is not runnning and rendering html page on port 5500,for example http://127.0.0.1:5500/index.html not working.

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.

My local ip: http://192.168.2.16:5500/index.html is rendering changes on fly and working.

This works for anyone for whom live server is not running by default with port 5500.

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

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

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 👇

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.

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.

Как просмотреть мой HTML-код в браузере с помощью Visual Studio Code?

Как просмотреть мой HTML-код в браузере с новым кодом Microsoft Visual Studio?

с Notepad++ у вас есть возможность запускать в браузере. Как я могу сделать то же самое с кодом Visual Studio?

19 ответов:

для Windows-Откройте браузер по умолчанию-протестировано на VS Code v 1.1.0

ответьте как на открытие определенного файла (имя жестко закодировано), так и на открытие любого другого файла.

действия:

использовать ctrl + shift + p (или F1 ), чтобы открыть палитру команд.

тип Настройка Task Runner. Выбрав его откроется элемент задач.json. Удалите отображаемый скрипт и замените его следующим:

Не забудьте изменить раздел» args » задач.json-файл с именем вашего файла. Это всегда будет открывать этот конкретный файл, когда вы нажмете F5.

вернитесь к своему html-файлу (в этом примере это «текст.html»), и нажмите ctrl + shift + b для просмотра страницы в веб-браузере.

@InvisibleDev-чтобы получить эту работу на mac пытается использовать это:

Если у вас уже открыт chrome, он запустит ваш html-файл на новой вкладке.

Если вы хотите иметь live reload, вы можете использовать gulp-webserver, который будет следить за изменениями вашего файла и перезагружать страницу, таким образом, вам не нужно нажимать F5 каждый раз на Вашей странице:

вот как это сделать:

открыть командную строку (cmd) и введите

введите Ctrl + Shift+P в VS код и тип Настройка Task Runner. Выбрать ее и нажмите enter. Это откроет задачи.файл JSON для вас. Удалить все из него конец введите только следующий код

задач.json

gulpfile.js

веб-сервер Теперь откройте вашу страницу в браузере по умолчанию. Теперь любые изменения, которые вы будете делать для ваших HTML или CSS страниц будут автоматически перезагружены.

вот информация о том, как настроить ‘gulp-webserver’ например порт, и какая страница для загрузки.

вы также можете запустить свою задачу, просто введя Ctrl+P и типа задач веб-сервера

VS код имеет Live Server Extention которые поддерживают запуск одним щелчком мыши из строки состояния.

теперь вы можете установить расширение Просмотр В Браузере. Я тестировал его на windows с chrome, и он работает.

версия vscode: 1.10.2

в Linux, вы можете использовать xdg-open команда для открытия файла в браузере по умолчанию:

вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш:

если вы просто на Mac это tasks.json file:

. это все, что вам нужно, чтобы открыть текущий файл в Safari, предполагая, что его расширение «.формат HTML.»

если вы хотите, чтобы он открылся в Chrome, то:

это будет делать то, что вы хотите, как при открытии в новой вкладке, если приложение уже открыто.

Я просто повторно публикую шаги, которые я использовал от msdn блог. Это может помочь сообществу.

1. Установите Узел.js

если еще не установлен, сделать это здесь

он поставляется с npm (пакет менеджер по приобретению и управлению библиотеками разработки)

2. Создайте новую папку для вашего проекта

где-то на диске, создайте новую папку для вашего веб-приложения.

3. Добавьте пакет.JSON-файл в папку проекта

затем скопируйте/вставьте следующий текст:

4. Установите веб-сервер

в окне терминала (командная строка в Windows) откройте папку проекта, выполните следующую команду:

это установит lite-сервер (определенный в пакете.json), статический сервер, который загружает индекс.HTML в браузере по умолчанию и автоматически обновляет его при изменении файлов приложений.

5. Запустите локальный веб-сервер!

(если у вас есть индекс.HTML-файл в папке проекта).

в том же окне терминала (командная строка в Windows) запустите это команда:

Подождите секунду и индекс.html загружается и отображается в браузере по умолчанию, обслуживаемом вашим локальным веб-сервером!

lite-сервер следит за вашими файлами и обновляет страницу, как только вы вносите изменения в любые файлы html, js или css.

и если у вас есть VS-код, настроенный для автоматического сохранения (меню File / Auto Save), вы видите изменения в браузере при вводе!

Примечания:

вот и все. Теперь перед любым сеансом кодирования просто введите npm start и вы хорошо идти!

цитата здесь на msdn блог. Кредиты идут автору: @Laurent Duveau

если вы вводите > он покажет вам показывать и запускать команды

или в вашем случае с HTML, я думаю F5 после открытия командной палитры следует открыть отладчик.

открытие файлов в браузере Opera (на 64 битах Windows). Просто добавьте эти строки:

обратите внимание на формат пути на «команды»: линии. Не используйте «C:\path_to_exe\runme.формат exe».

чтобы запустить эту задачу, откройте html-файл, который вы хотите просмотреть, нажмите F1, введите task opera и нажмите enter

мой скрипт бегуна выглядит так:

и это просто открыть мой проводник, когда я нажимаю ctrl shift b в моем индексе.html файл

вот как вы можете запустить его в нескольких браузерах для Windows

обратите внимание, что я ничего не набирал в args для edge, потому что Edge-это мой браузер по умолчанию, просто дал ему имя файла.

для Mac-открывается в Chrome-тестируется на VS Code v 1.9.0

введите Configure Task Runner, в первый раз, когда вы это сделаете, VS Code даст вам меню прокрутки вниз, если он выберет «другое.»Если вы делали это раньше, VS Code просто отправит вас прямо в задачи.формат JSON.

один раз в задачах.файл json. Удалите отображаемый скрипт и замените его следующим:

один клик решение просто установить открыть в браузере расширения из Visual Studio marketplace.

Перестал работать Live Sass Compiler в Visual Studio Code

Я не все проекты собираю в Галпе, простые чаще всего компилирую прямо в VS Code. Но в этот раз все пошло не по плану.

VS Code: Хост-процессор расширений неожиданно завершил работу

Оказалось, проблема в расширении Live Sass Compiler от Ритвика Дея — оно не обновлялось с 2018 года, и удивительно, что работало вообще. В ветке расширения на гитхабе выяснилось, что на маркетплейсе Visual Studio имеется одноименный форк этого расширения от другого разработчика Гленна Маркса — Live Sass Compiler. В отличие от первого, оно не такое популярное и имеет гораздо меньше скачиваний. Но зато прекрасно заводится на Big Sur 11.2.3, проверил лично.

Решение как-то тяжело гуглилось.
Поэтому, решил зафиксировать у себя, возможно кому-то поможет.

Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.

JS файл не загружается на Live Server в VS Code

Я начинаю использовать VS Code, поэтому у меня нет большого опыта работы с ним. Похоже, мне нужно добавить все, что мне нужно, вручную. Исходя из Visual Studio, это немного странно в начале, хотя я вижу преимущества.

Я выбрал Live Server ( https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) в качестве веб-сервера для своих проектов, над которыми я буду работать в коде Visual Studio. Не уверен, что это хороший выбор, но его высоко оценили.

Вот проблема у меня: когда я запускаю Live Server, я могу подтянуть html файл в корне, но Live Server отказывается загружать bundle.js файл, который также находится в корневой папке.

Когда я запускаю инструменты разработчика в Chrome, я вижу следующее, но когда я захожу в настоящую папку, я вижу, что файл там.

Есть идеи, почему это происходит и как это решить?

5 ответов

Этот вопрос может быть старым, но я столкнулся с той же проблемой при переходе с XAMPP на расширение Live Server. Теги скрипта нормально загружались в XAMPP, но выдавали 404 на Live Server. Проблема оказывается в формате относительного пути.

Ошибка: не удается запустить отладку на веб-сервере

Что такое подробное сообщение об ошибке?

Сообщение Unable to start debugging on the Web server является универсальным. Обычно строка ошибки содержит более конкретное сообщение, которое может помочь вам определить причину проблемы или подобрать более подходящее исправление. Вот несколько самых распространенных сообщений об ошибках, добавляемых к основному сообщению об ошибке.

В IIS не указан веб-сайт, соответствующий URL-адресу запуска

Перезапустите Visual Studio от имени администратора и повторите запуск отладки. (Некоторые сценарии отладки ASP.NET требуют повышенных привилегий.)

Вы можете настроить Visual Studio так, чтобы он всегда запускался от имени администратора. Для этого щелкните значок ярлыка Visual Studio правой кнопкой мыши, выберите Свойства > Дополнительно, а затем установите флажок «Всегда запускать от имени администратора».

Веб-сервер настроен неправильно

Не удалось подключиться к веб-серверу

Вы запускаете Visual Studio и веб-сервер на одном компьютере и выполняете отладку, нажимая клавишу F5 (а не с помощью команды Присоединиться к процессу)? Откройте свойства проекта и убедитесь, что в настройках проекта указан правильный веб-сервер и URL-адрес запуска. (Откройте Свойства > Интернет > Серверы или Свойства > Отладка в зависимости от типа проекта. Для проекта Web Forms откройте Страницы свойств > Параметры запуска > Сервер.)

Если это не так, перезапустите пул приложений, а затем выполните сброс IIS. Дополнительные сведения см. в статье Проверка конфигурации IIS.

Веб-сервер не ответил вовремя

Вероятно, монитор удаленной отладки Microsoft Visual Studio (msvsmon.exe) не запущен на удаленном компьютере

Удаленный сервер вернул ошибку

Проверьте, не содержит ли файл журнала IIS подкоды ошибок и дополнительные сведения, и изучите эту запись блога IIS 7.

Некоторые распространенные коды ошибок и рекомендации также приводятся ниже.

Не удалось запустить отладку ASP.NET

Отладчику не удалось подключиться к удаленному компьютеру

Если выполняется локальная отладка, откройте свойства проекта в Visual Studio и убедитесь, что в настройках проект указан правильный веб-сервер и URL-адрес для подключения. (Откройте Свойства > Интернет > Серверы или Свойства > Отладка в зависимости от типа проекта.)

Также, если вы используете файл HOSTS, убедитесь, что он настроен правильно. Например, в файле HOSTS должен быть указан тот же URL-адрес проекта, что и в свойствах проекта (Свойства > Интернет > Серверы или Свойства > Отладка в зависимости от типа проекта).

Сведения об общих ошибках конфигурации см. в справке. Дополнительные сведения могут быть получены при выполнении веб-страницы вне отладчика.

Вы запускаете Visual Studio и веб-сервер на одном компьютере? Откройте свойства проекта и убедитесь, что в настройках проекта указан правильный веб-сервер и URL-адрес запуска. (Откройте Свойства > Интернет > Серверы или Свойства > Отладка в зависимости от типа проекта.)

Если это не поможет или отладка выполняется удаленно, выполните действия, описанные в разделе Проверка конфигурации IIS.

Неподдерживаемая операция. Неизвестная ошибка: номер ошибки

Если выполняется переопределение URL-адресов, протестируйте базовый файл web.config без переопределения URL-адресов. См. примечание о модуле переопределения URL-адресов в разделе Проверка конфигурации IIS.

Проверьте конфигурацию IIS

Остановите и перезапустите пулы приложений IIS, а затем попробуйте еще раз.

Возможно, пул приложений остановился в результате ошибки. Кроме того, остановка и перезапуск пула приложений могут потребоваться из-за другого изменения, внесенного вами в конфигурацию.

Если пул приложений продолжает останавливаться, удалите модель переопределения URL-адресов через панель управления и установите ее повторно с помощью установщика веб-платформы (WebPI). Эта проблема может возникать после значительного обновления системы.

Проверьте конфигурацию пула приложений, исправьте ее при необходимости и попробуйте еще раз.

Пул приложений может быть настроен для версии ASP.NET, которая не соответствует проекту Visual Studio. Обновите версию ASP.NET в пуле приложений и перезапустите его. Дополнительные сведения см. в разделе IIS 8.0 — использование ASP.NET 3.5 и ASP.NET 4.5.

Убедитесь, что папка веб-приложения имеет нужные разрешения.

Убедитесь, что вы предоставили IIS_IUSRS, IUSR или пользователю, связанному с пулом приложений, права на чтение и выполнение файлов в папке веб-приложения. Устраните проблему и перезапустите пул приложений.

Убедитесь, что в IIS установлена правильная версия ASP.NET.

Описанная проблема может быть вызвана несовпадением версий ASP.NET в IIS и в проекте Visual Studio. Возможно, потребуется задать версию платформы в файле web.config. Чтобы установить ASP.NET в IIS, используйте установщик веб-платформы (WebPI). См. также разделы IIS 8.0 — использование ASP.NET 3.5 и ASP.NET 4.5 или Размещение в Windows с помощью IIS (для ASP.NET Core).

Устраните ошибки проверки подлинности, если используется только IP-адрес

По умолчанию предполагается, что IP-адреса являются частью Интернет-зоны, и проверка подлинности NTLM для них не выполняется. Если настройки веб-сайта в IIS требуют обязательной проверки подлинности, проверка подлинности завершается ошибкой. Чтобы решить эту проблему, укажите вместо IP-адреса имя удаленного компьютера.

Другие причины

Если проблема не в конфигурации IIS, попробуйте выполнить следующие действия.

Перезапустите Visual Studio с правами администратора и попробуйте еще раз.

Некоторые сценарии отладки ASP.NET, такие как применение веб-развертывания, требуют повышенных привилегий для Visual Studio.

Если выполняются сразу несколько экземпляров Visual Studio, откройте проект в другом экземпляре Visual Studio (с правами администратора) и попробуйте еще раз.

Если вы используете файл HOSTS с локальными адресами, попробуйте использовать вместо IP-адреса компьютера петлевой адрес.

Если вы не используете локальные адреса, убедитесь, что в файле HOSTS указан тот же URL-адрес проекта, что и в свойствах проекта (Свойства > Интернет > Серверы или Свойства > Отладка в зависимости от типа проекта).

Дополнительные действия по устранению неполадок

Откройте страницу localhost в браузере на сервере.

Browser Does Not Open After Going Live #13

Comments

matt-zhrani commented Aug 19, 2017

I am running Ubuntu on Virtual Box. After installing the extension on VS Code and hitting Go Live,
it prompt me with two messages: one is: «Server is started», the other is: «Error to open browser. See error on console».
Please note that the server is successfully started and I verified that it is working by typing the IP Address on my Google Chrome.

The text was updated successfully, but these errors were encountered:

ritwickdey commented Aug 19, 2017

Yep! I’ve just noticed that it is not working in linux but no such issue in Windows.

Btw, Thanks a lot for report on GitHub repo. 🙂

matt-zhrani commented Aug 19, 2017

You are very welcome.
So I updated my installation after you pushed the fix.
This time I am getting this error message: «Server is started at 5500 but failed to open browser. See error on console.»

ritwickdey commented Aug 19, 2017

let me know that after doing so, are you still facing the issue?

matt-zhrani commented Aug 19, 2017

It works well now!
Thank you for your quick help

ritwickdey commented Aug 20, 2017

Please remove liveServer.settings.CustomBrowser: chrome and Try v1.6.11. Hope it will open system’s default browser without giving any error.

Let me know if it works for you or not.

matt-zhrani commented Aug 21, 2017

I just removed the custom settings and reinstalled Live Server.
It works perfectly now! thanks

muhayminul96 commented Jul 9, 2019

Server is started at 5500 but failed to open in Browser Preview. Got Browser Preview extension installed?

patelrohan750 commented Oct 4, 2019

Server is started at 5500 but failed to open in Browser Preview. Got Browser Preview extension installed?

rejoanafridi commented Jun 10, 2020

VS-code-live-server-problem-solve.. windows 10

Server is started at 5500 but failed to open in Browser Preview. Got Browser Preview extension installed?

step 1- open vs code go to extension (ctrl+shift+x) then search live server then go to live server manage / extension setting then + Edit in setting.json
step 2- «liveServer.settings.useBrowserPreview»: true, [ if u see that line u need to replace true to false ]. «liveServer.settings.useBrowserPreview»: false,
your problem is solved! enjoy vs code 🙂

BIRBAHADUR07 commented Dec 25, 2020

please still getting this problem tried everything

BrianJ-27 commented Mar 17, 2021 •

This is what i see when i click this the go live option in the bottom bar. However it doesn’t trigger the browser preview. Is there a setting i need to add in my json file? What should the jSON file look like for it to work? Please help thanks

suryauppalapati commented Mar 18, 2021

This is what i see when i click this the go live option in the bottom bar. However it doesn’t trigger the browser preview. Is there a setting i need to add in my json file? What should the jSON file look like for it to work? Please help thanks

Same problem here too. Please provide some solution!

Sreelayavuyyuru commented Apr 10, 2021

This is what i see when i click this the go live option in the bottom bar. However it doesn’t trigger the browser preview. Is there a setting i need to add in my json file? What should the jSON file look like for it to work? Please help thanks

Same problem here too. Please provide some solution!

saurabh1505717 commented May 30, 2021

server is started at port 5500 but failed to open browser. try to change the custom browser. Is there any solution for this error

BIRBAHADUR07 commented May 30, 2021 •

server is started at port 5500 but failed to open browser. try to change the custom browser. Is there any solution for this error

Try starting server at port 80 by that you don’t have to type the port number

go to browser and type localhost:5500

saurabh1505717 commented May 31, 2021

server is started at port 5500 but failed to open browser. try to change the custom browser. Is there any solution for this error

Try starting server at port 80 by that you don’t have to type the port number

go to browser and type localhost:5500

BIRBAHADUR07 commented May 31, 2021

server is started at port 5500 but failed to open browser. try to change the custom browser. Is there any solution for this error

Try starting server at port 80 by that you don’t have to type the port number
go to browser and type localhost:5500

There may be other way but I am telling you the easy way to save time 1. change port to 80 OR 2. type localhost:5500 on your browser search bar

BIRBAHADUR07 commented May 31, 2021

server is started at port 5500 but failed to open browser. try to change the custom browser. Is there any solution for this error

Try starting server at port 80 by that you don’t have to type the port number
go to browser and type localhost:5500

There may be other way but I am telling you the easy way to save time 1. change port to 80 OR 2. type localhost:5500 on your browser search bar

This is also a way to solve your problem.

saurabh1505717 commented May 31, 2021

server is started at port 5500 but failed to open browser. try to change the custom browser. Is there any solution for this error

Try starting server at port 80 by that you don’t have to type the port number
go to browser and type localhost:5500

There may be other way but I am telling you the easy way to save time 1. change port to 80 OR 2. type localhost:5500 on your browser search bar

This is also a way to solve your problem.

shamim-islam-bd commented Jul 10, 2021

VS-code-live-server-problem-solve.. windows 10

Server is started at 5500 but failed to open in Browser Preview. Got Browser Preview extension installed?

Live server installed but not working in VS code

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?

22 Answers 22

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

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.

This will randomly pick an opened port each time. This is how my JSON file looks like:

If live server is not runnning and rendering html page on port 5500,for example http://127.0.0.1:5500/index.html not working.

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.

My local ip: http://192.168.2.16:5500/index.html is rendering changes on fly and working.

This works for anyone for whom live server is not running by default with port 5500.

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

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

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 👇

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.

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.