Живой сервер не обновляет браузер
Я использую расширение живого сервера в Visual Studio Code, и оно не работает. Что я имею в виду под «не работает», так это то, что он не обновляет браузер после модификации кода, но я могу его открыть. Единственный способ увидеть изменения — закрыть его и снова открыть.
-Сделать хром браузером по умолчанию, но это уже. -Переустановите код VS.
Что я пробовал, но не удалось:
-Отредактируйте код, чтобы сделать Chrome браузером по умолчанию в коде, но у меня есть ошибка «невозможно редактировать в редакторе только для чтения», которую я не могу исправить. \
Установленные расширения: Code runner — Поддержка HTML CSS — Компилятор Live Sass — Живой сервер — Monokai Pro (темы).
5 ответов
Для меня проблема заключалась в том, что в файле .html отсутствовал
Добавление решило проблему.
Даже если вы установили браузер по умолчанию для своей системы, не помешает сообщить Live Server, какой браузер вы хотели бы использовать в явном виде.
Сначала откройте Command Pallete с помощью F1 , затем введите Preferences: Open Settings (JSON) и выберите этот параметр.
Это откроет ваш файл VSCode settings.json .
Прокрутите файл до конца, добавьте запятую после последней настройки и вставьте «liveServer.settings.CustomBrowser»: «chrome»:
Если по какой-то причине Live Server по-прежнему не открывает страницу в вашем браузере автоматически, вы можете открыть браузер по вашему выбору и просмотреть страницу напрямую.
Live server not refreshing browser
I’m using live server extension in Visual Studio Code, and it’s doesn’t work. What i mean about "doesn’t work" is that it doesn’t refresh the broswer after modifications of the code but i can open it. The only way to see the modifications is to close it and open it again.
-Make chrome as the default broswer but it’s already. -Reinstall VS code.
What i tried but failed :
-Edit the code for making chrome the default broswer in the code but i have a error "cannot edit in read only editor" that i can’t fix it.\
Installed extensions : Code runner — HTML CSS Support — Live Sass compiler — Live server — Monokai Pro (themes).
8 Answers 8
For me the problem was in .html file missing the
Adding it resolved the issue.
I found it! I spent many hours trying to find the solution. I followed your steps but it didn’t change something during the refreshing of the page.
I tried to change the setting.json, uninstall and install the vs code (insider and classic) again, delete and open a new account in GitHub, and see many videos but it remained the same; each change in HTML or CSS didn’t appear on the page when I refreshed it.
So, I followed your steps about the Line Server and nothing changed but I kept them. I ended up searching the settings on the visual studio code.
- Open ⚙️
- Choose "Settings"
- In the section "Commonly Used", find the option "Files: Auto Save" (the first option on 08/09/2022)
- Open the menu of options and confirm the "afterDelay"
Even if you did set the default browser for your system, it wouldn’t hurt to let Live Server know which browser you’d like to use explicitly.
First, open the Command Pallete with F1 , then type in Preferences: Open Settings (JSON) and select that option.
This will open your VSCode settings.json file.
Scroll all the way to the bottom of the file, add a comma after the last setting, then paste in "liveServer.settings.CustomBrowser": "chrome":
If for some reason Live Server still isn’t opening the page in your browser automatically, you can open the browser of your choice and view the page directly.
live server vs studio не обновляет страницу (РЕШЕНО)
Установил приложение live server для vs studio, сперва все работало нормально, но перестало работать после того, как добавил css файл к проекту. Согласен, звучит как бред, но факт таков — кнопка Go live есть, жму, открывает вкладку в браузере. Меняю что-то в файле index.html или style.css, сохраняю, а в браузере ничего не обновляется пока не нажму «Обновить».
Гуглил — такой проблемы будто и у кого не проявлялось. Все ссылки что есть тупо описывают установку и настройку модуля.
Жду помощи от хорошего человека. Заранее спасибо!
Почистил настройки в файле .json и заработало. В настройки до этого не лазил. Как сбились — не понятно.
Как настроить автоматическое обновление страницы при изменении содержимого
Узнайте, как настроить автоматическое обновление страницы при изменении содержимого с помощью Live Server, BrowserSync и Webpack Dev Server.
Содержание
Автоматическое обновление страницы при изменении содержимого — полезная функция для веб-разработчиков, так как она позволяет экономить время и упрощает процесс разработки. В данной статье мы рассмотрим несколько способов, как это можно сделать.
Использование Live Server
Live Server — это расширение для Visual Studio Code, которое автоматически обновляет страницу при изменении файлов проекта. Для использования Live Server следуйте инструкции ниже:
- Установите Visual Studio Code (если еще не установлен).
- Зайдите в раздел «Extensions» (иконка с блоками на боковой панели) и найдите «Live Server» в поиске ��️.
- Установите расширение, нажав на кнопку «Install».
- Откройте свой проект в Visual Studio Code и нажмите правой кнопкой мыши на HTML-файле, затем выберите «Open with Live Server» ��.
Теперь при изменении и сохранении файлов проекта, страница будет автоматически обновляться.
Использование BrowserSync
BrowserSync — это инструмент, который также позволяет автоматически обновлять страницу при изменении файлов проекта. Он может быть установлен через npm (Node.js package manager). Следуйте инструкции ниже для настройки BrowserSync:
- Установите Node.js (если еще не установлен).
- Откройте терминал и выполните команду npm install -g browser-sync для глобальной установки BrowserSync ��.
- Перейдите в папку с вашим проектом с помощью команды cd your_project_directory .
- Запустите BrowserSync с помощью команды browser-sync start —server —files «**/*.html, **/*.css, **/*.js» .
Теперь при изменении и сохранении файлов проекта, страница будет автоматически обновляться, а также будет доступна на различных устройствах в вашей сети.
Использование Webpack Dev Server
Если вы используете Webpack для сборки вашего проекта, вы также можете использовать Webpack Dev Server для автоматического обновления страницы. Следуйте инструкции ниже для настройки Webpack Dev Server:
- Установите Webpack Dev Server с помощью команды npm install webpack-dev-server —save-dev ✨.
- Откройте файл webpack.config.js и добавьте следующий код в объект module.exports :
- В файле package.json измените скрипт «start» на webpack-dev-server —mode development .
Теперь при выполнении команды npm start ваш проект будет доступен на локальном сервере, и страница будет автоматически обновляться при изменении файлов.
В заключение, существует несколько способов настроить автоматическое обновление страницы при изменении содержимого. Выбирайте тот, который лучше всего подходит для вашего проекта и предпочтений разработки. Удачного кодинга! ��