Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Browser refresh after breakpoint

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??

like image 460
Benny Afriat Avatar asked Jul 30 '18 08:07

Benny Afriat


People also ask

How do I refresh inspect in chrome?

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.

How do I refresh in dev tools?

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.

How do you get to the next breakpoint in chrome?

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.

Why does JavaScript only work after opening Developer Tools in chrome?

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.


2 Answers

browserSync.init({ files: ['./**/*'], startPath: '/src', server: '', watchOptions: { ignored: 'node_modules/*', ignoreInitial: true }, socket: { clients: { heartbeatTimeout: 60000 } } }); add socket object in your browserSync init.

like image 143
Lakshmi Narasimhulu Gujjula Avatar answered Sep 20 '22 23:09

Lakshmi Narasimhulu Gujjula


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! :)

like image 38
Patrick Avatar answered Sep 20 '22 23:09

Patrick