在开发环境中，由于开发者对设备和网络通常是最高标准的要求，用以提高自己的生产效率，会产生灯下黑的情况，开发出的产品在稳定的高速网络下表现优异，这很重要，但要进行换位思考，还需要更上一层楼，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到路由器。
刷机命令:

1
ddup --flash-latest

配置ATC存储

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

安装opkg包管理器

1
2
3
cd /tmp 
wget http://qnapware.zyxmon.org/binaries-armv7/installer/entware_install_arm.sh chmod +x entware_install_arm.sh 
./entware_install_arm.sh

验证安装:

1
opkg update

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

安装其它依赖

1
opkg install ca-certificates python-base python-crypto python-logging nano

easy_setup

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

pip

1
2
curl https://bootstrap.pypa.io/get-pip.py -k > get-pip.py 
python get-pip.py

安装ATC依赖

1
pip install atc_thrift atcd django-atc-api django-atc-demo-ui django-atc-profile-storage

创建一个Django项目

1
2
3
4
mkdir /opt/var/django 
cd /opt/var/django 
django-admin startproject atcui 
cd atcui

配置ACT

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

1
2
3
4
5
6
7
8
9
10
11
12
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

1
2
3
4
5
6
7
8
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

1
python manage.py migrate

启动ACT

启动守护进程

1
sudo atcd

启动UI

1
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

1
2
3
#!/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产品提供最好的用户体验给最多的人，可以让这些工具来帮助我们。欲善其事，先利其器！