在Chrome浏览器中模拟有限带宽?

214

有没有一种方法可以在Chrome中模拟不同的连接速度?

我需要能够检查http://localhost并模拟不同的速度。

我知道有独立的应用程序可以做到这一点,但我更愿意在Chrome内完成。


一个扩展程序绝对不具备那种级别的访问权限。Chrome仅为最常见的任务提供扩展API,而这不是其中之一。 - Wladimir Palant
请查看http://www.webpagetest.org。您可以在“测试设置/连接”下设置连接速度。 - Benjamin Crouzier
12个回答

148
如果您正在运行Linux,则以下命令对此非常有用:
trickle -s -d 50 -w 100 firefox

-s 告诉命令运行独立模式,-d 50 设定带宽限制为50 KB/s,-w 100 设置峰值检测窗口大小为100 KB。 firefox 告诉命令在尝试加载任何网站时应用所有这些速率限制并启动Firefox。

更新

现在已经推出了Chrome 38,并包括了限速功能。要找到它,请打开开发人员工具:Ctrl+Shift+I可以在我的电脑上完成,否则,请点击菜单->更多工具->开发者工具。

然后通过单击开发人员工具面板左上角的手机图标来切换设备模式(请参见下方工具提示)。

切换设备模式

然后像这样激活限速功能。

激活Chrome限速

如果您觉得这有点笨重,我上面的建议适用于Chrome和Firefox。


我在Chrome中尝试了开发者功能并上传了一个YouTube视频。它似乎没有对上传速度进行任何限制。 - WHol
1
限速功能不是上传限制器。它用于下载测试,以查看页面在不同连接上的加载情况。 - Nelson

120

我建议使用Charles Proxy - 你可以选择减缓单个网站的速度,并且还有许多HTTP检查工具。

编辑:

自2014年6月以来,Chrome现在具备在DevTools中本地执行此操作的能力,但需要Chrome 38。

该选项可通过工具栏末尾的下拉菜单从“网络”选项卡中访问。


70
警告:Charles不是免费的。 - Charlie
8
在 Chrome 开发者工具中,您在哪里可以找到这个? - Paul
15
在Canary中打开DevTools,然后在顶部你会看到搜索图标、电话图标、元素、网络等选项。点击电话图标,然后在底部面板中选择仿真,网络仿真选项就在该面板中。 - Andy Davies
1
@Andy 呜呜...你是怎么让电话图标出现的?他们在Canary里一直在改动... - Nathan
36
很不幸,在Chrome中限速只适用于下载,而不适用于上传。 - JesseBuesking
显示剩余7条评论

71

Chrome 38开始,您可以在不使用任何插件的情况下完成此操作。只需单击检查元素 (或F12热键),然后单击切换设备模式(手机按钮)

图片描述

然后您会看到像这样的东西:

图片描述

除了许多其他功能外,它还允许您模拟特定的互联网连接 (3G、GPRS)。


15
这似乎很适合页面加载测试,但测试上传(使用XMLHttpRequest2)似乎没有受到限制。 离线和无限速工作正常,但在上传过程中,该进程似乎忽略了GPRS等限制 - 如果我们也能够形成上传,以便我们可以测试进度条、超时等,那就太好了。 - Josh Mc
2
这是正确的,它是一个未解决的问题 https://code.google.com/p/chromium/issues/detail?id=414319 - Calin

66

从今天开始,您可以在Google Chrome Canary 46.0.2489.0中本地限制您的连接速度。只需打开开发者工具并转到网络选项卡即可:

enter image description here


1
这是最简单的方法,不需要额外的插件。 - earl3s
2
但这对Websockets没有影响。 - Tom Hubbard
1
我只有 Slow 3GFast 3G. 我该如何添加其他的呢? - Menai Ala Eddine - Aladdin
使用例如“慢3G”这样的网络,页面在所有图像加载完成之前完全是白色的。在普通的网页加载中,即使在网络较慢的情况下,渲染也会在所有图像加载完成之前开始。因此,这似乎不是一个准确的模拟。 - donquixote

19

正如Michael所说,Chrome扩展API没有提供一种可靠的方法来实现这一点。另一方面:我自己使用了一段时间的软件。

试试Sloppy,这是一个模拟低带宽的Java应用程序。它与浏览器无关,非常易于使用,而且最重要的是免费的!


13
如果你使用的是 Mac,Chrome 开发团队建议使用“网络链接调节器工具”。

以下两种方法选择其一:

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

或者如果您不想安装 Xcode:

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

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


截至2016年3月,在Apple网站上搜索硬件IO工具,请访问此链接。 "网络连接条件"首选项窗格允许您设置下行和上行带宽,丢包百分比和延迟。 - Greg Sadetsky

13

原文: https://helpdeskgeek.com/networking/simulate-slow-internet-connection-testing/

使用Chrome模拟慢速网络连接 如果您的系统中尚未安装Chrome,请先安装它。 安装完成后,打开新标签页,然后按CTRL + SHIFT + I打开开发者工具窗口,或者点击汉堡图标,然后选择更多工具,再选择开发者工具。

enter image description here

这将打开开发者工具窗口,它可能会被停靠在屏幕的右侧。我更喜欢将其停靠在屏幕底部,因为可以看到更多数据。要做到这一点,点击三个垂直点,然后点击中间的停靠位置。

enter image description here

现在,请点击网络选项卡。在右侧,您应该会看到一个名为“无限制”的标签。

enter image description here

如果你点击那个,你会得到一个下拉列表,里面有预配置的速度,可以用来模拟慢速连接。

enter image description here

选择范围从离线到WiFi,数字显示为延迟、下载和上传。最慢的是GPRS,其次是普通2G,然后是好的2G,接着是普通3G、好的3G、普通4G、DSL和WiFi。选择其中一个选项,然后重新加载当前页面或在地址栏中输入另一个URL。确保您在显示开发人员工具的选项卡中。限制只适用于启用它的选项卡。
如果您想使用自己的特定值,可以单击“自定义”下面的“添加”按钮。单击“添加自定义配置文件”按钮添加新配置文件。

enter image description here

使用GPRS时,加载www.google.com需要长达16秒的时间!总的来说,这是一个非常好的工具,它直接内置在Chrome中,您可以用它来测试您的网站在较慢的连接下的加载时间。如果您有任何问题,请随意发表评论。享受吧!


1
很好的回答,Arbaz! - Matt
2
详细而彻底!谢谢! - SexyBeast

11

现在你可以在Chrome Canary中限制网络吞吐量。这可以在开发者工具的控制台中“仿真”标签下的“网络”选项中完成。

您可能需要激活Chrome标志“启用开发人员工具实验”(chrome:// flags /#enable-devtools-experiments)(chrome:// flags),以查看此新功能。您可以模拟移动连接的一些低带宽(GSM,GPRS,EDGE,3G)。


这个非常易于使用,而且在本地主机上无需任何额外的设置即可运行。非常棒的建议。 - JsAndDotNet
2
无法让它正常工作,我已启用该标志,但在开发工具的仿真下没有网络选项显示,这是仅适用于Windows吗? - Pez Cuckow

4
如果您对Fiddler不熟悉,请务必了解一下。它是一个用于HTTP调试的好工具。您还可以选择限制带宽。

赞同... Fiddler 真是太棒了。这里有一个关于在 Fiddler 中进行限速和添加延迟的相关回答链接:https://dev59.com/O2Qo5IYBdhLWcg3wKcrH - JustinParker

1
如果您正在使用OSX操作系统,您可以使用网络联接调节器(Network Link Conditioner)

enter image description here

在这里,您可以选择不同的配置文件,例如100%丢失、3G、DSL等。

请找到以下链接以下载网络链接调节器here


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接