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??
Open the Chrome Dev Tools by pressing F12. Once the Chrome dev tools are open, just right-click on the refresh button and a menu will drop down. This menu gives you the option of doing a hard refresh, or even clearing the cache and do a hard refresh automatically.
Hold ⇧ Shift and click the Reload button. Or, hold down ⌘ Cmd and ⇧ Shift key and then press R. Or, Open the Chrome Dev Tools by pressing fn and F12 together. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down.
You can easily jump, via the debugger, to new JavaScript destinations when you are paused at a breakpoint. To do this, hold the Cmd/Ctrl key while you are paused at a breakpoint. DevTools displays jumpable destinations. You can then click 🖱 to jump to that destination.
It sounds like you might have some debugging code in your javascript. The experience you're describing is typical of code which contain console. log() or any of the other console functionality. The console object is only activated when the Dev Toolbar is opened.
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! :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With