mac下webpagetest搭建

Posted 2020-08-14 每天1990

我的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>

<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) {】