利器系列 - Web 网络模拟工具，测试应用在低速不稳定网络中的表现在开发环境中，由于开发者对设备和网络通常是最高标准的

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

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

本文地址： alphayang.github.io/2016/08/21/…

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

Chrome浏览器

系统

Android

Mac

Win

网络

Augmented Traffic Control

自制ATC-enabled路由器

刷DD-WRT