How to change default browser with VS Code's "open with live server"? - visual-studio-code

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?

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.

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

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

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

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"

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

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.

How to customize your non-traditional browser in "liveServer"?
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.

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

steps (change default browser for open with Live Server)
Go to File > Prefrences > Settings
Copy and paste liveServer.settings.CustomBrowser into the Search settings bar
Find the setting: Live Server › Settings: Custom Browser
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).

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

On Mac, via VS Code menu:
Code > Preferences > Settings > type browser in the Search settings box at the top

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

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.

Related

How to make firefox developer edition as default browser for development [duplicate]

I am setting up my VS Code environment for the first time, but I can't figure out how to set Chrome as the default browser for the workspace.
Go to file-> preferences -> user settings -> search "By Default it will open your default favorite browser" set your browser.
The other StackOverflow questions regarding the browser, had to do with opening a specific file. Here are the steps to creating a tasks.json file in a brand new environment.
From the Tasks menu, Select 'Configure Tasks'
The entry field prompts you for 'Select a task to configure'
Choose 'Create tasks.json file from template'
Edit the file to include the following block:
{
"version": "0.1.0",
"command": "Chrome",
"windows": {
"command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
},
"args": ["${file}"]
}
Chrome can be launched by way of debugging your application. Within launch.json, the configurations[].serverReadyAction.action configuration was given a possible value of debugWithChrome in the VS Code February 2019 release. Note that this will also require you have the Debugger for Chrome extension installed. You will not receive a warning if the extension is not installed and you've configured launch.json to use debugWithChrome.
Note: Configuring launch.json with debugWithChrome will work even if you launch using CTRL+F5 to run the app without debugging.
Go to Settings -> Extensions -> Live Server Config -> Update Default Browser:
This Alternate Way helped me:)
GoTo-->Google Chrome-->Settings-->Default browser-->Set Google Chrome as default browser
The method of modifying tasks.json no longer works in newer versions of Visual Studio Code. The easiest way to be able to launch your code in a browser is to install the Open in Browser extension from the marketplace.
After it is installed and VS Code is reloaded, you can go to your code and press ALT + B to launch your application in your default browser or ALT + SHIFT + B to select the browser you want to use.
You can also right click and select these option from a drop down menu, but I mention this last because this currently does not work in some versions of VS Code.
Just a helper for the windows users, I just installed windows 10 again and I was wondering how do I set my vscode to open the server (web) using chrome instead of edge, so to do that you just have to configure your windows to use google chrome as default, you don't need to change anything in vscode, I hope this helps someone.
ps: normally you can go open browser you want to be default and setup the configuration. so in chrome you have to go to configurations and scroll down to default browser.
When you want to use your own browser using "Open with Live Server" without change OS globally configuration.
In Windows, Visual Studio Code (ver. 1.70.1 (July 2022)). Go to "File" > "Preferences" > "Settings"
Then select a tab, "User" tab if you want your desired browser for all your projects, or select "Workspace" tab or "ProjectName" tab for especified projects.
Then go to "Extensions" > "Live Server Config" > "Settings: Custom Browser" finally change the 'null' value selecting the browser of your preference from the list (apparently this list depends on installed browsers but i'm not sure).
search for local.testsettings on vscode on the search and for web tests, change the browser to chrome and apply.
The Live Server extension was not appearing for me on settings. However, I installed Open in Browser and typed "liveServer.settings.CustomBrowser" in settings and the extension appeared with a dropdown box in which I was able to change the default browser.
Hope this helps!
This may be old but I found something that could help.
First go to Settings/Apps/Default Apps. Set your browser as default.
Next go to VSCODE and go to File/Preferences/Settings/Extensions/LiveServerConfig
Then scroll to settings: CustomBrowser
Change it to your custom browser
Note- If the browsers don't show up on VSCODE then you need to set it to default in the settings.
You can adjust settings in your computer to open.HTML file extensions in chrome as a default browser:
for Example in PC windows:
go to Control Panel > Default programs > Associate a file type or protocol with a specific programs >HTML extension and choose Chrome.
In my case changing the default browser in the system settings of my pc did it.
None of the above works in my case(my version is August 2022 1.71) to make it work I went straight to **
File-->Preferences-->Settings-->Extensions-->Plugin open-in browser
** from there was a option which says Default set browser so I choose Brave as there is no ads in it while playing the video as chrome plays ads so for getting a proper feeling of using my self made Jarvis I used Brave.
Thanks
Click settings -> enter: default browser -> find: Open-in-browser:Default -> enter: Google Chrome
Google Chrome > Settings (left sidebar) > Default browser = Google Chrome
Just change your default web browser in your OS.
In Windows 10, you can search "default browser" then the wizard for changing it, will be appear.

How do I set up VS Code Live Server extension to use Firefox Developer on Linux?

I'm currently running Elementary OS 5.1.7 Hera, and just downloaded Firefox Developer edition, which runs independent to the regular Firefox, so Live Server extension doesn't recognize FDE.
Goto to settings
Search for liveServer.settings.AdvanceCustomBrowserCmdLine
Click on Edit in settings.json
Find "liveServer.settings.AdvanceCustomBrowserCmdLine": "",
Now put Firefox Developer Edition file location on the value.
Like this:
"liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Firefox Developer Edition\\firefox.exe",
Dont forget to put // (double slash on it) ;) ;) ;)
for macOS users, this should be
"liveServer.settings.CustomBrowser": "/Applications/Firefox Developer Edition.app"
The Live Server extention opens the localhost tab on your default browser, but you can copy the URL into any other browser and it will work, as long as the server is running.
If you want the tab to always open in Firefox Developer Edition, you can change the settings of Live Server.
In VScode, go to File > Preferences > Settings (or Code > Preferences > Settings on Mac)
In the search bar, type liveServer.settings.AdvanceCustomBrowserCmdLine
Click on Edit in settings.json
change the value of "liveServer.settings.AdvanceCustomBrowserCmdLine" to the location of Firefox Developer Edition (for example, C:\Program Files\Firefox Developer Edition\firefox.exe)
Note: Live Server also has a CustomBrowser setting, which is simpler to edit, but it has limited options and Firefox Developer Edition is not one of them. AdvanceCustomBrowserCmdLine overrides CustomBrowser.
You can read the Live Server docs here.
Do not make the same mistake I did, don't use quotation marks.
Use this line inside your json file, if you want to use the Firefox Developer Edition default location:
"liveServer.settings.AdvanceCustomBrowserCmdLine": C:\Program Files\Firefox Developer Edition\firefox.exe,

How to suppress Chrome DevTools warning: 'DevTools failed to load SourceMap: Could not load content for...'

Context
For many of my js files I have no source map. When using the devtools console it pollutes the warnings about that. I would not like to turn of all warnings, but those are not really useful for me
Question
How to suppress Chrome DevTools warning: 'DevTools failed to load SourceMap: Could not load content for...'?
Hide them via console filter like -/(load|parse)\sSourceMap/
(using a /regexp/ with \s seems to be the only working method of specifying strings with spaces)
In DevTools (F12) -> Settings (F1) :
Disable both "enable JS source maps" and "enable CSS source maps" in "Preferences -> Sources"
If you open DevTools (F12) then look for the cog "Preferences" top/right you can disable "Enable JavaScript source maps" under the Sources section by un-checking that option.
This solution is only if you don't want to use that particular extension (which is causing the issue) on your site or to remove the addon from your browser.
Goto the console.
Click on the link that is printedn in the console log. the link starts with "chrome-extension", it will take you to the extension's page, you can find the name in the address bar
Go to the extensions( Chrome menu > More tools > Extensions ).
You can either remove it from the browser or restrict the access by changing the site access to On click choosing from the options of the extension as below.

Can't get "View in Browser" or tool tip to work in Visual Studio Code editor

I can't get two features in Microsoft's Visual Studio Code to work.
1) I can't activate the "View in Browser" extension.
2) The tool tip feature isn't displayed in the editor.
Thanks in advance.
I would suggest you re-install the latest version from vscode
Open vscode, press F1, then type 'ext install[space]', [space] = space key;
Select "Extensions: Install Extension", then type 'view in browser'; Click bottom right 'tree' like logo to install extension; then Restart Now.
Open vscode, create an html file, then press Ctrl + F1 to view the html in your default browser.
Reference:
https://marketplace.visualstudio.com/items?itemName=qinjia.view-in-browser
Instead of using View in browser extension, I suggest you to use View in Default Application Extension.
Press F1 and narrow down the list commands by typing extension
Select the Extensions: Install Extension command.
Search for this extension by typing in the text view in default application
Once installed, you will be prompted to restart your instance of Visual Studio Code to use the extension
After saving your HTML file, press first ctrl+k and then ctrl+b.Your HTML file will be open in your default browser
Go To File - > Settings.
It will open a new window to the right.
Add your proxy settings there as:
"http.proxy" : "value".
Restart the Visual Studio Code.
It should work.

Is there a way to add Google Chrome as an external web browser in Flash Builder Standalone for Mac?

It currently seems impossible to add Google Chrome as an external web browser in Flash Builder Standalone for Mac. In this context, Eclipse only cares about "Unix executables" and not .app files.
For example, the path to Firefox on a Mac is: /Applications/Firefox.app/Contents/MacOS/firefox-bin
which is only found by right-clicking and choosing 'Show Package Contents' on Firefox.app in your Applications directory.
If you try to add Google Chrome as a new external web browser, you'll have to repeat this process to navigate to /Applications/Google Chrome.app/Contents/MacOS where the 'Google Chrome' Unix exxecutable resides.
The problem is that space in the name. If you attempt to click OK in Eclipse, you'll get an error preventing you from continuing:
The location value is not a valid path
name
Are there any workarounds for this so I can use Chrome as my development browser only? I did some searching and all I could come up with was this:
https://bugs.eclipse.org/bugs/show_bug.cgi?id=297273
UPDATE: A kind and savvy Flash Builder engineer gave me a helpful tip. Note that you'll need to show hidden files in Mac, by opening Terminal and entering the following command:
defaults write com.apple.finder AppleShowAllFiles TRUE
killall Finder
Press Return to relaunch Finder. Once hidden files are shown, "You’ll find what you need in [YOUR WORKSPACE]/.metadata/.plugins/org.eclipse.core.runtime/.settings/org.eclipse.ui.browser.prefs.
There’s a 'browsers' property there that defines XML for defining Eclipse’s web browsers. Add a new browser location and name and restart Flash Builder."
In this case you'd add:
<external location\="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" name\="Google Chrome"/>\n
I can confirm that this works. Hopefully we won't have to resort to this kind of hackery on the next go around.
You can do this from the UI in FB 4.5 - However, you need this exact path (unquoted and unescaped) in Preferences->Web Browser. Select "Use External Browser" and add the line below as the location (You may not need the 'name\="Google Chrome" bit, but looks like it worked all in one line for me):
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" name\="Google Chrome
You could create an executable here: /usr/local/bin/chrome with these contents:
#!/bin/sh
open -a 'Google Chrome' $1 &
And then ensure Chrome's Preferences settings for "Web Browser" are this for external web browser "Google Chrome":
Name: Google Chrome
Location: /usr/local/bin/chrome
Parameters: %URL%
Update
As of Eclipse 4.3.1, the script approach (below) no longer works, but the simpler option of simply selecting "Google Chrome.app" as an external browser (using Eclipse UI) is fixed.
Old (obsolete) answer
My workaround was to create a shell script that opens Chrome (see below), and point Eclipse to this script. In this way Chrome is opened with 2 tabs - the home page and the requested page - but this was good enough for me.
#! /bin/sh
open /Applications/Google\ Chrome.app $*
You need the path to the Unix Executable file of Google Chrome.
How to:
in Finder, right click Google Chrome.app "Show Package Content".
Navigate down to Content/MacOS
cmd + i and copy the path to the Unix Executable File
In Eclipse Preferences Web Browser / Location, "brows.."
Paste in the path to the Unix Executable.
The path, something like: /Applications/Google Chrome.app/Contents/MacOS
Location: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
Parameters: -sandbox
The simplest way to get Flash Builder Standalone for Mac to recognize Chrome as the default system browser is
Open Safari
Go to menu Safari > Preference > General
Change 'Default web browser' : Safari
Change 'Default web browser' : Chrome
Close Safari
This solution is more general as it applies to any application which chooses the incorrect system browser. (thanks to Kelvin Lawrence at IBM)
For me worked with the following configuration:
Location: /usr/bin/open
Parameters: -a "Google Chrome.app" %URL%
I found the solution in a blog's post that doesn't exist anymore, it involves configuring the Location to be /usr/bin/open and the parameter is %URL%.
You need to make sure that google chrome is your default browser and it will work properly. This is the only method that worked for me on OSX Lion.
/Applications/Google\ Chrome.app/Contents/MacOS
escape the space in the path to the google chrome executable. OS X only cares about unix executables, because its posix based as well, it doesn't actually have much to do with eclipse.