How to disable cross-device action mirroring functionality of BrowserSync? (GhostMode)

Question

Our team used the gulp-angular generator with yeoman to scaffold out our web app. It uses browsersync to handle live reloads, which we want. However, we just deployed to our

Answer 1

In case you use the QuickStart seed to initialize your project, the settings of BrowserSync can be configured using bs-config.json file at project's root folder.

My file contains the following:

{
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  },
  "ghostMode": false
}

Answer 2

Sorry to answer my own question, but I found the answer a few days later and since no one has answered this yet I thought I'd post my solution.

The problem we were encountering seems to be caused by a feature in BrowserSync called "GhostMode" which mirrors click and scroll actions, as well as several form actions, across devices. Disabling this is very simple: Look for your BrowserSync config file (for me it was at root/node_modules/browser-sync/lib/default.config.js) and open that. Search in that file for something similar to the following:

ghostMode: {
    clicks: true,
    scroll: true,
    forms: {
        submit: true,
        inputs: true,
        toggles: true
    }
},

and change it so that it says ghostMode: false,

This fixed our issue and hopefully this will help others if they encounter the same problem.

Answer 3

For JHIPSTER application just add the ghostMode: false,

 new BrowserSyncPlugin({
        ghostMode: false,
        host: 'localhost',
        port: 9000,
        proxy: {
            target: 'http://localhost:9060',
            ws: true
        }

Answer 4

If Browsersync is launched over the command line, it'll provide two different addresses:

1. Select the address for the UI / Admin Controls

2. From there you can setup configuration settings with the UI and disable cross device mirroring

Answer 5

Faced same problem, you can simply set ghost mode to false in init options.

     browserSync.instance = browserSync.init({
      startPath: '/',
      ghostMode: false,
      server: server,
      browser: browser
     });

no need to change in default.config.js :)