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

How to Open in Browser from VS Code

If you’re using HTML, PHP, or JS files, you might want to open them in your browser from Visual Studio Code. However, there’s no integrated option to do so. This can be frustrating, especially if you want to have a quick look at the result of your coding.

Luckily, you can enable the “Open in Browser” function through other methods. This article will show you how to do just that.

How to Open in Browser in VS Code on a Windows PC

The easiest way to get the Open in Browser option for Visual Studio Code in Windows is to use an extension. Installing extensions in Visual Studio Code is relatively straightforward, as is using them to open files in the browser.

1. Open your HTML file in the Visual Studio Code Editor.
   
2. On the far left vertical toolbar, click on “Extensions.” Alternatively, you can use the keyboard shortcut “Ctrl + Shift + X” to launch Extensions.
   
3. Click on the search bar to enable writing.
   
4. Input “open in browser.” Choose an extension that matches your search term.
   
5. Click the “Install” button.
   
6. Reload the program.
7. Select the Explorer from the left toolbar.
   
8. Find your HTML file in the Explorer and right-click on it. Choose “Open in Default Browser” or “Open in Other Browsers.”
   
9. If you select the “Open in Default Browser” option, the HTML file will launch in whatever browser is set as default. If you choose “Open in Other Browsers,” you’ll need to specify which browser will be used.

You can find plenty of useful extensions on the Visual Studio Marketplace. Or you can get the Open in Browser extensions with the most positive user reviews here: Extension 1, Extension 2, Extension 3, Extension 4.

How to Open in Browser in VS Code on a Mac

Visual Studio Code can be upgraded using various extensions that increase the program’s functionality. One type of extension can enable opening HTML, PHP, or JS files in a default or other browser. Here’s how to enable that option on a Mac.

1. Using the Visual Studio Code Editor, open the desired file.
   
2. Go to the toolbar on the left and select “Extensions.”
   
3. Click on the search bar in the Extensions panel and write “open in browser.”
   
4. Choose an extension and click on “Install.”
   
5. Reload the software.
6. Go to the left toolbar and select Explorer.
   
7. Locate the file you want to open in the Explorer panel and right-click on it. Select either “Open in Default Browser” or “Open in Other Browsers.”
   
8. The “Open in Default Browser” option will launch the file using the preselected browser. “Open in Other Browsers” will bring up a prompt where you’ll be able to choose one of the browsers installed on your machine.
   

The Visual Studio Marketplace has a vast selection of extensions that can add new functions to Visual Studio Code. The website is well worth exploring if you wish to tweak the program further. And if you’re interested in Open in Browser extensions exclusively, here are some suggestions: Extension 1, Extension 2, Extension 3, Extension 4.

Open in Browser Shortcut

Nearly every Open in Browser extension for Visual Studio Code comes with keyboard shortcuts enabled. However, the shortcuts aren’t uniform. Instead, each extension has a particular combination of keys that will activate opening the file in your browser.

Here are the keyboard shortcuts for the extensions suggested in this article.

1. Extension 1: “Ctrl + 1” on Windows, “Command + 1” on Mac.
   
   
2. Extension 2: “Ctrl + Alt + O” on Windows, “Command + Option (Alt) + O” on Mac.
   
3. Extension 3: “Ctrl + Shift + F9” on Windows, “Command + Shift + F9” on Mac.
   
   
4. Extension 4: “Ctrl + Shift + P” on Windows, “Command + Shift + P” on Mac.
   
   

Note that these shortcuts will work only on their respective extensions linked in this article. If you choose to install a different extension, the relevant shortcuts will likely be listed on its Marketplace page.

Running HTML in Visual Studio Code

If you’re interested in working with HTML in Visual Studio Code, here are some methods of running HTML code within the program.

The first method consists of manually loading the file you wish to run.

1. Open Visual Studio Code and create a new HTML file.
   
2. Go to “File,” then click “Save.”
   
3. Using HTML:5, activate the template for HTML. Then, open the file you saved in step 2.
   
4. Use the Open in Browser extension you installed previously to launch the file in your browser.
5. Leaving the browser open, go back to Visual Studio Code and edit the HTML file, saving your changes.
   
6. Return to the browser and click refresh. You should see the page change based on your editing.
   
7. Repeat steps 5 and 6 to check your progress as you continue editing the HTML file.

The manual method can help keep track of your work. However, there’s an even better solution: auto-loading. This option will require you to install another extension, but should be well worth the time.

1. In Visual Studio Code, go to Extensions, located at the bottom of the left toolbar.
   
2. In the Extensions search bar, type in “live server.”
   
3. Click the “Install” button next to the Live Server extension.
   
4. Create and save a new HTML file.
   
   
5. In the Visual Studio Code Explorer, right-click on your new file. Select “Open Live Server.”
   
6. The HTML file will open in the browser. Once it does, try to edit the HTML code. Save your progress.
   
   
7. As soon as you create a change in the code and save it, your browser should refresh, showing the new content. You won’t need to refresh the page manually and will instead be able to have visual confirmation of the changes in real time.
   

Other Useful Visual Studio Code HTML Extensions

As mentioned, the Visual Studio Marketplace is full of excellent tools, many of which are geared towards HTML. Here are the ten most useful and best-graded extensions for HTML.

: A tool that highlights syntax, checks typing, and helps you complete the code without errors. This extension has customizable rules. : An auto-complete extension for class definitions for HTML, SCSS, Elixir, SASS, PHP, CSS, and many other file types. : Adds Angular snippets for easy use in HTML and TypeScript. The extension works by unfolding a snippet once it’s partially typed out. : Enables es6 string code support for syntax highlighting. Works with HTML, CSS, XML, GLSL, and other formats. : This extension will split HTML attributes, as well as Angular, Vue, and React props and directives. You can use it on opening and self-closing tags, as well as on multiple selections. : An extensive snippet collection for django HTML templates. Using this extension will significantly shorten the time spent typing. : The Live Preview extension from Microsoft allows local server hosting. If you have a project that doesn’t use Angular, React, or other server tools, this extension will enable regular and embedded HTML previewing with page refreshes in real time. : This extension created by the Oracle Corporation provides full support for Oracle JET custom HTML data. The included snippets will auto-complete any JET attributes and tags. : Enables Go to Definition for HTML to CSS, HTML to Less, and HTML to Sass. The Peek Definition command is also enabled. : Seamlessly replaces special characters with appropriate HTML entities. This extension is situationally helpful, but essential when handling localizable strings.

You Can Run Visual Studio Code From Your Browser

In addition to running HTML files in a browser, it’s also possible to use the entire Visual Studio Code online. This requires you to launch a particular version of the program developed for browser use.

It’s worth noting that this version is much more lightweight compared to the desktop Visual Studio Code. However, it can be a straightforward solution for easy repository and file navigation, as well as minor code changes.

If you’d like to try out the Visual Studio Code browser variant, you can get started immediately by clicking here.

Get Your HTML Files Up and Running

Opening HTML files in your browser is made easy with the dedicated extension for Visual Studio Code. If you decide to explore the vast offerings of extensions for this coding tool, the Open in Browser function will be just the beginning of your journey.

Did you manage to open your HTML file in your browser of choice? Which extension did you use? Let us know in the comments section below.

Как открыть в браузере из VS Code

Если вы используете файлы HTML, PHP или JS, вы можете открыть их в браузере из Visual Studio Code. Однако интегрированной возможности для этого нет. Это может раздражать, особенно если вы хотите быстро просмотреть результат кодирования.

К счастью, вы можете включить опцию “Открыть в браузере” функционировать другими методами. Эта статья покажет вам, как это сделать.

Как открыть в браузере в VS Code на ПК с Windows

Самый простой способ получить параметр «Открыть в браузере» для кода Visual Studio в Windows — использовать расширение. Установка расширений в Visual Studio Code относительно проста, как и использование их для открытия файлов в браузере.

1. Откройте файл HTML в Visual Studio Code. Редактор.
   
2. На крайней левой вертикальной панели инструментов нажмите “Расширения” Кроме того, вы можете использовать сочетание клавиш “Ctrl + Shift + X” для запуска расширений.
   
3. Нажмите на строку поиска, чтобы включить запись.
   
4. Введите “открыть в браузере” Выберите расширение, соответствующее вашему поисковому запросу.
   
5. Нажмите кнопку “Установить” кнопку.
   
6. Перезагрузите программу.
7. Выберите проводник на левой панели инструментов.
   
8. Найдите свой HTML-файл в проводнике и щелкните его правой кнопкой мыши. Выберите “Открыть в браузере по умолчанию” или “Открыть в других браузерах”
   
9. Если вы выберете “Открыть в браузере по умолчанию” опция, файл HTML будет запущен в любом браузере, установленном по умолчанию. Если вы выберете “Открыть в других браузерах” вам нужно будет указать, какой браузер будет использоваться.

Вы можете найти множество полезных расширений в Visual Studio Marketplace. Или вы можете получить расширения «Открыть в браузере» с самыми положительными отзывами пользователей здесь: Расширение 1, Расширение 2, Расширение 3, Расширение 4.

Как открыть в браузере в VS Code на Mac

Visual Studio Code можно обновлять с помощью различных расширений, расширяющих функциональные возможности программы. Один тип расширения позволяет открывать файлы HTML, PHP или JS в браузере по умолчанию или в другом браузере. Вот как включить этот параметр на Mac.

1. В редакторе кода Visual Studio откройте нужный файл.
   
2. Перейдите на панель инструментов слева и выберите “Расширения”. br>
3. Нажмите на строку поиска на панели расширений и напишите “open в браузере”
   
4. Выберите расширение и нажмите “ Установить.”
   
5. Перезагрузите программное обеспечение.
6. Перейдите на левую панель инструментов и выберите Проводник.
   
7. Найдите файл, который вы хотите открыть в панели проводника и щелкните правой кнопкой мыши на нем. Выберите либо “Открыть в браузере по умолчанию” или “Открыть в других браузерах”
   
8. Кнопка “Открыть в браузере по умолчанию” опция запустит файл с помощью предварительно выбранного браузера. “Открыть в других браузерах” появится запрос, в котором вы сможете выбрать один из браузеров, установленных на вашем компьютере.
   

Visual Studio Marketplace предлагает широкий выбор расширений, которые могут добавлять новые функции в Visual Studio Code. Веб-сайт стоит изучить, если вы хотите дополнительно настроить программу. И если вас интересуют исключительно расширения «Открыть в браузере», вот несколько советов: расширение 1, расширение 2, расширение 3, расширение 4.

Открыть в браузере ярлык

Почти каждое расширение «Открыть в браузере» для Visual Studio Code поставляется с включенными сочетаниями клавиш. Однако ярлыки неоднородны. Вместо этого каждое расширение имеет определенную комбинацию клавиш, которая активирует открытие файла в вашем браузере.

Вот сочетания клавиш для расширений, предложенных в этой статье.

1. Расширение 1: “Ctrl + 1” в Windows “Command + 1” на Mac.
   
   
2. Расширение 2: “Ctrl + Alt + O” в Windows “Command + Option (Alt) + O” на Mac.
   
3. Расширение 3: “Ctrl + Shift + F9” в Windows “Command + Shift + F9” на Mac.
   
   
4. Расширение 4: “Ctrl + Shift + P” в Windows “Command + Shift + P” на Mac.
   
   

Обратите внимание, что эти ярлыки будут работать только с соответствующими расширениями, на которые есть ссылки в этой статье. Если вы решите установить другое расширение, соответствующие ярлыки, скорее всего, будут перечислены на его странице Marketplace.

Запуск HTML в Visual Studio Code

Если вас интересует работа с HTML в Visual Studio Code, вот несколько способов запуска HTML-кода в программе.

Первый способ заключается в ручной загрузке файла, который вы хотите запустить.

1. Откройте Visual Studio Code и создайте новый HTML-файл.
   
2. Перейдите к “Файл” затем нажмите “Сохранить».
   
3. Используя HTML:5, активируйте шаблон для HTML. Затем откройте файл, сохраненный на шаге 2.
   
4. Используйте Откройте в браузере расширение, которое вы установили ранее, чтобы запустить файл в браузере.
5. Оставив браузер открытым, вернитесь в Visual Studio Code и отредактируйте HTML-файл, сохранив изменения.
   
6. Вернитесь в браузер и нажмите «Обновить». Вы должны увидеть изменение страницы в зависимости от вашего редактирования.
   
7. Повторите шаги 5 и 6, чтобы проверить свой прогресс, продолжая редактировать HTML-файл.

Ручной метод может помочь отслеживать вашу работу. Однако есть еще лучшее решение: автозагрузка. Этот вариант потребует от вас установки другого расширения, но оно того стоит.

1. В Visual Studio Code перейдите в раздел Расширения, расположенный в внизу левой панели инструментов.
   
2. В строке поиска расширений введите на “действующем сервере”
   
3. Нажмите кнопку “Установить” рядом с расширением Live Server.
   
4. Создайте и сохраните новый HTML-файл.
   
   
5. В обозревателе кода Visual Studio щелкните правой кнопкой мыши новый файл. Выберите “Открыть Live Server”
   
6. Файл HTML откроется в браузере. Как только это произойдет, попробуйте отредактировать HTML-код. Сохраните свой прогресс.
   
   
7. Как только вы создадите изменение в коде и сохраните его, ваш браузер должен обновиться, показывая новый контент. Вам не нужно будет обновлять страницу вручную, вместо этого вы сможете получить визуальное подтверждение изменений в режиме реального времени.
   

Другие полезные HTML-расширения кода Visual Studio

Как уже упоминалось, Visual Studio Marketplace полон отличных инструментов, многие из которых ориентированы на HTML. Вот десять самых полезных и высоко оцененных расширений для HTML.

• lit-plugin: инструмент, который подсвечивает синтаксис, проверяет ввод и помогает завершить код без ошибок. Это расширение имеет настраиваемые правила.
• SCSS Everywhere: расширение для автоматического заполнения определений классов для файлов HTML, SCSS, Elixir, SASS, PHP, CSS и многих других типов файлов.
• li>
• Angular Snippets: Добавляет Angular-сниппеты для удобного использования в HTML и TypeScript. Расширение работает, разворачивая фрагмент после того, как он частично напечатан.
• ES6 String HTML: включает поддержку строкового кода es6 для подсветки синтаксиса. Работает с HTML, CSS, XML, GLSL и другими форматами.
• Разделить атрибуты HTML: это расширение разделит атрибуты HTML, а также реквизиты и директивы Angular, Vue и React. Вы можете использовать его для открывающихся и самозакрывающихся тегов, а также для множественного выбора.
• Djaneiro – Django Snippets: Обширная коллекция фрагментов для HTML-шаблонов django. Использование этого расширения значительно сократит время, затрачиваемое на набор текста.
• Live Preview: расширение Live Preview от Microsoft позволяет размещать локальный сервер. Если у вас есть проект, в котором не используются Angular, React или другие серверные инструменты, это расширение позволит выполнять обычный и встроенный предварительный просмотр HTML с обновлением страницы в режиме реального времени.
• Oracle JET Core : это расширение, созданное корпорацией Oracle, обеспечивает полную поддержку пользовательских HTML-данных Oracle JET. Включенные фрагменты будут автоматически заполнять любые атрибуты и теги JET.
• CSS-навигация: позволяет перейти к определению для HTML в CSS, HTML в Less и HTML в Sass. Команда Peek Definition также включена.
• Конвертер символов с диакритическими знаками HTML: легко заменяет специальные символы соответствующими объектами HTML. Это расширение полезно в определенных ситуациях, но необходимо при работе с локализуемыми строками.

Вы можете запускать код Visual Studio из своего браузера

Помимо запуска HTML-файлов в браузере, также можно использовать весь код Visual Studio онлайн. Для этого вам нужно запустить определенную версию программы, разработанную для использования в браузере.

Стоит отметить, что эта версия намного легче по сравнению с Visual Studio Code для настольных компьютеров. Однако это может быть простое решение для удобной навигации по репозиторию и файлам, а также для внесения незначительных изменений в код.

Если вы хотите попробовать вариант браузера Visual Studio Code, вы можете сразу приступить к работе, нажмите здесь.

Подготовьте свои HTML-файлы и запустите их

Открытие HTML-файлов в браузере стало проще благодаря специальному расширению для Visual Studio Code. Если вы решите изучить обширные предложения расширений для этого инструмента кодирования, функция «Открыть в браузере» станет лишь началом вашего пути.

Удалось ли вам открыть HTML-файл в выбранном вами браузере? Какое расширение вы использовали? Дайте нам знать в разделе комментариев ниже.

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

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

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

19 ответов:

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

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

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

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

3. сохраните файл.

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

@InvisibleDev-чтобы получить эту работу на mac пытается использовать это:

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

• открыть командную строку (cmd) и введите

  npm install —save-dev gulp-webserver

• введите Ctrl + Shift+P в VS код и тип Настройка Task Runner. Выбрать ее и нажмите enter. Это откроет задачи.файл JSON для вас. Удалить все из него конец введите только следующий код

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

• теперь в VS код введите Ctrl + Shift+P и введите «выполнить задачу» , когда вы введете его, вы увидите свою задачу «webserver» выбран и нажмите enter.

• запуск одним щелчком мыши из строки состояния
• Live Reload
• поддержка приложения отладки Chrome

теперь вы можете установить расширение Просмотр В Браузере. Я тестировал его на windows с chrome, и он работает.

версия vscode: 1.10.2

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

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

tasks.json

keybindings.json :

если вы просто на Mac это tasks.json file:

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

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

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

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

• не закройте окно командной строки, пока вы не закончите кодирование в своем приложение на день
• начинается с http://localhost:10001 но вы можете изменить порт по редактирование пакета.файл json.

CTRL+SHIFT+P вызовет палитру команд.
В зависимости от того, что вы работаете конечно. Пример в Ан ASP.net приложение, которое вы можете ввести:
>kestrel а затем откройте веб-браузер и введите localhost:(your port here) .

если вы вводите > он покажет вам показывать и запускать команды

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

источник: ссылке

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

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

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

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

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

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

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

EDIT: также вам не нужно-инкогнито и -private-window. it ‘ это только мне нравится, чтобы посмотреть его в частном окне

1. использовать команда + shift + p чтобы открыть палитру команд.

1. введите Configure Task Runner, в первый раз, когда вы это сделаете, VS Code даст вам меню прокрутки вниз, если он выберет «другое.»Если вы делали это раньше, VS Code просто отправит вас прямо в задачи.формат JSON.

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

1. вернитесь к html-файлу и нажмите команда + Shift + b для просмотра страницы в Chrome.

один клик решение просто установить открыть в браузере расширения из Visual Studio marketplace.

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

недавно наткнулся на эту функцию в одном из учебников кода visual studio в www.lynda.com

нажмите Ctrl + K, а затем M, он откроет «выберите режим языка» (или нажмите на правый нижний угол, который говорит HTML перед этим смайликом), введите markdown и нажмите enter

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

Tadaaa .

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

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

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

в любом случае это круто. Счастливый vscoding 🙂

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

Настройка VSCode для работы с HTML

В прошлых статьях ( первая часть , вторая часть ) мы рассмотрели установку среды разработки 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

Запустите Google Chrome и откройте в нем ссылку http://localhost:5500

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

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

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

Заключение

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

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

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

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

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

Открыли нашу страницу в Google Chrome используя ссылку от Live Server — http://localhost:5500

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

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