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:
- Live Share Открытие вкладки, нажатие Join кнопки и вставка URL-адреса сеанса
- Открытие палитры команд и выбор Live Share: Join Collaboration Session
Использование рабочего стола по умолчанию
При первом щелчке сеанса Live Share вам будет предложено использовать клиент: настольный или веб-сайт. На основе выбранного выбора Live Share запустит указанный клиент для всех посещений susequent. Тем не более чем вы всегда можете открыть классический клиент из Интернета, выполнив описанные выше действия. Если вы хотите изменить клиент по умолчанию, который всегда используется, можно задать Live Share: Launcher Client для параметра значение или visualStudio web visualStudioCode . Затем каждый раз, когда вы щелкаете ссылку Live Share, предпочтительный клиент будет автоматически запущен.
Известные проблемы
Live Share поддерживает большинство одинаковых функций между настольным компьютером и Интернетом, однако в настоящее время существует несколько возможностей, которые недоступны в Интернете. Мы активно работаем над закрытием этих пробелов, но в то же время, если вам нужно использовать любую из следующих функций, вы можете разместить или присоединиться из классического клиента, а не в Интернете:
- Общие серверы
- Состояние управления общими версиями
- Рабочие пространства с несколькими корневыми каталогами
- .vsls.json Фильтрация файлов на основе
Начало работы, щелкнув правой кнопкой мыши 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.
- В левом верхнем углу вкладки Edge DevTools нажмите кнопку Переключить экранную трансляцию :
Вкладка Edge DevTools: Browser (Инструменты разработки для Edge: браузер ) закрывается. - На вкладке Edge DevTools снова нажмите кнопку Переключить экранную трансляцию . Откроется вкладка Edge DevTools: Browser ( Браузер ).
- В правом верхнем углу вкладки Edge DevTools: Браузер нажмите кнопку Закрыть средства разработки :
- В правом верхнем углу вкладки Edge DevTools: Browser нажмите кнопку Открыть средства разработки .
- Перетащите вкладку Edge DevTools: Browser, чтобы закрепить ее в любом месте Visual Studio Code, например группировать с помощью редактора исходного кода.
Шаг 4. Изменение CSS в средствах разработки, автоматическое обновление CSS-файла
На вкладке Edge DevTools на вкладке Стили инструмента >Элементы можно изменять селекторы CSS, правила и значения. Флажок css зеркало редактирования установлен по умолчанию, поэтому .css файл автоматически редактируется, но изменения не сохраняются, поэтому вы можете решить, следует ли сохранять изменения.
- В инструменте Элементы на вкладке Стили щелкните значение CSS, например размер шрифта текста.
- Измените значение CSS, например с помощью колесика мыши или нажатия клавиш СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ. Откроется связанный .css файл, например to-do-styles.css и прокручивается до строки, определяющей значение CSS, и автоматически изменяет .css файл, но не сохраняет изменения:
- .css Закройте файл. Visual Studio Code выводится запрос на сохранение изменений.
- Нажмите кнопку Не сохранять .
Шаг 5. Пошаговое выполнение кода JavaScript в отладчике
- Выберите панель > действий Обозреватель ().
- В каталоге demo-to-do щелкните to-do.js , чтобы открыть его. Прокрутите changeTask вниз до функции и щелкните влево от номера строки, чтобы задать точку останова:
- Если боковая панель Выполнения и отладки не отображается, выберите Просмотреть>выполнение. Боковая панель запуска и отладки содержит панель контрольных значений и другие панели отладчика.
- В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , введите задачу, например тест. Отладчик Visual Studio Code приостанавливает работу в точке останова to-do.js в файле:
- На панели инструментов Отладка или с помощью меню Выполнить или нажатием клавиш выполните несколько строк кода в to-do.js .
- В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , щелкните кружок «Готово» рядом с тестовой задачей. Отладчик Visual Studio Code приостанавливается в точке останова to-do.js в файле.
Шаг 6. Закрытие средств разработки
Чтобы завершить отладку и закрыть вкладки Edge DevTools :
- На панели инструментов Отладка нажмите кнопку Остановить (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
Отладка в VS Code
Каждое приложение достигает отметки, когда становится необходимо разбираться в ошибках, от больших до малых. В этом рецепте мы исследуем несколько возможностей для пользователей VS Code, кто хочет отлаживать приложения в браузере.
Этот рецепт покажет как отлаживать приложения Vue CLI в паре с VS Code при их запуске в браузере.
Примечание: Этот рецепт охватывает Chrome и Firefox. Если знаете как настроить отладку VS Code с другими браузерами, поделитесь своими знаниями (см. в конце страницы).
Подготовка
Убедитесь что у вас установлен VS Code и выбранный браузер, а также установлена последняя версия соответствующего расширения отладчика:
- Debugger для Chrome
- Debugger для Firefox
Установите и создайте проект с помощью vue-cli, следуя инструкциям по установке в руководстве Vue CLI. Перейдите в каталог новосозданного приложения и откройте VS Code.
Отображение исходного кода в браузере
Перед тем, как вы сможете отлаживать ваши компоненты Vue из VS Code, вам необходимо обновить сгенерированную конфигурацию Webpack для генерации sourcemaps. Мы делаем это, чтобы отладчик имел возможность сопоставлять код в сжатых файлов со строками в оригинальных. Это гарантирует, что вы можете отлаживать приложения даже после того, как все ваши ресурсы были оптимизированы с помощью 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": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
}Установка точки останова
npm run serve
Альтернативные варианты
Vue devtools
Существуют и другие методы отладки, различающиеся по сложности. Самый популярный и простой из них — использовать Vue.js devtools для Chrome и для Firefox. Главное из преимуществ работы с инструментами разработки (devtools) состоит в том, что они позволяют вам в реальном времени менять свойства данных и сразу видеть изменения на странице. Другим важным преимуществом является возможность отладки во времени (time travel debugging) для Vuex.
Обратите внимание, если на странице используется production/минифицированная сборка Vue.js (как например, стандартная ссылка на CDN), то проверка инструментов разработки по умолчанию отключена и поэтому панель Vue не будет отображаться в инструментах разработчика. Если вы переключитесь на не минифицированную версию, вам может потребоваться обновить страницу, чтобы увидеть изменения.
Использование выражения Debugger
Примеры выше предоставляют отличные рабочие варианты для отладки. Однако, есть и альтернативный вариант, когда вы просто можете использовать нативное выражение debugger прямо в вашем коде. Если вы выберите этот путь, важно не забыть удалить эти выражения после окончания отладки.
script>
export default {
data( ) {
return {
message: ''
}
},
mounted( ) {
const hello = 'Hello World!'
debugger
this.message = hello
}
};
script>Благодарности
Этот рецепт был основан на примере Kenneth Auchenberg, который доступен здесь.
Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .
Расширение Live Server для VS Code
Плагин Live Server для VS Code позволяет перезагружать страницу после внесения измений в js, css, html код. Для установки надо перейти в раздел плагинов, набрать в поисковой строке «Live Server» и нажать кнопку «Установить».
Теперь в правом нижнем углу есть кнопка «Go Live», которая запускает сервер. Давайте создадим директорию project , а внутри нее еще две директории — src и dist . В директории src будут исходники, а в директории dist — готовая сборка. И откроем проект в VS Code — нужно кликнуть по директории project правой кнопкой мыши и выбрать в контекстном меню «Открыть с помощью VS Code».
При запуске сервера — Live Server будет считать корнем сервера директорию dist и запускать браузер по умолчанию. Это можно изменить в настройках VS Code — либо через графический интерфейс, либо редактируя файл settings.json .
Чтобы открыть на редактирование settings.json нужно кликнуть иконку в правом верхнем углу в разделе настроек.
Некоторые часто используемые настройки:
- liveServer.settings.root — корень веб-сервера
- liveServer.settings.port — порт веб-сервера
- liveServer.settings.CustomBrowser — какой бразузер запускать вместо дефолтного
- liveServer.settings.ignoreFiles — игнорировать изменения в этих файлах
- liveServer.settings.host — хост: 127.0.0.1 или localhost
- liveServer.settings.https — работать по протоколу https
- liveServer.settings.wait — задержка в мс перед перезагрузкой браузера
- liveServer.settings.NoBrowser — запускать сервер без открытия браузера
- liveServer.settings.fullReload — перезагружать браузер вместо обновления ссылки на css-файл внутри
В VS Code есть пользовательские настройки (User) и настройки рабочего пространства (Workspace). Пользовательские настройки применяются всегда, для любого запущенного экземпляра VS Code. Настройки рабочего пространства применяются для директории проекта — в нашем случае это файл project/.vscode/settings.json . Настройки рабочего пространства имеют приоритет над пользовательскими настройками.
- Расширение «ESLint» для VS Code, часть 2 из 2
- Расширение «ESLint» для VS Code, часть 1 из 2
- Расширение «Prettier — Code formatter» для VS Code
- Расширение «Remote — SSH» для VS Code
- Расширение REST Client для VS Code
- Расширение «Debugger for Chrome» для VS Code
- Отладка с помощью xdebug в PhpStorm
Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Категории блога
Облако тегов- 1С:Предприятие (31)
- API (29)
- Bash (43)
- CLI (122)
- CMS (139)
- CSS (50)
- Frontend (75)
- HTML (66)
- JavaScript (150)
- Laravel (72)
- Linux (169)
- MySQL (76)
- PHP (125)
- React.js (66)
- SSH (27)
- Ubuntu (69)
- Web-разработка (509)
- WordPress (73)
- Yii2 (69)
- БазаДанных (95)
- Битрикс (66)
- Блог (29)
- Верстка (43)
- ИнтернетМагаз… (84)
- КаталогТоваров (87)
- Класс (30)
- Клиент (28)
- Ключ (28)
- Команда (87)
- Компонент (60)
- Конфигурация (64)
- Корзина (32)
- ЛокальнаяСеть (32)
- Модуль (34)
- Навигация (31)
- Настройка (141)
- ПанельУправле… (29)
- Плагин (33)
- Пользователь (26)
- Практика (101)
- Сервер (75)
- Событие (27)
- Теория (106)
- Установка (66)
- Файл (51)
- Форма (58)
- Фреймворк (192)
- Функция (36)
- ШаблонСайта (68)
- В левом верхнем углу вкладки Edge DevTools нажмите кнопку Переключить экранную трансляцию :