README

创建用于简化在Web项目中搜索瓶颈的过程。 点击这里 查看实际效果。

特性

• 后端无关设计：可以与任何后端（PHP、Golang、Node.js、Java、...）一起使用
  • PHP 支持（请参阅 库）
  • Golang 开发中
  • 对于其他语言，请不要犹豫，为您的编程语言提交一个适配器PR
• 坞站模式
• 浮动窗口模式
• 瀑布图视图
• AJAX请求支持
• 体积小
• 无依赖：使用纯JS、CSS和HTML编写
• 有状态与localStorage（记住坞站/浮动模式、折叠和大小）
• 从概览视图跳转到行（只需点击跨度即可）

浮动窗口模式

坞站模式

构建&运行

您不需要运行任何东西就可以与性能分析器玩耍。请参阅 沙盒。

如果您想在本地上运行项目

1. 克隆此项目

git clone git@github.com:kirik/web-profiler-ui.git && cd web-profiler-ui

1. 运行任何HTTP服务器以打开 index.html

Python

python3 -m http.server

PHP

php -S localhost:8000

IntelliJ IDEs

您可以使用嵌入的Web服务器通过您的IntelliJ IDE运行此项目。只需打开 index.html 并在浏览器工具栏中点击您最喜欢的浏览器图标：

内部

性能分析器通过iframe嵌入，仅为了避免与父页面的CSS冲突。

• script.js 包含所有用于渲染性能数据所使用的JS
• style.css 包含性能分析器的CSS
• template.html 是主要的模板文件

后端应发送适当的响应，以便性能分析器解析并绘制跨度

{
  // (string) URI
  "request_uri": "/uri/requested/",
  // (int) overall memory used by the request in bytes
  "peak_memory": 0,
  // (array) collectors objects, see `Collector object`
  "collectors_data": [],
  // (float) Unix timestamp with microseconds
  "start_time": 1708231434.391469,
  // (float) overall time used to respond in seconds (with microseconds)
  "duration": 0.39930295944213867,
  // Not Implemented Yet
  "request_headers": [],
  // Not Implemented Yet
  "response_headers": []
}

收集器对象

{
  "props": {
    // (string, required) title to show in the profiler's tab
    "title": "Log",
    // (string, required) template for collector's data to display; available templates:
    //    - `table`: data will be displayed as a table
    //    - `html`: data will be shown as HTML
    "template": "table",
    // (string, optional) color associated with this collector
    //    - can be either hex `#af0000`, `rgb(255,0,0)` or color name `gold`
    //    - if no color is specified, a predefined color will be associated (by CRC32 from `title` and a 216-color palette)
    "cssColor": "#663333",
    // (float, required) summary time for this collector 
    "duration": 0,
    // (object, required) list of metrics, which this collector is collecting
    "metrics": {
      // (string, required) metric key (unique in metrics context)
      "key": {
        // (string, required) metric title, which will be displayed
        "title": "Title",
        // (string, required) metric data type - different types have their own format logic:
        //    - `seconds` - will be formatted as Xs/Xms/Xμs
        //    - `bytes` - will be formatted as XB/XKiB/XMiB/...
        //    - `unixtime` - will be formatted as time (for example: 23:43:54) 
        //    - `integer` - will be formatted as a number
        //    - `json` - 
        //    - `text` - long texts (such as SQL queries)
        //        For `table` template, the following features are available:
        //          text will be truncated with ellipses (using CSS);
        //          duplicated values will be highlighted;
        //          copy the full content on double click;
        //    - `string` (default) - just a string value, will not be truncated as opposed to `text` type
        "type": "type"
      },
      // `__start_time` and `__duration` are standard metrics which will be used to generate the Summary tab
      // with spans waterfall. You can skip these metrics to not display the collector in the Summary tab
      "__start_time": {
        "title": "Start time",
        "type": "seconds"
      },
      "__duration": {
        "title": "Duration",
        "type": "seconds"
      }
    }
  },
  "data": [
    {
      "message": "\"test\"",
      "file_line": "\/var\/www\/html\/App\/Dbg\/Controller\/Index.php:362",
      "time": 1708231434
    }
  ]
}

为了渲染AJAX响应，它们应该提供包含 __profiler 属性和业务数据的完整响应

{
  ...,
  "__profiler": {
    /*full profiler response*/
  }
}

我避免使用HTTP头通过AJAX发送性能分析数据，因为它需要HTTP服务器特殊的设置。我也不喜欢将响应保存到文件中用于后续使用，因为它需要可写的文件系统和其他与文件相关的逻辑（KISS）。

适配器

适配器是一小段与语言相关的代码（又称接口），用于将UI连接到Web项目。支持的适配器

• PHP (库)
• Golang (WIP)

开发中

Makefile 仅用于编辑后压缩CSS和JS。

PHP适配器

请使用以下命令初始化Composer

composer dumpautoload

然后打开 index.php。

路线图

1. 创建沙盒
2. 添加PHP库
3. 添加 Golang 适配器和库
4. 添加暗黑模式