Код Visual Studio не работает в реальном времени
Обновлено: 21.11.2024
Я установил расширение live server, но браузер не обновляется после сохранения моего HTML или других файлов. Что может быть причиной проблемы?
17 ответов 17
Переустановите расширение и перезапустите текстовый редактор, чтобы устранить проблему.
У меня была эта проблема, и я решил ее, изменив номер порта в файле settings.json на открытый.
Чтобы перейти к файлу settings.json, просто нажмите CTRL + SHIFT + P , затем введите «Настройки», нажмите «Настройки: Открыть настройки (JSON)», затем вставьте это внутрь < >:
Это будет случайным образом выбирать открытый порт каждый раз. Вот как выглядит мой файл JSON:
Если в файле JSON несколько строк, убедитесь, что каждая строка разделена запятой ( , ), например:
Возможно, это связано с проблемой подключения в вашей системе.
У меня была такая же проблема, когда я компилировал следующую HTML-страницу:
Решил проблему, изменив настройки живого сервера на мой локальный IP-адрес, и это устранило проблему.
Это работает для всех, у кого live-сервер не работает по умолчанию с портом 5500.
При возникновении таких проблем обратитесь к файлу settings.json в vs code. < "liveServer.settings.useLocalIp": true, "liveServer.settings.CustomBrowser": "chrome" >Кроме того, если вы находитесь за брандмауэром компании, этот метод может не работать, и вам нужно открыть его.
Это связано с тем, что вы добавили недостаточно путей в свои переменные среды.
Сначала вы можете закрыть код vs
Перейти к свойствам "Мой компьютер"
Нажмите Дополнительные настройки
нажмите «Переменные среды»
Оттуда вы можете добавить путь, щелкнув переменные пути в показанной там таблице 6 . Добавьте новую строку в путь и скопируйте и вставьте путь к вашей системе 32
надеюсь, это решение сработает в вашем случае
Сервер Live запущен, но по-прежнему не открывает страницу в вашем браузере автоматически
Примечание: через какое-то время номер порта 5500 будет изменен на 5501
У меня был пробел в имени файла, где нужно было найти index.html.
Нравится: 3. Типографика.
Только что избавился от пробела: 3. Типографика, потому что (конечно) в URL не может быть пустого места.
это легко решить. просто откройте настройку с помощью (ctrl +,) и выберите обычно используемое первое поле (автоматическое сохранение). Его значение по умолчанию отключено, вы должны изменить его на «После задержки»
У меня такая же проблема, но я решил ее, удалив все настройки живого сервера из файла settings.json и переустановив расширение живого сервера, и теперь запустив его правильно.
Включите функцию автосохранения. Файл-> Автосохранение
Используйте правильный синтаксис HTML: 👇
Я новичок в веб-разработке и использовал только тег head . Веб-страница работала в браузере, но сервер не мог ее обработать. Вы можете получить указанный выше фрагмент кода в vscode, набрав html:5 и нажав Tab.
Кроме того, убедитесь, что функция автосохранения в vscode включена. Это можно сделать, перейдя к ярлыку настроек vscode: Ctrl + и введите автосохранение. Изменить файлы: Автосохранение на afterDelay. Если вы хотите мгновенно просматривать изменения в коде, измените Files: Auto Save Delay на 1 .
Теперь откиньтесь на спинку кресла и наблюдайте, как происходит волшебство😁.
Я несколько раз сталкивался с этой проблемой в VSCode, и для меня это было связано с тем, что я вызывал live-сервер из командной строки PS. Я переключился на «командную строку», и все заработало нормально.
Лучший способ устранить ошибку номера порта 5500
Проверьте номер порта ниже в разделе Go Live, если это (номер порта 5500), затем перейдите в окно браузера и введите localhost:5500, затем выберите папку проекта, после чего вы увидите автоматическое обновление.
Если вы можете добраться до адреса и не открывается только браузер, следуйте этому методу:
- Проверьте браузер с параметром по умолчанию в настройках живого сервера.
- Сбросить приложения Windows по умолчанию.
- Я использовал браузер Brave, и когда я сделал браузер по умолчанию из настроек браузера и перезапустил программу vscode, проблема была решена. Он также работает в других браузерах.
Я использовал это в папке, и в названии папки есть несколько неправильных букв, таких как заглавная i "İ". Когда имя папки соответствует английским правилам, оно работает.
Это происходит потому, что вы изменили некоторые настройки по умолчанию. Вы должны сбросить их все, чтобы запустить живой сервер. Если вы не должны указать, что вы изменили на рабочем сервере.
Если работающий сервер по-прежнему не работает,
Убедитесь, что вы встроили свою папку в код VS. Если вы не просто нажали Ctrl + B и щелкните значок «Добавить новую папку». Затем выберите папку вашего проекта. Затем щелкните правой кнопкой мыши файл project.html, и он откроется.
Если это не сработало, введите в адресной строке браузера, например, 127.0.0.1:5500. Локальный сервер должен открыться сейчас.
Тем не менее, у вас была проблема, они пытаются закрыть и снова открыть код VS несколько раз.
Если проблема не устранена, попробуйте установить веб-браузер по умолчанию по пути по умолчанию на диске C. (C://Файлы программы. )
Если у вас все еще есть проблема, это может быть проблема с работающим сервером. Вы должны удалить его и установить другую версию, вышедшую недавно.
Live Server — очень удобное расширение для всех местных веб-разработчиков. Это помогает открыть ваш проект в браузере одним щелчком мыши и автоматически перезагружает вкладку браузера, когда вы сохраняете свою работу.
Этот инструмент незаменим для тех, кто любит программировать в Visual Studio Code. Более того, многие из них могут использовать VS Code только из-за этого замечательного расширения.
Но вот в чем загвоздка: иногда это также может давать ужасные ошибки или просто не работать, что ухудшает весь опыт кодирования. Но не волнуйтесь, сегодня мы увидим — Как исправить Live Server в Visual Studio Code?
Итак, приступим!
(Посмотрите видео: видео доступно в конце этой статьи)
Перезапустить VS Code
Иногда ваш код Visual Studio может на некоторое время перестать работать из-за того, что вы сразу отдали целую кучу команд, которые в данный момент не так просто выполнить.
В таких случаях может помочь только перезапуск программы. Это позволит вашему коду VS обновиться и начать заново.
Итак, сначала сохраните работу над проектом. Затем закройте и снова откройте VS Code. Если это работает, то это здорово, в противном случае следуйте следующему методу!
Установить браузер по умолчанию
Если вы не установили какой-либо браузер по умолчанию для вашей операционной системы (ОС) или он просто перепутал расположение программы, то ваш Live Server не сможет узнать, какой именно браузер он должен открыть.
Итак, выполните следующие действия, чтобы установить браузер по умолчанию:
- Шаг 1. Используйте сочетание клавиш Win + I, чтобы открыть настройки.
- Шаг 2. Теперь перейдите в раздел "Приложения и функции".
- Шаг 3. Затем нажмите "Приложения по умолчанию" слева.
- Шаг 4. Прокрутите список вниз и выберите Веб-браузер.
- Шаг 5. Затем выберите наиболее подходящий браузер.
После этого повторно откройте код VS и попробуйте открыть свою работу в браузере с помощью Live Server. Если это все равно не сработало, то можно попробовать следующий способ.
Настроить браузер
Сообщив Live Server, какой браузер следует открывать, вы также можете решить эту проблему.
Выполните следующие действия, чтобы установить браузер по умолчанию в VS Code:
- Шаг 1. Нажмите клавишу F1, чтобы открыть панель команд.
- Шаг 2. Найдите «Настройки». Откройте «Настройки» (JSON) и откройте его.
- Шаг 3. В конце последней настройки поставьте запятую (,) и вставьте следующее:
Открыть Live Server вручную
Если ваш Live Server не открывает вкладку браузера при подаче команды, возможно, с вашим Live Server возникла какая-то минимальная проблема.
Если это работает, значит, все в порядке, это означает, что при открытии браузера возникли проблемы, и ваш Live Server по-прежнему работает эффективно.
Ошибка: Сервер запущен. но не удалось открыть в режиме предварительного просмотра в браузере
Если именно вы получаете ошибку такого типа вскоре после попытки запустить Live Server, эту проблему можно решить, внеся некоторые изменения в настройки.
Чтобы решить эту проблему, выполните следующие действия:
- Шаг 1. Нажмите клавиши Ctrl + Shift + X, чтобы открыть расширения. Или вы можете нажать на значок расширения слева, чтобы открыть его.
- Шаг 2. Переместите расширение Live Server в раздел «Установлено».
- Шаг 3. Нажмите на значок шестеренки внизу и откройте настройки расширения.
- Шаг 4. Перейдите к Live Server > Settings: используйте предварительный просмотр в браузере, если он выбран, снимите его.
- Шаг 5. Теперь перейдите в раздел Live Server > Настройки: Использовать локальный IP-адрес, если он не выбран, выберите его.
Готово, теперь вы можете попробовать открыть свою работу в браузере с помощью Live Server. Теперь все должно работать правильно.
Заключение
Это были различные способы, с помощью которых вы можете исправить проблему с неработающим Live Server в Visual Studio Code. В случае возникновения каких-либо проблем вы можете написать об этом в разделе комментариев ниже.
Откройте проект и нажмите кнопку «Вступить в действие» прямо из строки состояния, чтобы включить или выключить сервер.
Щелкните правой кнопкой мыши HTML-файл в окне проводника и выберите Открыть с помощью Live Server. .
Откройте файл HTML, щелкните правой кнопкой мыши редактор и выберите параметры.
Нажмите (alt+L, alt+O), чтобы открыть сервер, и (alt+L, alt+C), чтобы остановить сервер (вы можете изменить сочетание клавиш).[На MAC-адресе, cmd+L, cmd+O и cmd+L, cmd+C ]
Нажмите F1 или ctrl+shift+P и введите Live Server: Open With Live Server, чтобы запустить сервер, или Live Server: Stop Live Server, чтобы остановить сервер.
Возможности
Установка
Откройте редактор VSCode и нажмите ctrl+P , введите ext install ritwickdey.liveserver .
Настройки
Все настройки теперь перечислены здесь Документы настроек.
Все часто задаваемые вопросы теперь перечислены здесь Документы часто задаваемых вопросов
Что нового?
Версия 5.0.0 (15.06.18)
[Удалено] Ранее Live Server поддерживался без рабочей области (открывался только один HTML-файл). Эта функция удалена. (Если вам не хватает этой функции, откройте запрос о проблеме. Мы ценим ваши отзывы)
[Новое] Добавлена новая команда для изменения точки входа в рабочую область. ctrl+shift+p и введите Live Server: Изменить рабочее пространство Live Server, чтобы изменить путь к рабочему пространству. Советы: вам не нужно использовать эту команду, Live Server достаточно умен, он либо спросит, что вы хотите, либо автоматически установит правильное рабочее пространство, если вы щелкните правой кнопкой мыши файл HTML, чтобы запустить сервер
Журнал изменений
Чтобы просмотреть полный журнал изменений, нажмите здесь.
Особая благодарность сопровождающим
Выражаем особую благодарность Максу Шмитту и Джойдип Рою за их ценное время, потраченное на этот проект.
Поделитесь своим кодом, сотрудничайте с кем угодно, где угодно и когда угодно
Неважно, какое приложение вы создаете, на каком языке программируете или на какой операционной системе работаете; с помощью Live Share вы можете мгновенно поделиться своим проектом с коллегами, не выходя из собственных инструментов. Не нужно клонировать репозиторий или настраивать среду, чтобы получить общий доступ.
Совместная работа не должна вызывать затруднений, поэтому сохраните существующий рабочий процесс
Live Share предоставляет вам возможность совместного редактирования, совместной отладки, общения с коллегами, совместного использования терминалов, серверов, просмотра комментариев и многого другого. Вам не нужно менять то, как вы работаете, чтобы работать с другими. Live Share подходит для всех ваших потребностей и потребностей вашей команды.
Используйте совместную работу в режиме реального времени для создания пар, проверки кода, технических интервью, учебных курсов и многого другого
Главное преимущество Live Share – универсальность. Прошли те времена, когда можно было использовать несколько инструментов для совместной работы и переключения контекста. Live Share не только работает для нескольких вариантов использования, но также имеет модель расширяемости, которая позволяет вам добавлять к ней собственные настройки.
Visual Studio Live Share в действии
Совместная работа на протяжении всего рабочего процесса разработки
Редактирование в реальном времени
Создавайте и редактируйте код вместе в режиме реального времени
Сосредоточиться и следовать
Привлеките внимание к своему курсору или следите за тем, как другие перемещаются
Текстовый чат
Групповая отладка
Устанавливайте точки останова и выполняйте код вместе
Общие серверы
Просмотр веб-приложений и баз данных без доступа к портам в Интернете
Общие терминалы
Выполнять команды и задачи с потоковой передачей результатов членам команды
Роб Джонс | @code_lobster
Только что использовал @code Live Share для проверки кода с четырьмя студентами за столом. Это сработало блестяще. Жить будущим — это прекрасно.
Крис Джордан | @Крис Джордан
Сегодня я был поражен возможностями @code + VS Live Share для удаленного парного программирования. Вы можете не только поделиться своим рабочим пространством, но и своим терминалом И вашими серверами, работающими локально. Игра. Чейнджер.
JavaScript Джо | @jsjoeio
ГПа | @ГарриПас
Итак, я *наконец* поиграл с Live Share в @code. Выражение «фанат-чертовски-тастичное» даже не начинает описывать, насколько это круто.
Читайте также: