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

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

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

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

Чтобы запустить сеанс Live Share из браузера, просто выполните следующие действия:

Установка расширения Live Share
Нажмите кнопку на строке Live Share состояния. При появлении запроса войдите с помощью удостоверения GitHub или Майкрософт
Поделитесь URL-адресом сеанса с разработчиками, с которыми вы хотите сотрудничать!

Когда кто-то щелкает ссылку, его браузер запустится, и им будет предложено присоединиться к сеансу из Интернета или Visual Studio/VS Code. Они могут пройти проверку подлинности с помощью GitHub или удостоверений Майкрософт или продолжить работу в качестве анонимного гостя.

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

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

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

Если кто-то отправил ссылку Live Share и открыл ее в браузере, вы можете легко перейти на рабочий стол с помощью одной из следующих команд:

Щелкните меню «гамбургер» в левом верхнем углу редактора и выберите Open in VS Code или Open in Visual Studio
Нажмите зеленую Live Share кнопку строки состояния в левом нижнем углу редактора и выберите Open in VS Code или Open in Visual Studio
Открытие палитры команд и выбор Live Share: Open in VS Code или Live Share: Open in Visual Studio

Каждая из этих точек входа запустит выбранный классический клиент и автоматически присоединяется к активному сеансу.

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

Если вы уже установили и открыли Visual Studio Или Visual Studio Code, а кто-то отправляет ВАМ URL-адрес сеанса, вы можете присоединиться непосредственно с рабочего стола с помощью одного из следующих подходов:

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 Фильтрация файлов на основе
Обратная связь

Были ли сведения на этой странице полезными?

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

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

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

Щелкнуть файл правой кнопкой .html мыши в Обозреватель Visual Studio Code — это main способ открыть средства разработки, если веб-страница не требует запуска на веб-сервере.
- В отличие от кнопки Запустить экземпляр , этот подход открывает средства разработки в режиме отладки.
- В отличие от кнопки Запустить проект , которую мы будем использовать позже, этот подход не требует создания launch.json файла.
Мы продемонстрируем, открыв демонстрационное веб-приложение :
1. В Visual Studio Code выберите Файл>Открыть папку.
2. Перейдите в каталог, в который вы клонировали репозиторий Demos, откройте конкретный каталог для приложения demo-to-do , например C:\Users\username\Documents\GitHub\Demos\demo-to-do\ , и нажмите кнопку Выбрать папку :
3. Выберите Панель> действий Обозреватель () > правой кнопкой мыши 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
  Не открывается страница через Live Server плагин для VS Code в браузере
  
  Всем привет! Заранее хочу сказать что я нашёл решения проблемы и хотел поделиться этим с вами! После установки VS Code хотел как можно быстрее начать работать в нём(так уж очееень приятно). Устанавливал дополнительные плагины для него, один из них очень удобный — Live Server, вот только проблема, с пачки он не хотел открывать проект в браузере, только если вручную набрать ip/port(127.0.0.1:5500/index.html), то работал. Вот для того чтобы он в вас запускался автоматически нужно прописать в Системных Переменных вот такую строчку —>>> C:\Windows\System32, вот и магия заработала, поздравляю. Надеюсь кому то это будёт полезно 😉
  
  Отслеживать
  задан 3 мая 2020 в 19:01
  975 8 8 серебряных знаков 19 19 бронзовых знаков
  подскажи пожалуйста как прописать в Системных Переменных эту строчку? Не могу найти, это в VS Code?
  20 мая 2020 в 20:47
  
  правой кнопкой кликаешь на мой ПК и настройки, там есть слева панель, и кликаешь на последний пункт, далее переменные и добавляешь новую)
  
  21 мая 2020 в 10:00
  Сделал как вы сказали, но результата нет. У меня браузер Яндекс , может в этом проблема?
  21 мая 2020 в 17:32
  попробуйте в Chrome, если не поможет то проблема в самом VS Code
  21 мая 2020 в 19:22
  
  Во всех браузерах пробовал, результата нет. VS скачивал с официального сайта, переустанавливал. Может браузер по умолчанию должен быть хром? Замучила эта проблема(
  
  # Отладка в VS Code
  
  Со временем каждое приложение достигает отметки когда становится необходимо разбираться в ошибках, от больших до малых. В этом рецепте рассмотрим несколько возможностей для пользователей VS Code как отлаживать приложения в браузере.
  
  В рецепте рассматривается отладка приложения на Vue CLI
  
  (opens new window) в паре с VS Code при их запуске в браузере.
  
  # Подготовка
  
  Убедитесь что установлена VS Code и выбранный браузер.
  
  Разверните проект с помощью vue-cli
  
  (opens new window) . Перейдите в каталог новосозданного приложения и откройте VS Code.
  
  # Отображение исходного кода в браузере
  
  Прежде чем отлаживать компоненты Vue из VS Code нужно обновить сгенерированную конфигурацию Webpack для генерации source maps. Это делается для того, чтобы отладчик смог сопоставлять код из минифицированных файлов со строками в оригинальных. Это обеспечит возможность отладки приложения даже после того, как все ресурсы были оптимизированы с помощью Webpack.
  
  При использовании Vue CLI 2 нужно установить или обновить свойство devtool в файле config/index.js :
```
devtool: 'source-map', 
```
  Если используете Vue CLI 3, то нужно установить или обновить свойство devtool в файле vue.config.js в корне проекта:
```
module.exports =  configureWebpack:  devtool: 'source-map', >, > 
```
  # Запуск приложения из VS Code
  
  Предполагается, что приложение запущено на порту 8080 . Если это не так (например, если порт 8080 был уже занят и поэтому Vue CLI автоматически выбрал другой порт), то не забудьте изменить соответствующим образом конфигурацию.
  
  Нажмите на значок отладки (слева, узкая боковая панель действий) чтобы открыть представление «Отладка», затем на значок шестерёнки (сверху), чтобы настроить файл launch.json, выберите Chrome/Firefox: Launch в качестве окружения. Замените содержимое сгенерированного launch.json указанной ниже конфигурацией:
```
 "version": "0.2.0", "configurations": [  "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "$/src", "breakOnLoad": true, "sourceMapPathOverrides":  "webpack:///src/*": "$/*" > >,  "type": "firefox", "request": "launch", "name": "vuejs: firefox", "url": "http://localhost:8080", "webRoot": "$/src", "pathMappings": [ "url": "webpack:///src/", "path": "$/" >] > ] > 
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  
  # Добавление точки останова
  1. Добавьте точку останова, например в src/components/HelloWorld.vue на строке 90 .
  1. Откройте консоль в корневом каталоге приложения и запустите его с помощью Vue CLI:
```
npm run serve 
```
  1. Перейдите в режим отладки, выберите конфигурацию ‘vuejs: chrome/firefox’, затем нажмите F5 или зелёную кнопку для старта.
  2. Эта точка останова должна быть достигнута, когда новый экземпляр браузера откроет http://localhost:8080 .
  # Альтернативные варианты
  
  # Vue devtools
  
  Есть и другие методы отладки, отличающиеся по сложности. Самый популярный и простой из них — использовать Vue.js devtools для Chrome
  
  (opens new window) . Главное преимущество работы с инструментами разработки состоит в том, что они позволяют в реальном времени менять данные в свойствах и сразу видеть изменения на странице. Другим важным плюсом является возможность путешествий во времени (time travel debugging) для Vuex.
  
  Обратите внимание, если на странице используется production/минифицированная сборка Vue.js (например подключаете стандартную ссылка на CDN), то интеграция инструментов разработки по умолчанию отключена и панель Vue не будет отображаться в инструментах разработчика. При переключении на не-минифицированную версию может потребоваться обновить страницу, чтобы увидеть изменения.
  
  # Использование debugger в коде
  
  Примеры выше — отличные рабочие варианты для отладки. Однако, есть и альтернативный вариант, когда можно просто использовать нативное выражение debugger
  
  (opens new window) прямо в коде. При их использовании важно не забыть удалить эти выражения после окончания отладки.
```
script> export default  data()  return  message: '' > >, mounted()  const hello = 'Hello World!' debugger this.message = hello > >; script> 
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  
  # Благодарности
  
  Этот рецепт был основан на примере Kenneth Auchenberg
  Похожие публикации: