Как поменять браузер в vs code

Обновлено: 05.07.2024

Задает параметры для внутреннего веб-браузера и для Internet Explorer. Для доступа к этому диалоговому окну щелкните элемент Параметры в меню Сервис, разверните папку Среда и выберите Веб-браузер.

Эта функция не рекомендуется к использованию в Visual Studio 2022 и не будет поддерживаться в дальнейшем.

Дополнительные сведения о Visual Studio 2022 см. в заметках о выпуске и в дорожной карте Visual Studio.

При открытии определенных файлов или компонентов из Интернета на вашем компьютере может выполняться код.

Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих параметров или выпуска. Чтобы изменить параметры, выберите в меню Сервис пункт Импорт и экспорт параметров . Дополнительные сведения см. в разделе Сброс параметров.

Главная страница

Задает страницу, отображаемую при открытии веб-браузера интегрированной среды разработки.

Позволяет указать страницу поиска для внутреннего веб-браузера. Это расположение может отличаться от страницы поиска, используемый экземплярами Internet Explorer, которые запускаются за пределами интегрированной среды разработки (IDE).

Использовать для просмотра HTML-кода

Задает редактор, используемый для открытия веб-страницы при выборе команды Просмотреть исходный код на странице из внутреннего веб-браузера.

Редактор исходного текста. Выберите для просмотра исходного кода в редакторе.

Редактор HTML. Выберите для просмотра исходного кода в конструкторе HTML. Используйте этот вариант, чтобы изменить веб-страницу в одном из двух представлений: представление конструктора или стандартное текстовое представление исходного кода.

Внешний редактор. Выберите для просмотра источника в другом редакторе. Укажите путь к любому редактору, например Notepad.exe.

Параметры Internet Explorer

Щелкните, чтобы изменить параметры Internet Explorer в диалоговом окне Свойства браузера. Изменения, внесенные в этом диалоговом окне, влияют как на внутренний веб-браузер, так и на экземпляры Internet Explorer, запущенные вне среды IDE Visual Studio (например, из меню "Пуск").

В окне Просмотр с помощью можно выбрать вместо внутреннего веб-браузера Visual Studio браузер, который вы предпочитаете. Открыть диалоговое окно "Просмотр с помощью" можно из контекстного меню, например HTML-файла проекта.

Как просмотреть мой 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 чтобы просмотреть свою страницу в веб-браузере.

enter image description here

@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.

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

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

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

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

vscode версия: 1.10.2

enter image description here

В 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), открытом в папке вашего проекта, выполните эту команду:

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

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

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

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

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

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

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

Заметки:

Это оно. Теперь перед любой сессией кодирования просто наберите 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 после открытия палитры команд должен открыть отладчик.

It defaults to my safari but would like to change it to chrome. I looked in preferences, but there doesn't seem to be an option for that. Any ideas?

277 1 1 gold badge 3 3 silver badges 10 10 bronze badges

13 Answers 13

Go to Files > Prefrences > Settings

From Default User settings choose LiveServer Config

Inside it click on pen icon to the left on liveServer.settings.CustomBrowser select chrome .

1,940 5 5 gold badges 24 24 silver badges 56 56 bronze badges
  1. Go into settings. Shortcut: hold command then comma on mac.
  2. In the top search bar search: liveServer.settings.CustomBrowser
  3. You will see: Live Server > Settings: Custom Browser
  4. In the drop down menu select whatever browser you want e.g. chrome or chrome:PrivateMode etc..
  1. Open settings.json file
  2. Type or copy and paste the following in the next line: "liveServer.settings.CustomBrowser": "chrome"
  3. Make sure that there is a comma after the code in the previous line.


Follow this guys, this one is obviously an easy way to do it. Thank you btw.

This is how I did it on MacOS (you have to hit the gear, then select "Configure Extension Settings")

enter image description here

1,685 2 2 gold badges 21 21 silver badges 23 23 bronze badges

Thanks! to above answers. On Mac select VS and press [command + ,] or from menubar choose code->Preferences->Settings. It will open the Settings tab and enter live server config in search bar follow the steps given below

enter image description here


I was also looking for this, while trying to change to Google Chrome Dev.

And discovered you can practically change to any browser you want, just type the name of the app on your settings.json

210k 97 97 gold badges 439 439 silver badges 479 479 bronze badges


Note that it also works with "liveServer.settings.CustomBrowser": "chromium", on Linux, if Chromium is already started

You can do it in 2 steps:-
1) In package.json under scripts section create a key value as "devserver": "live-server --browser=Chrome" .
2) In terminal run npm run devserver

This will open application in chrome.

this solution in working to open application by default on chrome terminal. But can we do some setting in IDE itself? In old version of VS code task configuration works but for newer version you have to install Open in Browser extension from the marketplace. For Reference
  • Click windows+i
  • Choose Apps
  • Choose default apps
  • Change (web browser ) to chrome (by change anyway)


liveServer.settings.CustomBrowser:

To change your system's default browser. Default value is "Null" [String, not null]. (It will open your system's default browser.) Available Options : chrome chrome:PrivateMode firefox firefox:PrivateMode microsoft-edge

77.6k 14 14 gold badges 243 243 silver badges 254 254 bronze badges

If you had installed globally your live-server while using npm package, you can easily start your live-server on the browser of your choice by passing browser option on your launching command:

On your terminal type : live-server --browser=BROWSER_NAME Eg: live-server --browser=firefox, live-server --browser=safari

and some macbooks accepts live-server --browser='Google Chrome' for google chrome while others live-server --browser=google-chrome NB:For mac live-server --browser=chrome will throw an error

113 1 1 gold badge 2 2 silver badges 12 12 bronze badges
    Go to Files > Preferences > Settings and search .json and click on settings.json file

or press SHIFT + CTRL + P and tab Preferences: Open Settings (JSON)

Write on JSON file

"liveServer.settings.AdvanceCustomBrowserCmdLine": To set your any favorite browser (Eg: Chrome Canary, Firefox Nightly) using advance Command Line. (You can specify full path of your favorite custom browser).

  • This setting will override "CustomBrowser" and "ChromeDebuggingAttachment" settings.
  • Default Value is null
  • Examples:
    • chrome --incognito --headless --remote-debugging-port=9222
    • C:\Program Files\Firefox Developer Edition\firefox.exe --private-window

    Check out my photo or see this link on GitHub for more details.

    Note: Either use "AdvanceCustomBrowserCmdLine" or "CustomBrowser" . If you use both, "AdvanceCustomBrowserCmdLine" has higher priority.

    I'm trying to change the default browser to Chrome at VS Community 2015, I'm not talking about release browser, but the browser that opens when I press CTRL-Click. It opens automatically on Internet Explorer.

    Opens on Explorer


    24.2k 20 20 gold badges 64 64 silver badges 113 113 bronze badges 451 1 1 gold badge 4 4 silver badges 6 6 bronze badges What does "CTRL-Press" mean in terms of keyboard keys? @UweKeim I think OP means opening links (e.g. in comments or string literals) i meant CTRL-Click , thanks and it means that i press on a link in VS I have the same issue in VS2015 Enterprise; e.g., ctrl-click a link in a README.txt from GitHub produces the page but it gives the warning about it being opened in IE instead of using Microsoft Edge. Looking under "Tools > Options > Environment > Web Browser" the note at the bottom states clicking the [Internet Explorer Options. ] button will "affect both Internet Explorer and the internal web browser." That implies that VS is using its own internal browser -- apparently a wrap of IE. :-(

    5 Answers 5

    Changing Visual Studio 2017 default browser

    Click the drop down icon next to "Start" project button and choose your web browser

    The question is not about debugging. But still the first result I found in google and answered my question :) 1+ from me. After a lot of frustration I finally found someting that works, thanks OMG +1 Microsoft for putting functionality where it SHOULD be, but users still unable to find it. I might not be clear from the other comments, but this is an answer to a different question. The question is about the internal VS browser, but the answer is about the browser used for debugging apps.

    Right-click your html file -> Browse with -> Click on your favorite browser -> Set as Default.

    Note that the next time you'd right-click your html file, you'd still see it says: "View in Browser (Internet Explorer)", but clicking it will actually browse with the default browser we set above.

    6,131 2 2 gold badges 28 28 silver badges 62 62 bronze badges

    To change the source default editor:

    Tools -> Options -> Search for "browser" -> View Source in "external editor" -> put the path to your preferred.

    Thank you. Your answer was what i was looking for. Now VS2019 is using Chrome as the default browser.

    None of this produces the result of changing the Browser used by VS to view an html file from View -> Other Windows -> Web Browser.

    OR may I am just dense and am unable to read or follow what has been stated here.

    After spending 5 minutes searching online and not finding what I want, I dug into the Visual Studio interface and found it:

    The internal web browser in Visual Studio 2019 (at least), is in View => Other Windows => Web Browser , or CTRL+ALT+R on Windows.

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