首页 > 代码库 > mac下webpagetest搭建
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
下载地址:https://github.com/WPO-Foundation/webpagetest/releases/tag/WebPageTest-2.19
下载最新的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>
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端可选的内容
[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端具体展示效果如下图所示：
配置的一些点如下：
配置的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为需要的代理目录
http://github.com/WPO-Foundation/webpagetest.git
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】
Android环境要求
Android系统要求KitKat4.4以上，手机Root
手机安装Chrome
在安全设置中禁用滑动解锁
开启开发者选项，允许调试
禁止屏幕待机和自动旋转
用数据线连接手机和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环境要求
安装OpenSSH，创建ssh key存为~/.ssh/id_dsa_ios
安装tcpdump
进制选择，开启web inspector（Settings->Safari->Advanced）
安装设备管理器
修改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) {】
mac下webpagetest搭建
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。