Как в vs code открыть страницу в браузере

Начало работы, щелкнув правой кнопкой мыши HTML-файл

Используйте это руководство, чтобы узнать, как открыть и закрыть Средства разработки, щелкнув правой .html кнопкой мыши файл demo To Do в Обозреватель Visual Studio Code, не запуская веб-сервер.

Шаг 1. Установка средств разработки и необходимых компонентов

Если вы еще этого не сделали, выполните действия, описанные в разделе Установка расширения DevTools для Visual Studio Code, а затем выполните следующие действия. Для этого руководства не требуется устанавливать и запускать веб-сервер, но рекомендуется.

Шаг 2. Запустите средства разработки, щелкнув правой кнопкой мыши HTML-файл

Щелкнуть файл правой кнопкой .html мыши в Обозреватель Visual Studio Code — это main способ открыть средства разработки, если веб-страница не требует запуска на веб-сервере.

В отличие от кнопки Запустить экземпляр , этот подход открывает средства разработки в режиме отладки.
В отличие от кнопки Запустить проект , которую мы будем использовать позже, этот подход не требует создания launch.json файла.

Мы продемонстрируем, открыв демонстрационное веб-приложение :

В Visual Studio Code выберите Файл>Открыть папку.
Перейдите в каталог, в который вы клонировали репозиторий Demos, откройте конкретный каталог для приложения demo-to-do , например C:\Users\username\Documents\GitHub\Demos\demo-to-do\ , и нажмите кнопку Выбрать папку :
Выберите Панель> действий Обозреватель () > правой кнопкой мыши index.html , а затем выберите Открыть в браузере Edge>Открыть с помощью средств разработки:

Шаг 3. Упорядочивание вкладок

Чтобы сэкономить место, используйте кнопку Закрыть средства разработки или Открыть средства разработки и кнопку Переключить экранную трансляцию , чтобы переключить (открыть или закрыть) вкладки DevTools.
1. В левом верхнем углу вкладки Edge DevTools нажмите кнопку Переключить экранную трансляцию : Вкладка Edge DevTools: Browser (Инструменты разработки для Edge: браузер ) закрывается.
2. На вкладке Edge DevTools снова нажмите кнопку Переключить экранную трансляцию . Откроется вкладка Edge DevTools: Browser ( Браузер ).
3. В правом верхнем углу вкладки Edge DevTools: Браузер нажмите кнопку Закрыть средства разработки :
4. В правом верхнем углу вкладки Edge DevTools: Browser нажмите кнопку Открыть средства разработки .
5. Перетащите вкладку Edge DevTools: Browser, чтобы закрепить ее в любом месте Visual Studio Code, например группировать с помощью редактора исходного кода.
Шаг 4. Изменение CSS в средствах разработки, автоматическое обновление CSS-файла

На вкладке Edge DevTools на вкладке Стили инструмента >Элементы можно изменять селекторы CSS, правила и значения. Флажок css зеркало редактирования установлен по умолчанию, поэтому .css файл автоматически редактируется, но изменения не сохраняются, поэтому вы можете решить, следует ли сохранять изменения.
1. В инструменте Элементы на вкладке Стили щелкните значение CSS, например размер шрифта текста.
2. Измените значение CSS, например с помощью колесика мыши или нажатия клавиш СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ. Откроется связанный .css файл, например to-do-styles.css и прокручивается до строки, определяющей значение CSS, и автоматически изменяет .css файл, но не сохраняет изменения:
3. .css Закройте файл. Visual Studio Code выводится запрос на сохранение изменений.
4. Нажмите кнопку Не сохранять .
Шаг 5. Пошаговое выполнение кода JavaScript в отладчике
1. Выберите панель > действий Обозреватель ().
2. В каталоге demo-to-do щелкните to-do.js , чтобы открыть его. Прокрутите changeTask вниз до функции и щелкните влево от номера строки, чтобы задать точку останова:
3. Если боковая панель Выполнения и отладки не отображается, выберите Просмотреть>выполнение. Боковая панель запуска и отладки содержит панель контрольных значений и другие панели отладчика.
4. В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , введите задачу, например тест. Отладчик Visual Studio Code приостанавливает работу в точке останова to-do.js в файле:
5. На панели инструментов Отладка или с помощью меню Выполнить или нажатием клавиш выполните несколько строк кода в to-do.js .
6. В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , щелкните кружок «Готово» рядом с тестовой задачей. Отладчик Visual Studio Code приостанавливается в точке останова to-do.js в файле.
Шаг 6. Закрытие средств разработки

Чтобы завершить отладку и закрыть вкладки Edge DevTools :
1. На панели инструментов Отладка нажмите кнопку Остановить (SHIFT+F5). Или в меню Выполнить выберите Остановить отладку: Вкладка Edge DevTools закрывается, а вкладка Edge DevTools: Browser (Средства разработки для Edge: браузер ) закроется.
- Закрытие средств разработки в открывании средств разработки и в браузере DevTools.
Вы завершили работу с руководством «Начало работы, щелкнув правой кнопкой мыши HTML-файл». Рекомендуется также выполнить другие руководства. См. статью Начало работы с расширением DevTools для Visual Studio Code.

См. также
- Открытие средств разработки и браузера DevTools
- Расширение Средств разработки Microsoft Edge для Visual Studio Code
Github:
- demo-to-do — демонстрационного веб-приложения, работающего на сервере github.io .
- Исходный код для демонстрации
- Репозиторий MicrosoftEdge/Demos
Visual studio code. Как настроить автообновление браузера?

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

Отслеживать

задан 9 июл 2017 в 10:18

Александр Жариченко Александр Жариченко

135 1 1 золотой знак 1 1 серебряный знак 8 8 бронзовых знаков

под галпом live-reload вообще изумительно работает , даже подключаются все апараты в wifi сети

9 июл 2017 в 10:27

В данный момент пользуюсь Live Server marketplace.visualstudio.com/…

29 янв 2018 в 12:51

2 ответа 2

Сортировка: Сброс на вариант по умолчанию
1. Запускаем программу livereload
2. Выбираем папку с файлами за которыми будете отслеживать изменения
3. Открыть в браузере страницу вашего сайта и нажать в верхнем правом углу на значек livereload. Если livereload плагин активен, то внутри него закрашенная темная точка.
Все. Без галпа и всего прочего у вас будут обновляться страницы при изменении файлов. При изменении css обновление происходит без перезагрузки страницы.

Отслеживать

ответ дан 9 апр 2018 в 14:59

2,983 13 13 серебряных знаков 28 28 бронзовых знаков

Live Share в Visual Studio Code для Интернета

Visual Studio Code для Интернета позволяет посетить https://vscode.devи открыть локальную папку или репозиторий GitHub или Azure DevOps непосредственно из браузера. Это позволяет редактировать код из любого места и на любом устройстве, не требуя установки ничего, чтобы приступить к работе. Кроме того, так как совместная работа является такой ключевой частью рабочего процесса многих разработчиков, расширение Live Share полностью поддерживает Visual Studio Code для Интернета, чтобы вы могли работать вместе со своими одноранговыми узлами, более упрощенным и упрощенным способом.

Начало работы

Чтобы запустить сеанс Live Share из браузера, просто выполните следующие действия:
1. Установка расширения Live Share
2. Нажмите кнопку на строке Live Share состояния. При появлении запроса войдите с помощью удостоверения GitHub или Майкрософт
3. Поделитесь URL-адресом сеанса с разработчиками, с которыми вы хотите сотрудничать!
Когда кто-то щелкает ссылку, его браузер запустится, и им будет предложено присоединиться к сеансу из Интернета или Visual Studio/VS Code. Они могут пройти проверку подлинности с помощью GitHub или удостоверений Майкрософт или продолжить работу в качестве анонимного гостя.

Присоединение к рабочему столу

Хотя Visual Studio Code для Интернета предоставляет упрощенный и бесплатный интерфейс установки, многие разработчики уже установили классический клиент и могут использовать совместную работу. В результате расширение Live Share упрощает присоединение сеанса совместной работы с рабочего стола в дополнение к клиенту на основе vscode.dev.

Открытие из Интернета

Если кто-то отправил ссылку Live Share и открыл ее в браузере, вы можете легко перейти на рабочий стол с помощью одной из следующих команд:
1. Щелкните меню «гамбургер» в левом верхнем углу редактора и выберите Open in VS Code или Open in Visual Studio
2. Нажмите зеленую Live Share кнопку строки состояния в левом нижнем углу редактора и выберите Open in VS Code или Open in Visual Studio
3. Открытие палитры команд и выбор Live Share: Open in VS Code или Live Share: Open in Visual Studio
Каждая из этих точек входа запустит выбранный классический клиент и автоматически присоединяется к активному сеансу.

Открытие с рабочего стола

Если вы уже установили и открыли Visual Studio Или Visual Studio Code, а кто-то отправляет ВАМ URL-адрес сеанса, вы можете присоединиться непосредственно с рабочего стола с помощью одного из следующих подходов:
1. VS Code:
  1. Live Share Открытие вкладки, нажатие Join кнопки и вставка URL-адреса сеанса
  2. Открытие палитры команд и выбор Live Share: Join Collaboration Session
  Использование рабочего стола по умолчанию
  
  При первом щелчке сеанса Live Share вам будет предложено использовать клиент: настольный или веб-сайт. На основе выбранного выбора Live Share запустит указанный клиент для всех посещений susequent. Таким образом, вы всегда можете открыть классический клиент из Интернета, выполнив действия, упоминание выше. Если вы хотите изменить клиент по умолчанию, который всегда используется, можно задать Live Share: Launcher Client для параметра значение или visualStudio web visualStudioCode . Затем каждый раз, когда вы щелкаете ссылку Live Share, предпочтительный клиент будет автоматически запущен.
  
  Известные проблемы
  
  Live Share поддерживает большинство одинаковых функций между настольным компьютером и Интернетом, однако в настоящее время существует несколько возможностей, которые недоступны в Интернете. Мы активно работаем над закрытием этих пробелов, но в то же время, если вам нужно использовать любую из следующих функций, вы можете разместить или присоединиться из классического клиента, а не в Интернете:
  1. Общие серверы
  2. Состояние управления общими версиями
  3. Рабочие пространства с несколькими корневыми каталогами
  4. .vsls.json Фильтрация файлов на основе
  Как открыть окно браузера в визуальном добавочном коде?
  
  Я пишу расширение Visual Studio Code и хотел бы иметь возможность открывать окно браузера с определенным URL в ответ на команду. Я знаю, что Electron имеет класс BrowserWindow, но кажется, что Electron API недоступен из расширения vscode. Я бы предпочел открыть окно браузера в инструменте, но я бы был в порядке с открытием веб-страницы в моем браузере по умолчанию, если это невозможно. Как открыть веб-страницу из расширения? visual-studio-code vscode-extensions
  
  Поделиться Источник 06 мая 2016 в 16:48
  
  5 ответов
  1. Откройте палитру (Ctrl + Shift + P)
  2. Выберите «Простой браузер: Показать»
  3. Введите веб-адрес
  Поделиться 06 марта 2021 в 03:20
  
  Вы можете использовать расширение Live Preview от Microsoft:
  
  Поделиться 20 августа 2021 в 02:03
  
  Чтобы открыть окно браузера внутри VS Code, вы можете использовать WebView API, хотя вам нужно предоставить HTML-контент, а не URL:
```
export function activate(context: vscode.ExtensionContext) < context.subscriptions.push( vscode.commands.registerCommand('catCoding.start', () => < // Create and show panel const panel = vscode.window.createWebviewPanel( 'catCoding', 'Cat Coding', vscode.ViewColumn.One, <>); // And set its HTML content panel.webview.html = getWebviewContent(); >) ); > function getWebviewContent() < return `    Cat Coding     `; > 
```
  В зависимости от вашего конкретного случая использования, также есть расширение Browser Preview, которое регистрирует команду browser-preview.openPreview , которую вы можете использовать (вы, вероятно, захотите указать browser-preview в качестве зависимости, чтобы убедиться, что он установлен).
  
  И, наконец, если вы хотите просто открыть окно в обычном браузере, вы можете использовать API env.openExternal . При запуске в удаленных средах это также будет учитывать раскрытие портов и сопоставление с раскрытым именем хоста (если это служба, обслуживаемая локальным хостом):
```
vscode.env.openExternal(Uri.parse("https://www.stackoverflow.com/")); 
```
  Похожие публикации: