Chrome Network Emulation and Change Events

This post is more than 2 years old.

So this is more a FYI then anything else, but a while ago, Chrome released support to emulate different network conditions in dev tools. (Oddly, it doesn't seem to be documented in the Chrome DevTools Network help page.) Basically you can select from different speeds and even quickly toggle offline/online. If you've never seen it - here is what it looks like:

Network Tools

Clicking the dropdown reveals the following options:

Network Tools

So this worked well, except in one pretty important aspect. If you had JavaScript code that listened for network changes or simply checked for the connection (see documentation here: "Online and offline events") it would not pick up on changes done via Dev Tools.

So for those of us trying to write code to properly handle a web page going offline, that meant you had to test the old fashion way - turn your wifi off. (Which killed everything, including your super important Twitter feed.)

I filed a bug report for this nearly two years ago: Issue 422956

Yesterday I was doing some testing and discovered that it appears to be fixed. I tested using the simple Gist in my bug report and navigator.onLine correctly responded. Also, my online and offline event handlers ran fine too.

Now it worries me that the bug hasn't been updated. It's possible that it hasn't been QAed. But for now, it certainly seems a bit safe to use.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Šime Vidas posted on 9/16/2016 at 6:10 AM

The bug you’re referring to has been marked as duplicate (look at the info in the left column). The ‘original’ bug is marked as fixed, which means no further updates are needed on these bugs.

Just for fun, I made a demo (if I’ll ever need it): https://jsbin.com/yirulaq/1...

Comment 2 (In reply to #1) by Raymond Camden posted on 9/16/2016 at 1:24 PM

So I swear I looked for that, but the darn UI was kind of confusing. Thanks!