mac下webpagetest搭建

我的server和agent都是在mac上搭建的,所以会和linux下有些不同
 
一、安装配置Apache和PHP
webpagetest需要使用PHP和Apache启动服务。mac默认安装了Apache和PHP,所以都不需要自己去安装了,下面只大概介绍一下配置
 
安装配置Apache
mac已默认安装了Apache2,不需要再自己安装了,安装路径【/etc/apache2】
查看Apache的安装版本【httpd -v】
 
启动Apache服务:sudo apachectl start
关闭Apache服务:sudo apachectl stop
重启Apache服务:sudo apachectl restart
 
访问浏览器,输入127.0.0.1,显示It works!证明启动成功
 
配置文件
httpd.conf文件:
DocumentRoot:网站根目录(默认/Library/WebServer/Documents),可以修改成自己的根目录
directoryindex:网站首页的默认文件,会按照配置的顺序去找文件,文件都在DocumentRoot配置的网站根目录下
<IfModule 模块名>xxx</IfModule>:只有当模块加载时,才执行它下面的指令
<FilesMatch 正则>xxx</FilesMatch>:匹配到对应正则的文件名时,会执行的指令
<VirtualHost ip:端口>DocumentRoot 路径</VirtualHost>:匹配到对应的ip和端口,会用指定的网站根目录
 
 
安装配置PHP
mac已经默认安装了PHP
查看php的安装版本【php -v】
 
配置PHP
编辑Apache的http.conf文件,将下面内容前面的#去掉,否则Apache不支持php,会将php文件的脚本直接显示出来
LoadModule php5_module libexec/apache2/libphp5.so
 
测试配置成功方法:
新建一个index.php,内容<?php phpinfo(); ?>,重启Apache,访问127.0.0.1/index.php能够看到php的信息页就算成功
 
二、下载并配置webpagetest
 
下载webpagetest
下载最新的release版本,目前最新版是2.19
 
(直接在git上下载文件也可以)
webpagetest分为server和client的agent两个端。server端为下载下来的www的文件夹,agent端为下载下来的agent文件夹
 
配置Apache去访问webpagetest的站点
1.将下载的webpagetest的www拷贝到Apache的根目录下:/Library/WebServer/Documents
2.修改Apache的http.conf文件
 
指定80端口的根目录DocumentRoot和对应的Directory,将目录名改为www的绝对路径
<Directory "/Library/WebServer/Documents/webpagetest ">
        AllowOverride all

        Order allow,deny

        Allow from all

</Directory>
<VirtualHost *:80>
        DocumentRoot /Library/WebServer/Documents/webpagetest
</VirtualHost>
 
修改网站首页的默认文件directoryindex
<IfModule dir_module>
    DirectoryIndex index.php index.php3 index.html index.htm
</IfModule>
 
进入webpagetest下的settings目录,将所有的.sample文件名的.sample去掉
 
3.更改webpagetest站点的权限,支持可读可写【chmod 766 文件】
tmp、dat、results、work/jobs、work/video、logs
 
4.重启Apache,访问网址127.0.0.1,即可看到webpagetest的首页了
sudo apachectl restart
 
配置好后检查还有哪些项没有安装好:
http://localhost/install/
 
遇到的问题:
1.访问webpagetest提示403(you don’t have permission to access / on the server)
将webpagetest的www文件夹放到Apache原根目录下。默认Apache不允许访问外部的文件夹(同时确保所有用户有访问该文件夹的权限)
 
配置webpagetest的sever端
修改location.ini文件,该文件决定了webpagetest的server端支持的浏览器(包括真机),即下图server端可选的内容
mac下webpagetest搭建
[locations]  locatons下的是所有的location,default是默认值。多个location按照1、2、3进行编号
1=Test_PC
2=Test_Android
3=Test_ios
default=Test_PC
 
[Test_Android]
1=Android_Chrome
label="Android_Chrome_label"
[locations]
group=mobile
 
1.Test_Android为locations下的一个location,名字对应上即可。下面可以有多个Location,用1、2、3等数字编号。这是server端Test Location真正用到的内容。
2.agent通过wptdriver.sh启动时的—location参数值用某个数字编号后的location名,例如Test_Android下的Android_Chrome
3.label为server端Test Location中显示的内容,作为显示用
4.group为分组,多个location会找按照分组显示
 
[Test_PC] 
1=IE   
2=Chrome
3=Firefox
label=PC Locations
group=PC
 
[Test_ios]
1=ios_Chrome
label="ios_Chrome_label"
group=mobile
 
[IE]
browser=IE 8
label="PC- IE 8_label"
;relayServer="http://127.0.0.1/"
1.browser为浏览器,具体哪个关键词对应哪个浏览器server端有说明
2.label为server端的Browser显示的名字
 
[Chrome]
browser=chrome
label="PC-chrome_label"
;relayServer="http://127.0.0.1/"
 
[Firefox]
browser=firefox
label="PC-firefox_label"
;relayServer="http://127.0.0.1/"
 
[Android_Chrome]
browser=android
label="android-chrome_label"
;type=nodejs,mobile
connectivity="WIFI"
;relayServer="http://127.0.0.1/"
1.Android真机的需要注意一点,browser实际用的是chrome浏览器,但是这里要写android
2.真机需要用connectivity指定手机使用的网络
 
[ios_Chrome]
browser=ios
;label="ios-chrome_label"
type=nodejs.type,MOBILE
connectivity="WIFI"
;relayServer="http://127.0.0.1/"
1.ios真机的需要注意一点,browser实际用的是chrome浏览器,但是这里要写ios
2.真机需要用connectivity指定手机使用的网络
 
在server端具体展示效果如下图所示:
mac下webpagetest搭建
 
配置的一些点如下:
配置的locations默认都是隐藏的,只有有agent连接过来的时候才会显示出来。server端加参数hidden=1查看所有的locations
http://127.0.0.1/?hidden=1
 
包含下面的配置文件的才可以在server的界面上显示出来
relayServer="http://www.webpagetest.org/"
 
配置webpagetest的agent端
agent就是webpagetest下载下来目录中的agent的目录
1.修改后缀为.sample的文件名,将.sample去掉
2.需要OSX Yosemite(10.10),XCode
 
然后通过./wpttest.sh脚本启动agent,该脚本在webpagetest/agent/js目录下
通过【./wptdriver.sh —help】查看该脚本的具体参数
 
三、mobile配置
 
环境准备
前提:已经按照第一、第二步配置好了webpagetest的sever
就是we从github上下载的webpagetest,agent为需要的代理目录
 
PC环境准备
1.安装NodeJS【brew install node】
2.安装ImageMagick【brew install imagemagick】
3.安装ffmpeg【brew install ffmpeg】
4.安装python27的pillow【pip install pillow】
 
Android手机测试需要的条件:
需要在PC安装adb
手机需要root
手机需安装chrome浏览器
 
ios手机测试需要的条件
1.OSX10.10以上
2.安装XCode, 复制/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport放到wpt/agent/js/lib/ios/DeviceSupport
3.安装libimobiledevice【brew install libmobiledevice】
4.安装ios_webkit_debug_proxy【brew install ios-webkit-debug-proxy】
(mac需要对ios手机进行免登陆,具体操作步骤参考结尾处的问题2)
 
Android环境要求
1.Android系统要求KitKat4.4以上,手机Root
2.手机安装Chrome
3.在安全设置中禁用滑动解锁
4.开启开发者选项,允许调试
5.禁止屏幕待机和自动旋转
 
用数据线连接手机和PC,检察环境
adb devices:检查手机已连接上
adb shell su -c date:检查手机已root
adb shell netcfg|grep wlan:检查手机已联网
adb shell am start -n com.android.chrome/com.google.android.apps.chrome.Main -d http://yahoo.com:检查手机已安装chrome
 
ios环境要求
1.ios手机需要越狱
2.安装OpenSSH,创建ssh key,ssh-keygen -t rss -P ‘’,会默认在家目录下生成一个.ssh文件。
3.安装tcpdump
4.进制选择,开启web inspector(Settings->Safari->Advanced)
5.安装设备管理器
 
 
修改sever端的locations.ini
与server端配置类似,增加如下的locations

[locations]

1=Example

[Example]

1=Example_Nexus4

label="Example"

[Example_Nexus4]
browser=android

label="Nexus 4"

type=nodejs,mobile

connectivity="WiFi"
relayServer="http://www.webpagetest.org/"
 
上面例子中的location为Example,Browse为Android真机的chrome,agent真机启动时—location用Example_Nexus4
具体参数配置参考上面的server端配置
 
启动agent
 
进入webpagetest/agent/js
1.通过下面命令启动Android真机的chrome:
/wptdriver.sh -m debug --browser android:1d543708 --serverUrl http://127.0.0.1 --location Android_Chrome --chromePackage com.android.chrome --processvideo no
1.第一个红色部分为Android手机的devices id,通过adb devices可以获得
2.第二个红色部分为webpagetest的server端的ip地址
3.第三个红色部分为location的名字,具体按照webpagetest的server端配置那里讲的找
 
2.通过下面的命令启动ios真机的chrome:
./wptdriver.sh -m debug --browser ios:4690c9557d198520e86af8fac5b7903b43964a04 --serverUrl http://127.0.0.1 --location Local-iOS --processvideo no
第一个红色部分为ios的UDID,其他两个是server地址和location的名字
 
遇到的问题
问题1.启动Android的mobile的agent时报错:
wpt_client.js:497 Client.onUncaughtException_ : Unhandled exception in the client: Error: Unexpected 'su' output: [-] Execute command failed
 
在命令行下单独执行执行命令adb -s 1d543708 shell su -c 'echo x’也报错[-] Execute command failed,说明mac下不支持这种语法
 
解决方法:
mac上不支持【adb -s 1d543708 shell su -c 'echo x'】,需要用语法【adb -s 1d543708 shell su -c '"echo x"'】
 
修改agent/js/src/adb.js文件,将141行的【this.shell(['su', '-c', 'echo x']).then(function(stdout) {】改为【this.shell(['su', '-c', '"echo x"']).then(function(stdout) {】
 
问题2.启动iOS的mobile的agent时一直提示登录
解决方法:将mac的ssh公钥放到ios手机上,实现免登陆
免登陆步骤如下:
1.mac生成ssh,文件目录在~/.ssh下
2.将mac的【~/.ssh/id_rsa.pub】公钥内容放到iOS手机内的~/.ssh/authorized_keys里
可以通过【echo 公钥内容 >> ~/.ssh/authorized_keys】进行追加,如果要多个电脑实现免登陆直接在authorized_keys下追加即可
*通过【ssh root@10.252.167.74(iOS手机ip)】访问ios手机
 
三、测试结果查询
 
结果和日志都存放在webpagetest站点下
 
mac下webpagetest搭建
 
result的存储位置:./webpagetest/results/
在results下的存储路径:年份后两位/月份/日/
 
log的存储位置:./webpagetest/logs
log格式:日期.log(例20161012.log)
 
上一篇:Mac下docker搭建lnmp环境 + redis + elasticsearch


下一篇:Java实验报告