[工具资源] 利器系列 - Web 网络模拟工具，测试应用在低速不稳定网络中的表现

在开发环境中，由于开发者对设备和网络通常是最高标准的要求，用以提高自己的生产效率，会产生灯下黑的情况，开发出的产品在稳定的高速网络下表现优异，这很重要，但要进行换位思考，还需要更上一层楼，Web产品的使用者越来越多的是移动网络，而移动网络的特点就是不稳定以及龟速的GPRS还有很多人在用，为了在开发和测试环境中做到用户环境的网络模拟，我们需要使用一系列工具来帮助我们开发测试更好的Web。

Chrome浏览器

做为Web开发平台，Chrome提供了网络模拟，可以使用 Chrome DevTools Network Panel 内置或自定义的网络条件。

系统 Android

Android模拟器提供了网络设置

Mac

Network Link Conditioner，安装了 Hardware IO Tools for XCode后，System Preference中会添加这个工具。

Win Fiddler 可以提供网速模拟，还可以搭配[GeoEdge] ( http://www.geoedge.com/faq ) 模拟异地网络访问。

网络 Augmented Traffic Control

使用Facebook的 Augmented Traffic Control ，使用启用了ATC网络的用户，都可以轻松选择控制自己的上网速度设置。

开发者只需要在浏览器页面上选择自己的网络配置，立即生效。

这个工具要赞一个FB，FB还设立了2G Tuesdays项目，在周二的时候就弹出使用2G网络的提示，让开发者切身感受用户的使用体验。

自制ATC-enabled路由器

设备：Netgear R7000，某东就有售

步骤：

刷DD-WRT

详细指南 DD-WRT on R7000 ，下载 刷机文件 ，使用Netgear Web Tool的Update Tool上传文件。

使用路由器Web管理界面的用户名和密码SSH到路由器。

刷机命令:

ddup --flash-latest 配置ATC存储

开启USB存储

把U盘格式化为ext3，此处先让U盘自动加载，不要填UUID到/opt，刷新页面后会出现UUID，填到/opt并保存。重新拔插U盘后刷新页面。

安装opkg包管理器 cd /tmp wget http://qnapware.zyxmon.org/binaries-armv7/installer/entware_install_arm.sh chmod +x entware_install_arm.sh ./entware_install_arm.sh

验证安装:

opkg update

opkg安装成本，继续安装其它依赖。

安装其它依赖 opkg install ca-certificates python-base python-crypto python-logging nano

easy_setup

curl https://bootstrap.pypa.io/ez_setup.py -k > ez_setup.py python ez_setup.py

pip

curl https://bootstrap.pypa.io/get-pip.py -k > get-pip.py python get-pip.py 安装ATC依赖 pip install atc_thrift atcd django-atc-api django-atc-demo-ui django-atc-profile-storage 创建一个Django项目 mkdir /opt/var/django cd /opt/var/django django-admin startproject atcui cd atcui 配置ACT

编辑atcui/settings.py添加ATC到INSTALLED_APPS

INSTALLED_APPS = ( ... # Django ATC API 'rest_framework', 'atc_api', # Django ATC Demo UI 'bootstrap_themes', 'django_static_jquery', 'atc_demo_ui', # Django ATC Profile Storage 'atc_profile_storage', )

编辑atcui/urls.py将ACT路由添加以urlpatterns

from django.views.generic.base import RedirectView urlpatterns = patterns('', ... # Django ATC API url(r'^api/v1/', include('atc_api.urls')), # Django ATC Demo UI url(r'^atc_demo_ui/', include('atc_demo_ui.urls')), # Django ATC profile storage url(r'^api/v1/profiles/', include('atc_profile_storage.urls')), url(r'^$', RedirectView.as_view(url='/atc_demo_ui/', permanent=False)), )

django-bootstrap-themes patch:详见 issue

编辑/opt/lib/python2.7/site-packages/atc_demo_ui/templates/atc_demo_ui

更新Django DB

python manage.py migrate 启动ACT

启动守护进程

sudo atcd

启动UI

python manage.py runserver 0.0.0.0:8000

测试 http://192.168.18.1:8000,当然要换成你的路由器地址。

Bonus

###全员参与

设置一个nocatsplash到act的web ui, http://192.168.1.1:8000/atc_demo_ui/，用网的时候自动跳转的ACT配置界面。

###ACTD开机自启

在/opt/start下加一个startup.sh

#!/bin/sh atcd --atcd-wan vlan2 --atcd-lan br0 --atcd-mode unsecure --atcd-iptables /usr/sbin/iptables --daemon nohup python /opt/var/django/atcui/manage.py runserver 0.0.0.0:8000 &

然后在DD-WRT的Web管理界面设置为startup script.

SAAS

WebPageTest 是一个在线服务，可以指定不同的浏览器版本和所在地，进行测试并提供详细的加载时间报表，用来优化页面访问。

WebPageTest还提供OpenAPI访问，用以把异地网络加载测试集成到整个构建测试流程中。

#小结

现实世界遵循二八原理，为20%的用户开发的同时，也不要忘了还有更大的80%的用户君体，让你的Web产品提供最好的用户体验给最多的人，可以让这些工具来帮助我们。欲善其事，先利其器！