BrowserSync Gulp doesn't open in Chrome

Question

I try to open my website on localhost using BrowserSync and Gulp in Chrome, but it doesn't work. Default, it open in Firefox and everything works well. But, when I change params in gulpfile.js to open website in Chrome - I have this information:

[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false) My config in gulpfile.js:

// browser-sync options
// see: https://www.browsersync.io/docs/options/
var browserSyncOptions = {
    browser: "google chrome",
    proxy: "localhost",
    notify: false
};

I tried "chrome", "chrome-browser", nothing happend. What I should to do? Notice: I have Ubuntu 17.04, Chrome is my default browser.

Answer 1

function webserver() {
  browserSync.init({
    logLevel: "debug",
    browser: ["chrome", "firefox"],
    open: true,
    port: PORT,
    server: URL
  });
}
$ gulp serve
[10:02:20] Using gulpfile C:\Projects\SynologyDrive\Siteart\gulpfile.mjs
[10:02:20] Starting 'serve'...
[10:02:20] Starting 'webserver'...
[10:02:20] Starting 'watchFiles'...
[Browsersync] [debug] -> Starting Step: Finding an empty port
[Browsersync] [debug] Found a free port: 3001
[Browsersync] [debug] Setting Option: {cyan:port} - {magenta:3001
[Browsersync] [debug] +  Step Complete: Finding an empty port
[Browsersync] [debug] -> Starting Step: Getting an extra port for Proxy
[Browsersync] [debug] +  Step Complete: Getting an extra port for Proxy
[Browsersync] [debug] -> Starting Step: Checking online status
[Browsersync] [debug] Resolved www.google.com, setting online: true
[Browsersync] [debug] Setting Option: {cyan:online} - {magenta:true
[Browsersync] [debug] +  Step Complete: Checking online status
[Browsersync] [debug] -> Starting Step: Resolve user plugins from options
[Browsersync] [debug] +  Step Complete: Resolve user plugins from options
[Browsersync] [debug] -> Starting Step: Set Urls and other options that rely on port/online status
[Browsersync] [debug] Setting multiple Options
[Browsersync] [debug] +  Step Complete: Set Urls and other options that rely on port/online status
[Browsersync] [debug] -> Starting Step: Setting Internal Events
[Browsersync] [debug] +  Step Complete: Setting Internal Events
[Browsersync] [debug] -> Starting Step: Setting file watchers
[Browsersync] [debug] +  Step Complete: Setting file watchers
[Browsersync] [debug] -> Starting Step: Merging middlewares from core + plugins
[Browsersync] [debug] Setting Option: {cyan:middleware} - {magenta:List []
[Browsersync] [debug] +  Step Complete: Merging middlewares from core + plugins
[Browsersync] [debug] -> Starting Step: Starting the Server
[Browsersync] [debug] Static Server running ({magenta:http}) ...
[Browsersync] [debug] Running mode: SERVER
[Browsersync] [debug] +  Step Complete: Starting the Server
[Browsersync] [debug] -> Starting Step: Starting the HTTPS Tunnel
[Browsersync] [debug] +  Step Complete: Starting the HTTPS Tunnel
[Browsersync] [debug] -> Starting Step: Starting the web-socket server
[Browsersync] [debug] Setting Option: {cyan:clientEvents} - {magenta:List [ "scroll", "scroll:element", "input:text", "input:toggles", "form:submit", "form:reset", "click" ]
[Browsersync] [debug] +  Step Complete: Starting the web-socket server
[Browsersync] [debug] -> Starting Step: Starting the UI
[Browsersync] [debug] Setting Option: {cyan:session} - {magenta:1736586140865
[Browsersync] [UI] Starting Step: Setting default plugins
[Browsersync] [UI] Step Complete: %s Setting default plugins
[Browsersync] [UI] Starting Step: Finding a free port
[Browsersync] [UI] Step Complete: %s Finding a free port
[Browsersync] [UI] Starting Step: Setting options also relevant to UI from BS
[Browsersync] [UI] Step Complete: %s Setting options also relevant to UI from BS
[Browsersync] [UI] Starting Step: Setting available URLS for UI
[Browsersync] [debug] Getting option via path: {magenta:[ 'urls' ]
[Browsersync] [UI] Step Complete: %s Setting available URLS for UI
[Browsersync] [UI] Starting Step: Starting the Control Panel Server
[Browsersync] [UI] Using port 3002
[Browsersync] [UI] Step Complete: %s Starting the Control Panel Server
[Browsersync] [UI] Starting Step: Add element events
[Browsersync] [UI] Step Complete: %s Add element events
[Browsersync] [UI] Starting Step: Registering default plugins
[Browsersync] [UI] Step Complete: %s Registering default plugins
[Browsersync] [UI] Starting Step: Add options setting event
[Browsersync] [UI] Step Complete: %s Add options setting event
[Browsersync] [debug] +  Step Complete: Starting the UI
[Browsersync] [debug] -> Starting Step: Merge UI settings
[Browsersync] [debug] Setting Option: {cyan:urls} - {magenta:Map { "local": "http://localhost:3001", "external": "http://172.24.112.1:3001", "ui": "http://localhost:3002", "ui-external": "http://172.24.112.1:3002" }
[Browsersync] [debug] +  Step Complete: Merge UI settings
[Browsersync] [debug] -> Starting Step: Init user plugins
[Browsersync] [debug] Setting Option: {cyan:userPlugins} - {magenta:
[Browsersync] [debug] +  Step Complete: Init user plugins
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3001
    External: http://172.24.112.1:3001
 -------------------------------------
          UI: http://localhost:3002
 UI External: http://172.24.112.1:3002
 -------------------------------------
[Browsersync] Serving files from: ./docs
[Browsersync] Browser Connected: Firefox, version: 134.0
[Browsersync] Browser Connected: Chrome, version: 131.0.0.0
[Browsersync] Browser Connected: Firefox, version: 134.0

This worked for me, also on Port:3000

Answer 2

Try dropping Google from browser sync call... var browserSyncOptions = { browser: "google chrome", proxy: "localhost:3001", notify: false };

So you just have chrome. var browserSyncOptions = { browser: "chrome", proxy: "localhost:3001", notify: false };

Answer 3

I think the issue is with your port, try to change your proxy to below :

var browserSyncOptions = {
    browser: "google chrome",
    proxy: "localhost:3001",
    notify: false
};

and check your website in chrome with this port :

http://localhost:3001

Update :

Also try to use the same port in browserSync :

browserSync({ 
   proxy: 'localhost:3001' 
});