211

Is there a way I can simulate various connection speeds from within Chrome?

I need to be able to check http://localhost with varying speeds.

I know there are standalone applications that can do this, but I'd rather do this inside Chrome.

hichris123
  • 9,735
  • 15
  • 51
  • 66
user1103744
  • 2,421
  • 4
  • 17
  • 20

12 Answers12

143

If you are running Linux, the following command is really useful for this:

trickle -s -d 50 -w 100 firefox

The -s tells the command to run standalone, the -d 50 tells it to limit bandwidth to 50 KB/s, the -w 100 set the peak detection window size to 100 KB. firefox tells the command to start firefox with all of this rate limiting applied to any sites it attempts to load.

Update

Chrome 38 is out now and includes throttling. To find it, bring up the Developer Tools: Ctrl+Shift+I does it on my machine, otherwise Menu->More Tools->Developer Tools will bring you there.

Then Toggle Device Mode by clicking the phone in the upper left of the Developer Tools Panel (see the tooltip below).

Toggle device mode

Then activate throttling like so.

Activate Chrome throttling

If you find this a bit clunky, my suggestion above works for both Chrome and Firefox.

Richard
  • 44,865
  • 24
  • 144
  • 216
  • I tried the dev feature in Chrome and uploaded a YouTube video. It didn't seem to throttle the upload at all. – WHol Sep 22 '15 at 11:43
  • 1
    The throttle feature isn't an upload limiter. It's for download testing and seeing how your page loads on a different connection. – Nelson Sep 24 '16 at 11:18
118

I'd recommend Charles Proxy - you can choose to slowdown individual sites, also has a whole bunch of HTTP inspection tools.

Edit:

As of June 2014, Chrome now has the ability to do this natively in DevTools - you'll need Chrome 38 though.

The option is accessible from the Network tab via a drop down at the end of the toolbar.

Andy Davies
  • 5,697
  • 2
  • 24
  • 21
  • 70
    A warning: Charles is not free – Charlie Oct 23 '13 at 16:35
  • 8
    Where do you find this in chrome devtools? – Paul Jul 18 '14 at 15:22
  • 15
    Fire up DevTools in Canary, the along the top you have the search icon, phone icon, Elements, Network etc. Click the phone icon and then choose Emulation in the bottom panel, network emulation options are in that panel – Andy Davies Jul 18 '14 at 21:33
  • 1
    @Andy ughh... How did you get the phone icon to appear? They keep moving things around in Canary... – Nathan Jul 30 '14 at 22:30
  • Mine always there do I'm not sure :-/ – Andy Davies Aug 02 '14 at 20:23
  • How do you do this within Chromes Dev Tools? – Howdy_McGee Sep 25 '14 at 20:31
  • @Howdy_McGee It's only in Canary at the moment, bring up dev tools, hit the phone icon in menu bar then in the bottom panel emulation panel there should be a throttling drop down – Andy Davies Sep 29 '14 at 14:24
  • 36
    Unfortunately the throttling in Chrome only works with downloads, not uploads. – JesseBuesking Oct 18 '14 at 23:43
  • I should also add that throttling only works for "device" emulation not for the desktop browser. Things like drag and drop of files won't work. – Razor Jun 18 '15 at 02:30
  • Thanks JesseBuesking for pointing that out. It's very important to be able to throttle uploads for testing purposes. I really hope they add this soon. – Tyguy7 Jun 30 '15 at 18:49
  • At the present time you can find the option under Network tab: throttling. There you can find several options. – Fernando Feb 17 '16 at 15:18
  • Chrome **61** has `Network Throttling Profiles` throttling setting with supporting _Download_ , _Upload_ and _Latency_ limits. – Fredrick Gauss Oct 09 '17 at 12:46
70

Starting with Chrome 38 you can do this without any plugins. Just click inspect element (or F12 hotkey), then click on toggle device mod (the phone button)

enter image description here

and you will see something like this:

enter image description here

Among many other features it allows you to simulate specific internet connection (3G, GPRS)

Salvador Dali
  • 182,715
  • 129
  • 638
  • 708
  • 14
    This appears to work nicely for page load testing, however testing upload (using xmlhttpreq2) did not appear to be limited. - offline and no throttling worked, but during upload the process appears to ignore the GPRS etc limits - it would be nice if upload could also be shaped so we can test progress bars, timeouts etc. – Josh Mc Dec 22 '14 at 07:03
  • 2
    This is correct, it is an outstanding issue https://code.google.com/p/chromium/issues/detail?id=414319 – Calin Apr 01 '15 at 17:43
64

As of today you can throttle your connection natively in Google Chrome Canary 46.0.2489.0. Simply open up Dev Tools and head over to the Network tab:

enter image description here

Pono
  • 9,394
  • 8
  • 48
  • 64
19

As Michael said, the Chrome extension API doesn't offer a reliable way of doing this. On the other hand: there's a software I've been using myself for quite some time.

Try Sloppy, a Java application that simulates low bandwidth. It's browser independent, it's very easy to use and, best of all, it's free!

Community
  • 1
  • 1
caiosm1005
  • 1,533
  • 1
  • 18
  • 31
13

If you are on a Mac, the Chrome dev team recommend the 'Network Link Conditioner Tool'

Either:

Xcode > Open Developer Tool > More Developer Tools > Hardware IO Tools for Xcode

Or if you don't want to install Xcode:

Go to the Apple Download Center and search for Hardware IO Tools

https://developer.apple.com/downloads/index.action

Sean McClory
  • 4,052
  • 3
  • 29
  • 35
  • To search for Hardware IO Tools on Apple's site as of March 2016, go to [this link](https://developer.apple.com/downloads/?q=Hardware%20IO%20Tools). The "Network Link Conditioner" Preference Pane allows you to set the downlink & uplink bandwidth, % of packets dropped and delay. – Greg Sadetsky Mar 19 '16 at 18:55
12

Original article: https://helpdeskgeek.com/networking/simulate-slow-internet-connection-testing/

Simulate Slow Connection using Chrome Go ahead and install Chrome if you don’t already have it installed on your system. Once you do, open a new tab and then press CTRL + SHIFT + I to open the developer tools window or click on the hamburger icon, then More tools and then Developer tools.

enter image description here

This will bring up the Developer Tools window, which will probably be docked on the right side of the screen. I prefer it docked at the bottom of the screen since you can see more data. To do this, click on the three vertical dots and then click on the middle dock position.

enter image description here

Now go ahead and click on the Network tab. On the right, you should see a label called No Throttling.

enter image description here

If you click on that, you’ll get a dropdown list of a pre-configured speed that you can use to simulate a slow connection.

enter image description here

The choices range from Offline to WiFi and the numbers are shown as Latency, Download, Upload. The slowest is GPRS followed by Regular 2G, then Good 2G, then Regular 3G, Good 3G, Regular 4G, DSL and then WiFi. Pick one of the options and then reload the page you are on or type in another URL in the address bar. Just make sure you are in the same tab where the developer tools are being displayed. The throttling only works for the tab you have it enabled for.

If you want to use your own specific values, you can click the Add button under Custom. Click on the Add Custom Profile button to add a new profile.

enter image description here

When using GPRS, it took www.google.com a whopping 16 seconds to load! Overall, this is a great tool that is built right into Chrome that you can use for testing your website load time on slower connections. If you have any questions, feel free to comment. Enjoy!

slideshowp2
  • 38,463
  • 29
  • 127
  • 255
Arbaz Alam
  • 1,036
  • 13
  • 23
11

In Chrome Canary now you can limit the network throughput. This can be done in the "Network" options of the "Emulation" tab of the Console in the Dev Tools.

You might need to activate the Chrome flag "Enable Developer Tools experiments" (chrome://flags/#enable-devtools-experiments) (chrome://flags) to see this new feature. You can simulate some low bandwidth (GSM, GPRS, EDGE, 3G) for mobile connections.

Mauricio Sánchez
  • 2,764
  • 1
  • 16
  • 14
  • This is so easy to use, and also works on localhost without any additional setup. Excellent suggestion. – HockeyJ Jul 22 '14 at 10:56
  • 2
    Can't get this working, I've enabled the flag but no network option shows in emulation under dev tools, is this windows only? – Pez Cuckow Jul 24 '14 at 11:34
4

if you're not familiar with Fiddler - please do. It's a great debugging tool for HTTP. You also have the option to limit the bandwidth.

Yuki
  • 735
  • 7
  • 11
  • Second that... Fiddler is awesome. Here's a link to a related answer regarding throttling and adding delays in Fiddler. http://stackoverflow.com/questions/16276669/simulate-network-speeds-using-fiddler – JustinParker Apr 10 '17 at 21:00
1

I don't think what you ask can be done by chrome alone. The closest I could find was this, which isn't what you want. I getting a chrome plugin to do it would be Hard.

A web proxy running on your local machine could achieve the effect you want. A search for "throttling proxy" came up with this, for example.

Michael Slade
  • 13,476
  • 2
  • 36
  • 44
1

As suggested on the Chrome Mobile Emulation page, you can use Clumsy on Windows, Network Link Conditioner on Mac OS X and dummynet on Linux.

tehwalris
  • 386
  • 4
  • 9
1

If you are using OSX, you can use: Network Link Conditioner

enter image description here

Here you can select different profiles ie. 100% Loss, 3G, DSL etc.

Please find the below link to download Network Link Conditioner here

Kiran Sk
  • 679
  • 7
  • 21