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

Обновлено: 08.07.2024

Как просмотреть мой HTML-код в браузере с новым кодом Microsoft Visual Studio?

В Notepad ++ у вас есть возможность запускать в браузере. Как я могу сделать то же самое с кодом Visual Studio?

Ответьте на оба вопроса, чтобы открыть определенный файл (имя жестко запрограммировано) ИЛИ открыть ЛЮБОЙ другой файл.

шаги:

Используйте ctrl + shift + p (или F1 ), чтобы открыть палитру команд.

VS Code имеет расширение Live Server, которое поддерживает запуск в один клик из строки состояния.

Некоторые из особенностей:

Запуск одним кликом из строки состояния
Live Обновить
Поддержка Chrome Debugging Attachment

Если у вас уже открыт хром, он запустит ваш html файл на новой вкладке.

Если вы хотите иметь живую перезагрузку, вы можете использовать gulp -webserver, который будет следить за вашими файлами и перезагружать страницу, так что вам не нужно нажимать F5 каждый раз на вашей странице:

Вот как это сделать:

Откройте командную строку (cmd) и введите

Введите Ctrl + Shift + P в коде VS и введите Настроить запуск задачи. Выберите его и нажмите клавишу ввода. Он откроет для вас файл tasks.json. Удалите все, начиная с конца, введите только следующий код

tasks.json

В корневой каталог вашего проекта добавьте gulpfile.js и введите следующий код:

gulpfile.js

Теперь ваш веб-сервер откроет вашу страницу в браузере по умолчанию. Теперь любые изменения, которые вы будете делать с вашими страницами HTML или CSS, будут автоматически перезагружены.

Вы также можете запустить свою задачу, просто введя Ctrl + P и введите веб-сервер задач

Теперь вы можете установить расширение Просмотреть в браузере. Я тестировал его на окнах с хромом, и он работает.

версия vscode: 1.10.2

В linux вы можете использовать команду xdg-open , чтобы открыть файл с браузером по умолчанию:

Вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш:

Для работы на веб-сервере:

Я просто повторяю шаги, которые я использовал из блога msdn . Это может помочь сообществу.

Это поможет вам настроить локальный веб-сервер, известный как lite-server, с VS Code , а также поможет вам разместить ваши статические html файлы в localhost и debug ваш код Javascript .

1. Установите Node.js

Если еще не установлен, получите его здесь

Он поставляется с npm (менеджер пакетов для приобретения и управления вашими библиотеками разработки)

2. Создайте новую папку для вашего проекта

Где-нибудь на вашем диске создайте новую папку для вашего веб-приложения.

3. Добавьте файл package.json в папку проекта

Затем скопируйте/вставьте следующий текст:

4. Установите веб-сервер

В окне терминала (командная строка в Windows), открытом в папке вашего проекта, выполните следующую команду:

Это установит lite-сервер (определенный в package.json), статический сервер, который загружает index.html в ваш браузер по умолчанию и автоматически обновляет его при изменении файлов приложения.

5. Запустите локальный веб-сервер!

(Предполагая, что у вас есть файл index.html в папке вашего проекта).

В том же окне терминала (командная строка в Windows) запустите эту команду:

Подождите секунду, и index.html загрузится и отобразится в вашем браузере по умолчанию, обслуживаемом вашим локальным веб-сервером!

lite-сервер следит за вашими файлами и обновляет страницу, как только вы вносите изменения в любые html, js или css файлы.

И если у вас VS Code настроен на автоматическое сохранение (меню Файл/Автосохранение), вы увидите изменения в браузере по мере ввода!

Заметки:

Это оно. Теперь перед любой сессией кодирования просто наберите npm start и все готово!

Первоначально размещено здесь в блоге msdn . @Laurent Duveau : @Laurent Duveau

Если вы только на Mac, это tasks.json файл:

Создайте tasks.json , как описано выше, и вызовите его с помощью ⌘ + shift + b .

Если вы хотите, чтобы он открывался в Chrome, тогда:

Это будет делать то, что вы хотите, как при открытии новой вкладки, если приложение уже открыто.

Решение одним кликом просто установите open-in-browser Расширения с рынка Visual Studio.

Если вы наберете > , он покажет вам команды show и run

Или в вашем случае с HTML, я думаю, F5 после открытия палитры команд должен открыть отладчик.

Открытие файлов в браузере Opera (в Windows 64 бит). Просто добавьте следующие строки:

Чтобы запустить эту задачу, откройте файл html, который хотите просмотреть, нажмите F1, введите task opera и нажмите enter

мой бегун script выглядит следующим образом:

и он просто открывает мой проводник, когда я нажимаю ctrl shift b в файле index.html

вот как вы можете запускать его в нескольких браузерах для Windows

Используйте Command + shift + p , чтобы открыть палитру команд.

Один раз в файле tasks.json. Удалите отображаемый script и замените его на:

Вернитесь в свой html файл и нажмите Command + shift + b , чтобы просмотреть свою страницу в Chrome.

Теперь нажмите Ctrl + K, а затем V, он откроет ваш HTML в ближайшей вкладке.

Вам интересно, почему vscode не имеет опции просмотра html по умолчанию, когда он может отображать html файл в режиме уценки?

Во всяком случае, это круто. Счастливого vscoding 🙂

Вот версия 2.0.0 для Mac OSx:

Для будущих разработчиков, которые придут сюда в поисках решения. Это удивительное расширение, которое довольно недавно называется Browser Preview от Кеннета Аухенберга, вы можете получить расширение с рынка. Как начать, вы можете проверить это репо, как начать с предварительного просмотра браузера

так. рабочий tasks.json для пользователей windows использующий vscode 1.34 :

Откройте код Visual Studio, затем перейдите к расширениям.

3. Установите его.

Откройте пользовательский Chrome с URL-адресом из приглашения

Открыть пользовательский Chrome с активным файлом

Notes

Вы не можете. Visual Studio не предназначалась для веб-дизайна или разработки. Вы должны закодировать некоторые строки, чтобы заставить его работать.

Как я могу просмотреть свой HTML-код в браузере с помощью нового кода Microsoft Visual Studio?

С Notepad ++ у вас есть возможность запустить в браузере. Как я могу сделать то же самое с кодом Visual Studio?

У меня работало расширение живого сервера. Я не хочу настраивать какие-либо файлы для этого.

Для Windows - Откройте браузер по умолчанию - Протестировано на VS Code v 1.1.0

шаги:

Используйте ctrl + shift + p (или F1 ), чтобы открыть палитру команд.

Введите Tasks: Configure Task или на старых версиях Configure Task Runner . Выбор этого файла откроет файл tasks.json . Удалите отображаемый скрипт и замените его следующим:

Не забудьте изменить раздел «args» файла tasks.json на имя вашего файла. Это всегда откроет этот конкретный файл, когда вы нажмете F5.

Вы также можете установить this для открытия любого файла, который вы открыли в данный момент, используя ["$"] в качестве значения «args». Обратите внимание, что $ выходит за пределы <. >, так что [""] это неправильно.

Вернитесь к html-файлу (в данном примере это «text.html») и нажмите ctrl + shift +, b чтобы просмотреть свою страницу в веб-браузере.

Как мне это сделать в Mac? Там нет exe-файлов. Я хотел бы открыть веб-страницу в Chrome на Mac Сконфигурировать Runner задач больше не присутствует в VSC 1.24.0 - Control-Shift-P не возвращает результатов для этой строки.

VS Code имеет расширение Live Server, которое поддерживает запуск в один клик из строки состояния.

Некоторые из особенностей:

Запуск в один клик из строки состояния
Live Обновить
Поддержка Chrome Debugging Attachment

Это расширение также имеет веб-надстройку для обеспечения автоматической перезагрузки динамических страниц. @ M.Sundstrom Можете ли вы дать мне название / ссылку этого дополнения, пожалуйста? Все еще очень полезно, и особенно полностью свободная конфигурация! Это не рекомендуется для сложных страниц, может быть, хорошо для новых программистов но, кажется, вы не можете предварительно просмотреть несохраненный активный файл, верно? (Запускает его, не просматривает html, но показывает в браузере иерархию папок)

@InvisibleDev - чтобы заставить это работать на Mac, пытающемся использовать это:

Если у вас уже открыт Chrome, он запустит ваш HTML-файл на новой вкладке.

Если вы хотите выполнить перезагрузку в режиме реального времени, вы можете использовать gulp-webserver, который будет следить за изменениями вашего файла и перезагружать страницу, так что вам не нужно нажимать F5 каждый раз на вашей странице:

Вот как это сделать:

Откройте командную строку (cmd) и введите

Установка npm --save-dev gulp-webserver

Введите Ctrl + Shift + P в VS Code и введите Configure Task Runner . Выберите его и нажмите Enter. Он откроет для вас файл tasks.json. Удалить все с конца и ввести только следующий код

tasks.json

В корневой каталог вашего проекта добавьте gulpfile.js и введите следующий код:

gulpfile.js

Теперь в VS Code введите Ctrl + Shift + P и введите «Run Task», когда вы введете его, вы увидите свою задачу «webserver» и нажмите Enter.

Теперь ваш веб-сервер откроет вашу страницу в браузере по умолчанию. Теперь любые изменения, которые вы внесете в свои страницы HTML или CSS, будут автоматически перезагружены.

Вот информация о том, как настроить 'gulp-webserver' для порта экземпляра и какую страницу загрузить, .

Вы также можете запустить свою задачу, просто нажав Ctrl + P и набрав задачу веб-сервера

Я должен был бежать npm install -g gulp , npm install -g gulp-webserver и добавить переменную окружения NODE_PATH , что указывает на мой AppData \ НПМ \ node_modules. Тогда я смог запустить задачу веб-сервера, однако я получаю 404 при запуске браузера. Есть идеи, что мне не хватает? Неважно, просто пришлось изменить «приложение» в вашем примере на «.» (так он служит из текущего каталога). Один комментарий к ответу: если вы хотите запустить html-файл в вашем браузере, который автоматически перезагрузит изменения, ваш gulpfile.js должен выглядеть следующим образом с «.» вместо «приложения». Код = var gulp = require ('gulp'), веб-сервер = require ('gulp-webserver'); gulp.task ('webserver', function () ));>); Я получал «Cannot GET /», потому что я копировал gulpfile.js без настройки строки gulp.src('app') так, чтобы она фактически указывала на мой источник (который был не /app «.»). Работает отлично. Спасибо!

Теперь вы можете установить расширение View In Browser . Я проверял это на окнах с хромом, и это работает.

Версия vscode: 1.10.2

Это не обновляет браузер автоматически, и это не то, что ищет OP

Вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш:

Для работы на веб-сервере:

В Linux вы можете использовать xdg-open команду, чтобы открыть файл в браузере по умолчанию:

Спасибо! Я пользователь Linux и чувствовал себя потерянным. Я хотел бы добавить, что нужно нажать, Ctrl + Shift + b чтобы запустить его в браузере. Для меня мнемоника была "b = browser". :-) Это работает, но кажется устаревшим, если у вас есть обновленная версия, спасибо

Откройте Visual Studio Code, затем перейдите к расширениям.

Ищите «открыть в браузере».

3. Установите его.

4.Нажмите правой кнопкой мыши свой HTML-файл, вы найдете опцию «Открыть в браузере».

Я просто повторяю шаги, которые я использовал в msdn блоге. Это может помочь сообществу.

Это поможет вам настроить локальный веб-сервер, известный как lite-server with VS Code , а также поможет разместить ваши статические html файлы localhost и debug ваш Javascript код.

1. Установите Node.js

Если еще не установлен, получите его здесь

Он поставляется с npm (менеджер пакетов для приобретения и управления вашими библиотеками разработки)

2. Создайте новую папку для вашего проекта

Где-нибудь на вашем диске создайте новую папку для вашего веб-приложения.

3. Добавьте файл package.json в папку проекта

Затем скопируйте / вставьте следующий текст:

4. Установите веб-сервер

В окне терминала (командная строка в Windows), открытом в папке вашего проекта, выполните следующую команду:

5. Запустите локальный веб-сервер!

(Предполагая, что у вас есть файл index.html в папке вашего проекта).

В том же окне терминала (командная строка в Windows) запустите эту команду:

И если у вас VS Code настроен на автоматическое сохранение (меню Файл / Автосохранение), вы увидите изменения в браузере по мере ввода!

Ноты:

Вот и все. Теперь перед любой сессией кодирования просто наберите npm start и все готово!

Первоначально размещено здесь в msdn блоге. Кредиты переходит к автору: @Laurent Duveau

Если вы только на Mac этот tasks.json файл:

. это все, что вам нужно, чтобы открыть текущий файл в Safari, при условии, что его расширение ".html".

Создайте, tasks.json как описано выше, и вызовите его с помощью ⌘ + shift + b .

Если вы хотите открыть его в Chrome, то:

Это будет делать то, что вы хотите, как при открытии в новой вкладке, если приложение уже открыто.

Решение в один клик - просто установите расширения с открытым браузером из торговой площадки Visual Studio.

Обновленный ответ от 18 апреля 2020 года

Нажмите на этот значок управления слева внизу. Нажмите Расширения или Сокращение Ctrl+Shift+X

Затем поиск по расширению с этим ключевым предложением Открыть в браузере по умолчанию . Вы найдете это расширение. Это лучше для меня.

Теперь щелкните правой кнопкой мыши на html файле, и вы увидите « Открыть в браузере по умолчанию» или «Быстрый переход», Ctrl+1 чтобы увидеть html файл в браузере.

Для Mac - Открывается в Chrome - Проверено на VS Code v 1.9.0

Используйте Command + shift +, p чтобы открыть палитру команд.

Введите Configure Task Runner, при первом запуске VS Code выдаст вам прокручивающееся меню, если оно выберет «Other». Если вы сделали это раньше, VS Code просто отправит вас прямо на tasks.json.

Один раз в файле tasks.json. Удалите отображаемый скрипт и замените его следующим:

Вернитесь к html-файлу и нажмите Command + Shift +, b чтобы просмотреть страницу в Chrome.

Если вы введете > его, он покажет вам команды show и run

Или в вашем случае с HTML, я думаю, F5 после открытия палитры команд следует открыть отладчик.

Открытие файлов в браузере Opera (в Windows 64 бит). Просто добавьте эти строки:

Обратите внимание на формат пути в «команде»: строка. Не используйте формат «C: \ path_to_exe \ runme.exe».

Чтобы запустить эту задачу, откройте HTML-файл, который вы хотите просмотреть, нажмите F1, введите задачу Opera и нажмите Enter

мой скрипт бегуна выглядит так:

и он просто открывает мой проводник, когда я нажимаю ctrl shift b в моем файле index.html

вот как вы можете запустить его в нескольких браузерах для Windows

обратите внимание, что я ничего не набирал в args для edge, потому что Edge - мой браузер по умолчанию, просто дал ему имя файла.

РЕДАКТИРОВАТЬ: также вам не нужно -incognito, ни -private-window . это только я, мне нравится просматривать его в частном окне

Я копировал только tasks часть. "args":["/C"] является то , что делает эту работу. Из любопытства, что это делает?

Нажмите Ctrl + K, а затем M, чтобы открыть «Выбор языка» (или щелкните в правом нижнем углу с надписью HTML перед этим смайликом), введите разметку и нажмите Enter

Теперь нажмите Ctrl + K, а затем V, он откроет ваш HTML в ближайшей вкладке.

Теперь команды emmet не работали в этом режиме в моем html-файле, поэтому я вернулся в исходное состояние (примечание - html tag tellisense работали отлично)

Чтобы перейти в исходное состояние - нажмите Ctrl + K, затем M, выберите автоопределение. Команды emmet начали работать. Если вы довольны средством просмотра только html, вам не нужно возвращаться в исходное состояние.

Вам интересно, почему vscode не имеет опции просмотра html по умолчанию, когда он может отображать html-файл в режиме уценки?

Во всяком случае, это круто. Счастливого vscoding :)

Вот версия 2.0.0 для Mac OSx:

Ctrl + F1 откроет браузер по умолчанию. В качестве альтернативы вы можете нажать Ctrl + Shift + P, чтобы открыть командное окно и выбрать «Просмотр в браузере». HTML-код должен быть сохранен в файле (несохраненный код в редакторе - без расширения, не работает)

Какую версию кода Visual Studio вы используете? Эти команды не работают в моей только что обновленной версии 1.8.1. Ctrl + F1 ничего не делает, и у меня нет опции View in Browser в палитре команд. Может быть, у вас есть что-то помимо установленного по умолчанию или дополнительные задачи в вашем tasks.json?

в любом случае, мое решение ( windows ) построено на вершине @ noontz. его конфигурации, возможно, было достаточно для более старых версий, vscode но не с 1.34 (по крайней мере, я не мог заставить его работать ..).

наши конфиги почти идентичны, за исключением одного свойства - это свойство является group собственностью. Я не уверен, почему, но без этого моя задача даже не появилась бы в палитре команд.

так. работа tasks.json для windows пользователей, работающих vscode 1.34 :

обратите внимание, что problemMatcher свойство не требуется, чтобы это работало, но без него вам навязывают дополнительный ручной шаг. пытался прочитать документы по этому свойству, но я слишком толстый, чтобы понять. надеюсь, кто-нибудь придет и обучит меня, но да, заранее спасибо за это. все, что я знаю, - включить это свойство и ctrl+shift+b открыть текущий html файл в новой chrome вкладке, без проблем.

Как просмотреть мой HTML-код в браузере с помощью нового кода Microsoft Visual Studio?

С Notepad ++ у вас есть возможность запустить в браузере. Как я могу сделать то же самое с кодом Visual Studio?

Для Windows - откройте браузер по умолчанию - протестировано на VS Code v 1.1.0

Ответьте на оба вопроса, чтобы открыть определенный файл (имя жестко запрограммировано) OR открыть ЛЮБОЙ другой файл.

шаги:

Использование ctrl + shift + p (или же F1 ), чтобы открыть командную палитру.

Введите Tasks: Configure Task или в более старых версиях Configure Task Runner . При его выборе откроется файл tasks.json. Удалите отображаемый скрипт и замените его следующим:

Не забудьте изменить раздел "args" файла tasks.json на имя вашего файла. Это всегда откроет этот конкретный файл, когда вы нажмете F5.

Вы также можете установить this для открытия любого файла, который вы открыли в данный момент, используя ["$"] в качестве значения для "args". Обратите внимание, что $ выходит за пределы <. >, поэтому [""] неверен.

Вернитесь к html-файлу (в данном примере это "text.html") и нажмите ctrl + shift + b чтобы просмотреть свою страницу в веб-браузере.

@InvisibleDev - чтобы заставить это работать на Mac, пытающемся использовать это:

Если у вас уже открыт Chrome, он запустит ваш HTML-файл на новой вкладке.

VS Code имеет Live Server Extention , который поддерживает запуск в один клик из строки состояния.

Некоторые из особенностей:

Запуск одним кликом из строки состояния
Live Обновление
Поддержка Chrome Debugging Attachment

Если вы хотите выполнить перезагрузку в режиме реального времени, вы можете использовать gulp-webserver, который будет следить за изменениями ваших файлов и перезагружать страницу, так что вам не нужно каждый раз нажимать клавишу F5 на вашей странице:

Вот как это сделать:

Откройте командную строку (cmd) и введите

установка npm --save-dev gulp-webserver

Введите Ctrl + Shift + P в VS Code и введите Configure Task Runner. Выберите его и нажмите Enter. Он откроет для вас файл tasks.json. Удалить все с конца и ввести только следующий код

tasks.json

В корневой каталог вашего проекта добавьте gulpfile.js и введите следующий код:

gulpfile.js

Теперь в VS Code введите Ctrl + Shift + P и введите «Run Task», когда вы введете его, вы увидите выбранную задачу «веб-сервер» и нажмите Enter.

Вот информация о том, как настроить 'gulp-webserver' например, порт и какую страницу загрузить, .

Вы также можете запустить вашу задачу, просто набрав Ctrl + P и набрав task webserver

Теперь вы можете установить расширение Просмотр в браузере . Я проверял это на окнах с хромом, и это работает.

vscode версия: 1.10.2

В linux вы можете использовать команду xdg-open , чтобы открыть файл в браузере по умолчанию:

Вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш:

Нажмите CTRL + C в терминале, чтобы выключить сервер

Я только что опубликовал шаги, которые я использовал в блоге msdn . Это может помочь сообществу.

Это поможет вам Настроить локальный веб-сервер, известный как lite-server с VS Code , а также поможет разместить ваши статические файлы html в localhost и debug ваш код Javascript .

1. Установите Node.js

Если он еще не установлен, получите его здесь

Он поставляется с npm (менеджер пакетов для приобретения и управления вашими библиотеками разработки)

2. Создайте новую папку для вашего проекта

Где-нибудь на вашем диске создайте новую папку для вашего веб-приложения.

3. Добавьте файл package.json в папку проекта

Затем скопируйте/вставьте следующий текст:

4. Установите веб-сервер

В окне терминала (командная строка в Windows), открытом в папке вашего проекта, выполните эту команду:

5. Запустите локальный веб-сервер!

(Предполагая, что у вас есть файл index.html в папке вашего проекта).

В том же окне терминала (командная строка в Windows) запустите эту команду:

Заметки:

Это оно. Теперь перед любой сессией кодирования просто наберите npm start и все готово!

Первоначально опубликовано здесь в msdn блог . Кредиты переходит к автору: @Laurent Duveau

Если вы только на Mac, это tasks.json файл:

. это все, что вам нужно, чтобы открыть текущий файл в Safari, при условии, что его расширение ".html".

Создайте tasks.json , как описано выше, и вызовите его с ⌘ + shift + b ,.

Если вы хотите открыть его в Chrome, то:

Это будет делать то, что вы хотите, как при открытии в новой вкладке, если приложение уже открыто.

мой скрипт бегуна выглядит так:

и он просто открывает мой проводник, когда я нажимаю ctrl shift b в моем файле index.html

Открытие файлов в браузере Opera (в Windows 64 бит). Просто добавьте эти строки:

Обратите внимание на формат пути в"command":line. Не используйте формат «C:\path_to_exe\runme.exe».

Чтобы запустить эту задачу, откройте HTML-файл, который вы хотите просмотреть, нажмите F1, введите Task Opera и нажмите Enter

Если вы введете > , он покажет вам команды show и run

Или в вашем случае с HTML, я думаю, F5 после открытия палитры команд должен открыть отладчик.

Россия

размер шрифта уменьшить размер шрифтаувеличить размер шрифта
Печать
Эл. почта
Станьте первым комментатором!

В прошлых статьях ( первая часть , вторая часть ) мы рассмотрели установку среды разработки VSCode под Windows 10 и добавили в неё поддержку языка C++.

VSCode является универсальной IDE, благодаря наличию онлайн каталога с множеством расширений, позволяющих настроить среду как вам удобней. При этом её можно использовать для разработки на разных языках программирования.

Данная среда может использоваться и для разработки HTML-страниц.

Сегодня мы рассмотрим установку двух расширений Browser Preview и Live Server, которые позволяют создавать HTML-сайты не устанавливая отдельный web-сервер, и производить отладку и правку дизайна сайта не переключаясь между редактором и браузером!

Установка расширения Browser Preview

чтобы открыть окно Расширения.

Нам потребуется установить расширения Browser Preview от автора Kenneth Auchenberg.

Данное расширение позволяет вам организовывать просмотр страницы непосредственно в IDE, что очень полезно, при внесении в HTML-страницу множества мелких правок.

Также нам понадобится расширение – Live Server от Ritwick Dey.

Установка расширения Live Server

Это по сути небольшой web-сервер не требующий долгой настройки и готовый к запуску по одному щелчку на кнопку!

После установки Live Server обязательно закройте VSCode и запустите его снова.

Установка

Возможно, вам так же придется установить расширение Debugger for Chrome от Microsoft.

Создание проекта

Давайте создадим тестовый проект для нашей страницы.

Допустим, все проекты у нас будут храниться в папке d:\html

Откроем консоль cmd.exe и введем команды:

Откроется новое окно VSCode, в котором уже открыта папка проекта test1:

Добавим в нее новый файл index.html

Для этого нажмите на указанную кнопку и введите имя файла:

Щелкните на файл, чтобы открыть его в редакторе.

Давайте создадим простейшую страницу:

Проверка HTML-страницы

У нас есть проект и web-страница, пришло время её проверить.

Сначала запустим Live Server, для этого просто нажмите кнопку Go Live:

Откроется новое окно браузера и сервер будет запущен на порту

Закройте вкладку браузера, мы будем использовать Browser Preview

Создание конфигурации для запуска Browser Preview

Выберите меню Run -> Add configuration…

Выберите пункт Browser Preview

Будет создан файл launch.json замените его содержимое на:

Сохраните и закройте вкладку.

Запустите Browser Preview, для этого нажмите F5 или на указанную кнопку, она появится после первого запуска конфигурации:

Нажмите на «Запустить test1…»

Откроется вкладка с нашей страницей:

Работа с Browser Preview

Данное расширение очень удобно при разработке страниц с нуля, так как позволяет видеть изменения сразу после сохранения страницы.

Давайте добавим текст на страницу:

Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview

Отладка сайта в браузере

Вы можете использовать внешний браузер для отладки сайта, запущенного в Live Server

Я расположил окна рядом, для большей наглядности.

Давайте добавим еще одну строку в html-файл:

Сохраним файл – содержимое обновится и в браузере, и во вкладке Browser Preview.

Заключение

Сегодня мы рассмотрели настройку среды разработки VSCode для разработки HTML-страниц.

Мы установили расширения Browser Preview и Live Server.

Создали тестовую страницу.

Настроили профиль для запуска нашей страницы в Browser Preview.

Открыли нашу страницу во вкладке Browser Preview и протестировали автоматическое обновление содержимого вкладки при обновлении содержимого HTML-страницы.

Протестировали обновление страницы в Google Chrome при обновлении содержимого файла.

В следующей статье мы рассмотрим настройку VSCode для разработки на языке программирования PHP.

Читайте также: