npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pagetimeline

v0.1.34

Published

web performance analyze tool base on remote debugging protocol,fex

Downloads

63

Readme

###操作系统/浏览器支持

windows:chrome

unix/linux(desktop+server):chrome

android:chrome

###安装

####windows

npm install pagetimeline

####ubuntu

ubuntu通过apt-get安装node后默认运行名为nodejs,需要更名为node,假定nodejs路径为: /usr/bin/nodejs

sudo ln -s /usr/bin/nodejs /usr/bin/node
sudo visudo
在secure_path值前面添加/usr/bin

安装pagetimeline:

sudo npm install pagetimeline

遇到nobody账户问题时:
sudo npm install pagetimeline --unsafe-perm

#####centOS

切换到root权限:

su root

安装pagetimeline:

npm install pagetimeline

遇到nobody账户问题时:
npm install pagetimeline --unsafe-perm

GraphicsMagick

如果想得到首屏的热力图截图,请安装GraphicsMagick

本软件依赖的图像处理软模块为gm,需要依赖于GraphicsMagick

###使用示例

标准:

node ./bin/pagetimeline.js --url=http://www.baidu.com --timeout=2000 --verbose

使用配置文件配置:

node ./bin/pagetimeline.js --config=config.json

排除某些基础模块:

node ./bin/pagetimeline.js --url=http://www.baidu.com --skip-modules=assets,har

包含某些特殊模块:

node ./bin/pagetimeline.js --url=http://www.baidu.com --special-modules=hao123global

输出格式为json:

node ./bin/pagetimeline.js --url=http://www.baidu.com  --verbose --format=json

输出har文件:

node ./bin/pagetimeline.js --url=http://www.baidu.com --verbose --har-dir=./har/

输出性能热力图截图文件:

node ./bin/pagetimeline.js --url=http://www.baidu.com --verbose --screenshot-dir=./screenshot/

输出性能分析结果文件:

node ./bin/pagetimeline.js --url=http://www.baidu.com --verbpse --result-dir=./result/

使用android chrome测试:

usb连接手机,并启动usb调试功能

node ./bin/pagetimeline.js --url=http://www.baidu.com --verbose --mobile=android

带缓存测试:

测试两遍:no cache vs cache

node ./bin/pagetimeline.js --url=http://www.baidu.com --verbose --reload

测试多遍:no cache vs n cache

node ./bin/pagetimeline.js --url=http://www.baidu.com --verbose --reload --reload-count=10

CLI支持:

node ./bin/pagetimeline.js --url=http://www.baidu.com --silent

此时仅输出结果数据到stdout或者stderr

使用系统自带的浏览器-根据环境变量:

node ./bin/pagetimeline.js --url=http://www.baidu.com --browser-path=env

使用系统自带的浏览器-自定义位置:

node ./bin/pagetimeline.js --url=http://www.baidu.com --browser-path="c:\chrome.exe"

禁止数据上传:

数据默认会上传到sitearchive.baidu.com,进行可视化展现

禁止默认上传:

node ./bin/pagetimeline.js --url=http://www.baidu.com --disable-upload

###命令行参数支持

  • --url, target url, e.g. --url=http://www.baidu.com
  • --server, remote debugger server, e.g. --server=localhost | xxx
  • --port, remote debugger port, default 9222, if not setting,auto find available port, e.g. --port=9222
  • --disk-cache, disk cache,default false, e.g. --disk-cache=true
  • --mobile, mobile android or iphone, e.g. --mobile=android
  • --config, JSON-formatted config file, e.g. --config=./config.log
  • --viewport, window viewport width and height, e.g. --viewport=1920x768
  • --proxy, specifies the proxy server to use, e.g. --proxy=192.168.1.42:8080
  • --modules, specify module, unber "modules/base", e.g. --modules=firstscreen,whitescreen
  • --skip-modules, skip module, under "modules/base", skip selected modules [moduleOne],[moduleTwo],.., e.g. --skip-modules=firstscreen,whitescreen.
  • --special-modules, specify special module, unber "modules/special", e.g. --modules=hao123global,hao123global
  • --timeout, time after onload event, default 5000, e.g. --timeout=5000
  • --browser-timeout,time after open browser command, default 2000, e.g. --browser-timeout=2000
  • --user-agent, provide a custom user agent, e.g. --user-agent=Mozilla/5.0 (Windows NT 6.3; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0
  • --verbose, write debug messages to console, e.g. --verbose
  • --silent, dont't write anything to the console, e.g. --slient
  • --format, output format, plain | json | csv, default plain, e.g. --format=json
  • --browser, chrome,firefox, default chrome, e.g. --browser=chrome
  • --browser-path, customer browser path, e.g. --browser-path=env, or --browser-path="c:\chrome.exe"
  • --har-dir, file directory, e.g. --har-dir=./
  • --screenshot-dir, screenshot file directory, e.g. --screenshot-dir=./, only support perfmap now
  • --result-dir, performance analyze result file directory, e.g. --result-dir=./
  • --reload, performance analyze twice, first with no-cahce and second with cache, e.g. --reload
  • --reload-count,reload count, 2 or bigger, e.g. --reload-count=2
  • --disable-upload, disalbe upload data to sitearchive, e.g. --disable-upload

###支持的功能

  • first_screen_time, 首屏时间,及首屏内图片元素

  • white_screen_time,白屏时间

  • assetsTypes, 按资源类型划分,各类型包括:数量,大小,url详情

    html_requests

    html_size

    jpeg_requests

    jpeg_size

    png_requests

    png_size

    css_requests

    css_size

    js_requests

    js_size

    gif_requests

    gif_size

    slowest_requests

    ...

  • domreadyEvent

  • onloadEvent

  • load_time, 总下载时间

  • timing

    timing_appcache

    timing_dns

    timing_tcp

    timing_ttfb

  • global_variables 全局变量

  • domains 域名总数及详情

  • max_requests_per_domain 包含最大请求数的域

  • webspeed, 植入webspeed监控脚本的性能数据,详情见http://webspeed.baidu.com

  • 更多见: pagetimeline/modules

参考:

http://remotedebug.org/integrations/
https://github.com/macbre/phantomas
http://www.graphicsmagick.org/

think

  • 网速模拟

  • 并行

    ubuntu下,chrome在切换user data directory时会弹出默认浏览器设置,暂时无法去除,导致时间相关性能指标为空

    windows下,暂时不处理