3.性能调试工具

发表于 更新于 分类于

简单记录工具的本地化，可以跳过

测试工具

  • Chrome DevTools 开发调试、性能评测
  • Lighthouse 网站整体质量评估
  • WebPackTest 多测试地点、全面性能报告
    • 地址
    • 主要是三个指标，waterfall 、first view、repeat view

lighthouse 使用

  • 可以使用npm 全局安装
1
2
3
4
npm install -g lighthouse

Lighthouse http://www.bilibili.com
会生成一个本地测试报告
  • 直接用chrome浏览器

WebPageTest本地部署说明

  1. 拉取镜像

    1
    2
    3
    docker pull webpagetest/server

    docker pull webpagetest/agent

  2. 运行实例

    1
    2
    3
    docker run -d -p 4000:80 --rm webpagetest/server

    docker run -d -p 4001:80 --network="host" -e "SERVER_URL=http://localhost:4000/work/" -e "LOCATION=Test" webpagetest/agent

mac 用户自定义镜像

  1. 创建server目录

    1
    2
    mkdir wpt-mac-server
    cd wpt-mac-server

  2. 创建Dockerfile，添加内容

    1
    2
    3
    4
    vim Dockerfile

    FROM webpagetest/server
    ADD locations.ini /var/www/html/settings/

  3. 创建locations.ini配置文件，添加内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    vim locations.ini

    [locations]
    1=Test_loc
    [Test_loc]
    1=Test
    label=Test Location
    group=Desktop
    [Test]
    browser=Chrome,Firefox
    label="Test Location"
    connectivity=LAN

  4. 创建自定义server镜像

    1
    docker build -t wpt-mac-server .

  5. 创建agent目录

    1
    2
    mkdir wpt-mac-agent
    cd wpt-mac-agent

  6. 创建Dockerfile，添加内容

    1
    2
    3
    4
    5
    vim Dockerfile

    FROM webpagetest/agent
    ADD script.sh /
    ENTRYPOINT /script.sh

  7. 创建script.sh， 添加内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    vim script.sh

    #!/bin/bash
    set -e
    if [ -z "$SERVER_URL" ]; then
      echo >&2 'SERVER_URL not set'
      exit 1
    fi
    if [ -z "$LOCATION" ]; then
      echo >&2 'LOCATION not set'
      exit 1
    fi
    EXTRA_ARGS=""
    if [ -n "$NAME" ]; then
      EXTRA_ARGS="$EXTRA_ARGS --name $NAME"
    fi
    python /wptagent/wptagent.py --server $SERVER_URL --location $LOCATION $EXTRA_ARGS --xvfb --dockerized -vvvvv --shaper none

  8. 修改script.sh权限

    1
    chmod u+x script.sh

  9. 创建自定义agent镜像

    1
    docker build -t wpt-mac-agent .

  10. 用新镜像运行实例 (注意先停掉之前运行的containers)

    1
    2
    3
    4
    docker ps 查看docker实例 
    docker stop 实例id 实例id 即可停止
    docker run -d -p 4000:80 --rm wpt-mac-server
    docker run -d -p 4001:80 --network="host" -e "SERVER_URL=http://localhost:4000/work/" -e "LOCATION=Test" wpt-mac-agent

  11. m1平台构建有问题 应该是需要 设置–platform 暂时不会