Something that drives me crazy, it started suddenly to all my team members. If you pause at a breakpoint for more than a couple of seconds and then continue (F8) the browser refreshes the page.
it happens on our mac and windows machines.
We are running an AngularJS project with gulp and browser-sync. Even if i turn of all the watchers it still happens.
What can i do??
browserSync.init({
files: ['./**/*'],
startPath: '/src',
server: '',
watchOptions: {
ignored: 'node_modules/*',
ignoreInitial: true
},
socket: {
clients: { heartbeatTimeout: 60000 }
}
});
add socket object in your browserSync init.
For anyone experiencing this issue, it seems there was an issue in the dependencies of BrowserSync that was addressed in the newer versions: https://github.com/BrowserSync/browser-sync/issues/1591
The other solution mentioned here doesn't seem to really fix the issue as explained in the GitHub issue:
The increasing of heartbeatTimeout doesn't help in all cases. It just reduces the possibility of the page refreshing.
It works in cases when heartbeatTimeout is not ended. What I mean by that is the following.
Imagine that you have set the timeout to 60000 ms. And just 2 seconds have passed from the beginning of the timeout cycle. And then you stop the application by breakpoint for 10 seconds. 2 + 10 = 12 seconds, so the application will resume work as needed without the page refreshing.
But in case when 58 seconds have passed from the beginning of timeout cycle, for instance, and then the application is stopped by the breakpoint for 10 seconds. 58 + 10 = 68 seconds. It more then heartbeat timeout, so the application will be refreshed by browsersync after resuming.
This issue started in v2.24.5 and was resolved in v2.25.1
So updating BrowserSync to any version after v2.25.1 should fix your issues. I am currently at v2.26.3 and it seems like it has been resolved for me.
Happy coding! :)
