在 macOS 下搭建 WebPageTest 私有实例

最新推荐文章于 2023-07-27 07:55:56 发布
最新推荐文章于 2023-07-27 07:55:56 发布
阅读量523 收藏
点赞数
分类专栏： 测试 工具 文章标签： 前端性能分析工具

在 macOS 下搭建 WebPageTest 私有实例

发表于 2017-09-27 | 分类于 测试 | 0 Comments | 阅读次数： 390

WebPageTest 最新版本（17.08）的一个新功能，是增加了一个新的支持多平台的 Agent 端：wptagent。

The biggest change by far is a new cross-platform agent (wptagent) that supports Linux, Windows, Mac and Android testing. Eventually wptdriver will be deprecated and all testing will be moved to the new agent.

得益于此，我们终于可以在 macOS 系统下搭建 WebPageTest 环境，不用再依赖 Windows 虚拟机了。而且，新的 wptagent 还支持 Android 设备（无需 root）。本文将介绍 macOS 系统下如何搭建 WebPageTest 服务端、测试端，以及如何使用 Android 设备进行测试。

虽然 macOS 自带 Apache 和 PHP，但我还是习惯于自己配置一套新环境，因此以下教程基于非自带 Apache 和 PHP。

安装 brew

brew（又叫 Homebrew）是 macOS 平台最有名的第三方包管理工具。由于 brew 几乎人人必备，因此这里不做过多介绍。没有用过的可以查看官网：https://brew.sh/，里面有中文教程。

安装 Apache 2.4

添加第三方仓库

由于 Apache 不在 brew 官方仓库中，因此需要添加第三方仓库。终端执行：

brew tap homebrew/apache

关闭并移除自带 Apache 自动加载脚本

终端执行：

sudo apachectl stop
sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null

安装 Apache

终端执行：

brew install httpd24 --with-privileged-ports --with-http2

安装需要一段时间，大概1-3分钟，安装后会看到这样的提示：

/usr/local/Cellar/httpd24/2.4.27: 212 files, 4.4M, built in 1 minute 45 seconds

这里的路径（此处是/usr/local/Cellar/httpd24/2.4.27）需要记住，如果你的路径与此不同，则下面的操作需要自行修改路径：

sudo cp -v /usr/local/Cellar/httpd24/2.4.27/homebrew.mxcl.httpd24.plist /Library/LaunchDaemons
sudo chown -v root:wheel /Library/LaunchDaemons/homebrew.mxcl.httpd24.plist
sudo chmod -v 644 /Library/LaunchDaemons/homebrew.mxcl.httpd24.plist
sudo launchctl load /Library/LaunchDaemons/homebrew.mxcl.httpd24.plist

配置 Apache

安装后，配置文件在/usr/local/etc/apache2/2.4/httpd.conf下。修改该文件：

  • 174行左右，将#LoadModule rewrite_module libexec/mod_rewrite.so取消注释
  • 185行左右，将User daemon改为User your_user_name（your_user_name为用户名）
  • 186行左右，将Group daemon改为 Group staff
  • 216行左右，将#ServerName www.example.com:80改为ServerName 0.0.0.0:80
  • 240行左右，将DocumentRoot "/usr/local/var/www/htdocs"改为DocumentRoot "/Users/your_user_name/WebPageTest/www"（your_user_name 为用户名，此处路径可自行确定）
  • 241行左右，将<Directory "/usr/local/var/www/htdocs">改为<Directory "/Users/your_user_name/WebPageTest/www">（与上一条的路径一致）
  • 261行左右，将AllowOverride None改为AllowOverride All

启动 Apache

  1. 创建路径/Users/your_user_name/WebPageTest/www
  2. 创建index.html文件，内容随意，如<p>Hello World<p>
  3. 在终端中输入sudo apachectl -k restart重启 Apache 服务
  4. 打开浏览器，输入localhost，显示Hello World（即第2步的index.html）说明 Apache 启动成功

安装 PHP 7

添加第三方仓库

由于 PHP 不在 brew 官方仓库中，因此需要添加第三方仓库。终端执行：

brew tap homebrew/php

安装依赖

安装 Xcode 的 Command Line Tool。终端执行：

xcode-select --install

根据提示安装即可。

安装 PHP

这里以 PHP 7.1 为例。终端执行：

brew install php71 --with-httpd24

安装后建立链接：

brew link php71

配置 PHP

安装后，配置文件在/usr/local/etc/php/7.1/php.ini下。修改该文件：

  • 404行左右，将memory_limit = 128M改为memory_limit = 256M
  • 671行左右，将post_max_size = 8M改为post_max_size = 10M
  • 824行左右，将upload_max_filesize = 2M改为upload_max_filesize = 10M

以上修改主要是为了满足 WebPageTest 的推荐配置，可根据实际情况修改。

Apache 支持 PHP

添加 PHP 模块

在 Apache 配置文件/usr/local/etc/apache2/2.4/httpd.conf的175行左右（即一堆#LoadModule xxx后）添加：

LoadModule php7_module /usr/local/opt/php71/libexec/apache2/libphp7.so

添加主页 index.php

在 Apache 配置文件/usr/local/etc/apache2/2.4/httpd.conf的273行左右，即：

<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

中，在index.html前添加index.php，即：

<IfModule dir_module>
    DirectoryIndex index.php index.html
</IfModule>

添加 PHP 支持

在 Apache 配置文件/usr/local/etc/apache2/2.4/httpd.conf的277行左右（即上一步的位置后面）添加：

<FilesMatch \.php$>
    SetHandler application/x-httpd-php
</FilesMatch>

测试效果

在/Users/your_user_name/WebPageTest/www下创建index.php，代码为：

<?php
    phpinfo();
?>

重启 Apache，浏览器访问localhost看到下图即为配置成功：

下载并启动 WebPageTest

WebPageTest GitHub：https://github.com/WPO-Foundation/webpagetest

下载地址：https://github.com/WPO-Foundation/webpagetest/releases

下载最新版本即可，这里以 webpagetest_17.08.zip 为例。

下载后解压，得到www、agent、wptagent等目录，其中www为服务端，agent为 Windows 测试端（本次不使用），wptagent为最新的多平台测试端（也就是本次使用的测试端）。将 www和wptagent文件夹（前者是服务端，后者是测试端）移动到/Users/your_user_name/WebPageTest下，重启 Apache。打开浏览器，访问localhost/install如下图：

接来下就是根据提示信息安装相关依赖。

安装 WebPageTest 依赖

安装 APC

终端执行：

brew install php71-apcu

安装 FFmpeg

终端执行：

brew install ffmpeg

如果提示已经安装某个版本，需升级（否则可能导致录视频失败）：

brew upgrade ffmpeg

安装 ImageMagick

终端执行：

brew install imagemagick

如果提示已经安装某个版本，需升级（否则可能导致截图失败）：

brew upgrade imagemagick

安装 ExifTool

终端执行：

brew install exiftool

安装 Python 2.7 及相关依赖包

macOS 已经自带 Python 2.7.10。但由于自带 Python 默认没有 pip，且为了避免影响系统，这里自行安装 Python 2.7。

使用 brew 安装 Python 2.7

1、终端执行：

brew install python

2、安装完毕后，执行：

python --version

查看版本是否为2.7.14（即新安装的版本是否替代了系统自带版本）。如果还是2.7.10则需要继续以下步骤

3、终端执行：

sudo vim /etc/paths

查看/usr/local/bin是否在/usr/bin前面。如果不在，将/usr/local/bin移到/usr/bin前面

4、终端执行：

ls -l /usr/local/bin | grep python

查看是否存在 pip 和 python。如果不存在，记录 pip2 和 python2 的软链接路径，执行：

cd /usr/local/bin
ln -s ../Cellar/python/2.7.14/bin/pip2 pip
ln -s ../Cellar/python/2.7.14/bin/python2 python

注意，这里的路径一定要以实际情况（即pip2和python2的软链接路径）为准

5、再次执行：

python --version

此时版本应该是新安装的版本了。

使用 pip 安装依赖包

终端执行：

pip install convert compare Pillow pyssim dateutils dnspython monotonic psutil requests ujson

配置 WebPageTest 服务端

设置配置文件

将www/settings目录和www/settings/custom_metrics目录下.sample复制一份，并删除.sample后缀。

由于使用非 macOS 自带 Apache 且路径为用户路径，因此无需对 Installation Check 页面 Filesystem 下的文件夹进行权限修改。

修改 location.ini

此处提供一个例子，以两个测试端为例：测试端1（Test_PC）为 macOS 平台，包括 Chrome 和 Firefox 浏览器；测试端2（Test_Mobile）为 Android 平台，包括 Chrome 浏览器。

; 以下为测试地点，即 WebPageTest 首页 Test Location 中的选项
; key 包括 1、2、3... 和 default
; 1、2、3... 的 value 为对应地点名（不能重复）
; default 的 value 对应默认地点名
[locations]
1=Test_PC
2=Test_Mobile
default=Test_PC

; 以下为测试地点的详情项，locations 中每一个 value 都应该对应这里的一个 section
; key 包括 1、2、3... 和 label、group，label 为该地点的标签名，group 为组信息
; 1、2、3... 的 value 为对应浏览器节点名（不建议直接用浏览器名，以免多个地点的浏览器名重复）
; label 的 value 随意填写，只要不与其他地点的值重复就行（对应 WebPageTest 首页 Test Location 下拉框中每个组下的选项）
; group 的 value 随意填写，可与其他地点的值重复（对应 WebPageTest 首页 Test Location 下拉框中的组）
; 这里 Test_PC 以 Firefox 和 Chrome 为例
[Test_PC]
1=WPT_Firefox
2=WPT_Chrome
label=macOS
group=Desktop

[Test_Mobile]
1=Android_Chrome
label=Android Chrome
group=Mobile

; 以下为浏览器的详情项，测试地点详细项中的每一个浏览器节点名都应该对应这里的一个 section
; key 包括 browser 和 label
; browser 的 value 为浏览器名，同一个浏览器节点下不得重复（对应 WebPageTest 首页 Browser 下拉框中的选项）
; label 的 value 随意填写，只要不与其他 label 重复就行
[WPT_Firefox]
browser=Firefox
label="macOS - Firefox"

[WPT_Chrome]
browser=Chrome
label="macOS - Chrome"

[Android_Chrome]
browser=Chrome
label="Android - HTC One M9"
type=nodejs,mobile
connectivity="WiFi"

运行 WebPageTest 测试端

准备工作

终端执行：

sudo visudo

此时进入 vim 编辑模式（等同于sudo vim /etc/sudoers，但后者即使 sudo 也会提示无编辑权限），找到：

root        ALL = (ALL) ALL
%admin      ALL = (ALL) ALL

在下面添加一行：

your_user_name ALL = (ALL) NOPASSWD:ALL

此操作完成后，再执行 sudo 命令就不需要输入密码了。此操作为官网文档推荐操作：

It is recommended that the agent itself not run as admin/root but that it can elevate without prompting which means disabling UAC on windows or adding the user account to the sudoers file on Linux and OSX (NOPASSWD in visudo).

macOS 测试端

终端执行：

cd ~/WebPageTest/wptagent
python wptagent.py -vvvv --server http://127.0.0.1/work/ --location WPT_Chrome

说明：

  1. wptagent 依赖于 Python 2.7，不支持 Python 3.x
  2. -vvvv是日志的显示级别，可根据实际情况添加该参数
  3. --server是必填项，后面跟服务端地址（需要加http://且加/work/）
  4. --location是必填项，后面跟服务单配置的地点名（此处应该为浏览器节点名）
  5. 执行此命令后，如果开启最高日志级别，会先看到Waiting for Idle...，稍等一段时间即可。如果等待时间过长，可以 Ctrl+C 停止，重新执行一次
  6. Chrome 和 Firefox 正常安装（不更改名称），无需做任何配置（无需修改browsers.ini），wptagent 会自动去相应路径调起浏览器

注意：

  1. 测试时，如果已经运行了 Chrome 或 Firefox 浏览器，已经打开的标签页会被关闭，请提前做好准备
  2. 只有 Chrome 浏览器支持修改 Headers（包括 Script 中setCookie命令）

Android 测试端

终端执行：

cd ~/WebPageTest/wptagent
python wptagent.py -vvvv --server http://127.0.0.1/work/ --location Android_Chrome --android

说明：

  1. wptagent 依赖于 Python 2.7，不支持 Python 3.x；Android 设备作为测试端还依赖于 adb，这里不赘述
  2. -vvvv是日志的显示级别，可根据实际情况添加该参数
  3. --server是必填项，后面跟服务端地址（需要加http://且加/work/）
  4. --location是必填项，后面跟服务单配置的地点名（此处应该为浏览器节点名）
  5. --android代表测试端是 Android 设备
  6. 如果有多台设备（adb devices有多个结果），需要带上--device参数，后面跟 Android SN 码（即adb devices的中的设备编码）
  7. Android 端仅 Chrome 支持全功能，需提前安装好 Chrome 浏览器

注意：

1、如果报错AttributeError: 'Process' object has no attribute 'cpu_affinity'，编辑wptagent/internal/adb.py，搜索proc.cpu_affinity([0])，将proc.cpu_affinity([0])注释，并添加pass（注意缩进）

def start(self):
        """ Do some startup check to make sure adb is installed"""
        import psutil
        ret = False
        out = self.run(self.build_adb_command(['devices']))
        if out is not None:
            ret = True
            # Set the CPU affinity for adb which helps avoid hangs
            for proc in psutil.process_iter():
                if proc.name() == "adb.exe" or proc.name() == "adb" or proc.name() == "adb-arm":
                    # proc.cpu_affinity([0])
                    pass

2、如果提示Device not ready, high temperature，编辑wptagent/internal/adb.py，搜索if 'temp' in battery and battery['temp'] >，将> 36.0改大，如> 40.0

if 'level' in battery and battery['level'] < 50:
    logging.info("Device not ready, low battery: %d %%", battery['level'])
    is_ready = False
if 'temp' in battery and battery['temp'] > 36.0:
    logging.info("Device not ready, high temperature: %0.1f degrees", battery['temp'])
    is_ready = False

同理，如果提示Device not ready, low battery，将上面< 50改低，如< 20

yy19890521
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于CAM热力图报错：AttributeError: ‘tuple‘ object has no attribute ‘cpu‘
qq_37278761的博客
06-10 9798
今天调用CAM生成热图时碰到了一个问题具体是这行代码报错（完整的heatmap代码最后放出来）：cam = GradCAM(model=Local_Branch_model, target_layer=target_layer, use_cuda=False)每次执行就报下面这个错误。 修改第65行代码，发现传入的output变成了元组格式，因此获取其内容替换一下就行了，出现原因还不太清楚。 下面放上自定义模型读取检查点，并生成热图的代码： # copy from https://github.com/
"'Service' object has no attribute 'process'"
weixin_30722589的博客
03-15 2725
在安装完robot framework之后，编写了打开浏览器的用例，但是在打开浏览器的步骤一直报错 问题原因是，虽然下载了selenuim，但是并没有浏览器driver，所以还要单独下载浏览器driver放在path的路径下（如c:python27,c:python27/scripts），这样就可以直接调起来了 selenium3.0发布以后，在3.0里不再有 Firefox 的驱...
Web性能监控自动化探索之路–初识WebPageTest
lijunlinlijunlin的专栏
11-16 1895
无论是从Velocity 2012还是在web技术沙龙，亦或前端同学的学习月报里，相信大家对PageSpeed的概念和原理都有了一定的了解。那么下一步我们要做的就是，将PageSeed分析方法应用到我们日常的发布中去。包括两部分： 1、发布系统上，提测之后，性能报告自动输出（主要针对内网环境，未发布） 2、日常性能回归检查（主要针对外网环境，已发布） 这里henry就不卖关子了，
Windows和Mac系统实现本地部署WebPageTest工具
不想学习的打工人的博客
12-24 1466
在项目开发或者测试的过程中，由于没有上线，我们在公网上无法访问我们的网站，但同时我们又需要查看浏览器性能，这样我们就需要在本地部署WebPageTest工具以协助进行性能测试访问Docker官网文档，按需下载对应版本安装注册docker 账号3.安装后点击Docker图标，使用注册的docker id登录，并在dos中用如下命令登录。
mac下部署webpagetest
yy19890521的博客
07-24 808
mac下webpagetest搭建 我的server和agent都是在mac上搭建的，所以会和linux下有些不同 一、安装配置Apache和PHP webpagetest需要使用PHP和Apache启动服务。mac默认安装了Apache和PHP，所以都不需要自己去安装了，下面只大概介绍一下配置 安装配置Apache mac已默认安装了Apache2，不需要再自己安装了，安装...
selenium驱动报错：AttributeError: \‘Service\‘ object has no attribute \‘process\‘解决办法
qq_35801570的博客
07-27 439
【代码】selenium驱动报错：AttributeError: \‘Service\‘ object has no attribute \‘process\‘解决办法。
Python脚本报错AttributeError: ‘module’ object has no attribute’xxx’解决方法
热门推荐
Lawrence_121
06-16 4万+
Python脚本报错AttributeError: ‘module’ object has no attribute’xxx’解决方法 最近在编写Python脚本过程中遇到一个问题比较奇怪：Python脚本完全正常没问题，但执行总报错"AttributeError: 'module'object has no attribute'xxx'"。这其实是.pyc文件存在问题。 ...
python 文件运行时出现 object has no attribute
xuetu2016的博客
05-23 4万+
import yyyy 在类的__init__中创建了类对象，在__del__中关闭了类对象。 刚开始运行时没有任何问题，电脑意外关机后，再运行就报错： object has no attribute ‘xxxx’ 可能是yyyy的源文件的.pyc文件存在导致了这个问题。 前往yyyy的安装路径下查找cache文件夹，删除其中的 .pyc文件即可。 ...
AttributeError: 'module' object has no attribute 'Process'(关键词：Python/bug/debug/模块/模组)
Henry1991back的博客
09-28 3343
multiprocessing_simple.py： import multiprocessing def work(): print 'Worker' return if __name__ == '__main__': jobs = [] for i in range(5): p = multip...
部署安装WebPageTest私有实例_linux
11-20
webpagetest 部署安装，WebPageTest 原本是由AOL开发内部使用的工具，后来在Google Code上开源， 是一款非常优秀的网页前端性能测试工具。
geth_MACOS一键搭建私有链教程.zip
08-22
教程在包里面，很清楚，对得起您出的币！geth的版本是1.9的，账户创建脚本和启动geth节点的脚本，创世区块json文件等。
在macOS上搭建python环境的实现方法
09-18
今天小编就为大家分享一篇在macOS上搭建python环境的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
MacOS下本地golang环境搭建详细教程
09-16
主要介绍了MacOS下本地golang环境搭建详细教程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
macOS下Spring Boot开发环境搭建教程
08-28
主要为大家详细介绍了macOS下Spring Boot开发环境搭建教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
node-v12.14.0-darwin-x64.tar.xz
最新发布
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于使用microPython的开发单片机设计源码.zip
05-03
我们在单片机开发中常会遇到需要将UTF-8转换为GBK编码的需求。在了解各种编码格式的情况下可知， UFT-8不能直接转成GBK，需中转成unicode再转换为gbk。而unicode和gbk之间没有算法可以直接计算，需要查表方式获取。 网上有一些C语言实现的代码，我这里分享一种microPython的实现代码 接下来就是要考虑表的存储方式了，刚开始我想着把表存到代码里直接通过索引实现编码转换。但是gb2312有七千多个字符全部存储要耗费很大内存，即使是32位的esp32也只有512k的内存，加上其他资源的消耗，剩余的内存不足以存储编码转换表。 于是只能将表保存成一个文件（转化成bin文件会比较好，方法类似），通过读写文件来减少内存开销。 具体的查表就是简单的二分法
基于VB实现的车队综合业务管理系统(论文+源代码)
05-03
基于VB实现的车队综合业务管理系统(论文+源代码) 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
基于知识图谱的推荐算法-NCFG的实现python源码+运行说明.zip
05-03
基于知识图谱的推荐算法-NCFG的实现 运行环境 python == 3.7.0 torch == 1.12.0 pandas == 1.1.5 numpy == 1.21.6 sklearn == 0.0 数据集介绍 music-音乐 book-书籍 ml-电影 yelp-商户 文件介绍 ratings.txt：记录用户点击的项目，1代表点击了，0代表没有点击 kg.txt：知识图谱文件，第一列是头实体，第二列是尾实体，第三列是关系 user-list.txt：用户及其id文件，第一列是用户的id，第二列是用户 其余文件可忽略
macos 搭建java开发环境
05-14
在 macOS 上搭建 Java 开发环境，需要以下步骤： 1. 下载 JDK 从 Oracle 官网上下载适合 macOS 的 JDK 安装包，下载地址：https://www.oracle.com/java/technologies/javase-downloads.html 2. 安装 JDK 双击...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值