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的httpd.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的httpd.conf文件

 

指定80端口的根目錄DocumentRoot和對應的Directory，將目錄名改為www的絕對路徑（我把www改名為了webpagetest，所以根目錄是webpagetest名字的目錄）

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

（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站點下

 

 

result的存儲位置：./webpagetest/results/

在results下的存儲路徑：年份后兩位/月份/日/

 

log的存儲位置：./webpagetest/logs

log格式：日期.log(例20161012.log)