How to change default browser with VS Code's "open with live server"?

Question

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?

Answer 1

Open live server in Google Chrome Canary [MacOS]

"liveServer.settings.AdvanceCustomBrowserCmdLine": "/Applications/Google Chrome Canary.app"

Past this line in setting.json in place of "liveServer.settings.CustomBrowser": "<-default browser->"

Answer 2

steps (change default browser for open with Live Server)

1. Go to File > Prefrences > Settings
2. Copy and paste liveServer.settings.CustomBrowser into the Search settings bar
3. Find the setting: Live Server › Settings: Custom Browser
4. Choose chrome or chrome:PrivateMode from the dropdown menu

Next time you Open with Live Server or Go live, the extension will automatically open with Chrome (no need to restart VSCode).

Answer 3

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

Answer 4

• Click windows+i
• Choose Apps
• Choose default apps
• Change (web browser ) to chrome (by change anyway)

Answer 5

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

Example:

"liveServer.settings.CustomBrowser": "Google Chrome Dev"

Answer 6

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

  • blisk

Not enough? need more? open an/a issue/pull request on github. For now, use liveServer.settings.AdvanceCustomBrowserCmdLine settings (see below).

• 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 //Remove --Private-windows for normal Window

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

Answer 7

open the visual studio and go to file - preferences - extension - right-click over Live server setting icon - then choose

edit in setting JSON then you will find that sentence

"liveServer.settings.AdvanceCustomBrowserCmdLine": ""

just put your browser name between the double quotes

Answer 8

On Mac, via VS Code menu:

Code > Preferences > Settings > type browser in the Search settings box at the top

Answer 9

How to customize your non-traditional browser in "liveServer"?

1. Go to Files > Preferences > Settings and search .json and click on settings.json file

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

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

Answer 10

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

or

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.

e.g.

"editor.formatOnSave": true,
"liveServer.settings.CustomBrowser": "chrome"

Answer 11

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

Answer 12

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.

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

Answer 14

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

Answer 15

If you are using the live server extension https://github.com/ritwickdey/vscode-live-server it has this setting:

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