尧图网页设计 
agent-browser 性能剖析指南在浏览器自动化中采集与分析 Chrome DevTools 性能数据【免费下载链接】activepiecesAI Agents MCPs AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows AI Agents • MCPs for AI Agents项目地址: https://gitcode.com/GitHub_Trending/ac/activepieces本指南基于当前仓库 .agents/skills/agent-browser/references/profiling.md 展开系统讲解 agent-browser 的profiler命令族如何围绕一次浏览器自动化任务开启/停止性能剖析、按需选择 Chrome trace 分类、理解 Trace Event 输出格式并用 DevTools / Perfetto / chrome://tracing 解读结果。读完本文你将掌握一套可嵌入自动化流程与 CI 的性能回归检查方案能够定位页面加载缓慢、交互卡顿等具体瓶颈。一、profiler 在 agent-browser 中的定位agent-browser 是当前仓库.agents目录下的浏览器自动化 CLI 技能见 SKILL.md面向 AI Agent 提供「导航 → 快照 → 交互 → 再快照」的完整浏览器操作闭环。profiler命令族是其中负责性能数据采集的能力它通过 Chrome DevTools ProtocolCDP捕获浏览器运行期间的性能轨迹performance profile供后续做性能分析。它与同属调试能力的trace命令有所区分见 commands.mdagent-browser trace start/trace stop trace.zip录制并导出浏览器 tracezip 包agent-browser profiler start/profiler stop trace.json以 Chrome DevTools 的方式采集性能剖析数据输出 JSON 轨迹文件。两者常配合--headed有头模式、wait --load networkidle、screenshot等命令共同构成完整的调试与观测工作流。二、基本剖析流程profiler的用法遵循「先开启采集 → 执行待测动作 → 停止并落盘」三段式。采集窗口应恰好覆盖你关心的那一段操作避免记录过多无关事件# 1. 开始剖析 agent-browser profiler start # 2. 执行需要分析的动作 agent-browser navigate https://example.com agent-browser click #button agent-browser wait 1000 # 3. 停止剖析并保存到文件 agent-browser profiler stop ./trace.json需要说明的是navigate、click、wait均为 commands.md 中的标准命令navigate是open的别名。由于浏览器通过后台守护进程在命令之间保持存活上述命令可以拆成多次调用也可以按 SKILL.md 的推荐用链式拼接例如agent-browser profiler start agent-browser open https://example.com agent-browser wait --load networkidle agent-browser profiler stop ./trace.json三、Profiler 命令详解profiler子命令只有两个核心动作参数极其精简# 使用默认 trace 分类启动剖析 agent-browser profiler start # 使用自定义 trace 分类启动逗号分隔 agent-browser profiler start --categories devtools.timeline,v8.execute,blink.user_timing # 停止剖析并保存到文件 agent-browser profiler stop ./trace.json要点说明start不带参数时使用默认分类集合见下文需要针对性采集例如只关心 JS 执行时间时用--categories覆盖stop的路径参数是输出文件位置支持相对路径与绝对路径停止动作会触发数据落盘若剖析窗口过长数据量可能很大建议在感兴趣的区间结束后尽快执行stop。四、剖析分类Trace Categories--categories接受逗号分隔的 Chrome trace 分类列表。默认分类包括分类覆盖内容devtools.timeline标准 DevTools 性能轨迹渲染、绘制、布局等v8.execute运行 JavaScript 所消耗的时间blink渲染进程renderer相关事件blink.user_timingperformance.mark()/performance.measure()调用latencyInfo输入事件到响应延迟的追踪renderer.scheduler任务调度与执行toplevel宽泛的基础事件集合此外默认集合还包含若干disabled-by-default-*分类用于获取更细粒度的 timeline、调用栈以及 V8 CPU 剖析数据这些分类默认关闭只有显式启用时才会产出主要用于深度定位 JS 热点与渲染细节。实战建议排查「页面加载慢」保留devtools.timeline、blink、v8.execute观察网络空闲前的事件序列排查「交互卡顿」追加latencyInfo与renderer.scheduler追踪输入事件到任务执行的延迟定位「JS 热点」启用含 V8 调用栈的disabled-by-default-*分类配合v8.execute分析函数级耗时。五、典型应用场景5.1 诊断缓慢的页面加载最直接的场景剖析一次完整导航定位首屏前的耗时环节。配合wait --load networkidle等网络空闲可以确保剖析覆盖到资源加载结束agent-browser profiler start agent-browser navigate https://app.example.com agent-browser wait --load networkidle agent-browser profiler stop ./page-load-profile.json5.2 剖析用户交互只采集交互片段把profiler start放在交互动作之前可以聚焦按钮点击、表单提交等事件的处理链路agent-browser navigate https://app.example.com agent-browser profiler start agent-browser click #submit agent-browser wait 2000 agent-browser profiler stop ./interaction-profile.json5.3 CI 性能回归检查将剖析嵌入 CI 脚本按构建号归档 profile 文件实现跨版本性能比对。示例脚本可参照 capture-workflow.sh 的set -euo pipefail严谨风格组织#!/bin/bash set -euo pipefail BUILD_ID${BUILD_ID:-local} mkdir -p ./profiles agent-browser profiler start agent-browser navigate https://app.example.com agent-browser wait --load networkidle agent-browser profiler stop ./profiles/build-${BUILD_ID}.json # 可选与基线 profile 对比关键指标如 DOMContentLoaded 时间、长任务数量 echo Profile saved: ./profiles/build-${BUILD_ID}.json在 CI 场景下建议同时关注 SKILL.md 中的会话管理约定为每个并行 job 使用命名会话--session name结束后显式agent-browser close避免残留后台进程污染指标。六、输出格式Chrome Trace Eventprofiler stop产出的文件是符合Chrome Trace Event 格式的 JSON顶层结构如下{ traceEvents: [ { cat: devtools.timeline, name: RunTask, ph: X, ts: 12345, dur: 100, ... }, ... ], metadata: { clock-domain: LINUX_CLOCK_MONOTONIC } }对关键字段的解读traceEvents事件数组是剖析数据的核心。每个事件至少包含cat所属分类、name事件名、ph事件阶段如X表示完整事件、B/E表示起止事件、ts时间戳单位微秒、dur持续时长单位微秒metadata.clock-domain时间基准域由宿主平台决定——Linux 与 macOS 上分别设置Windows 平台下该字段会被省略原因在于 Windows 上获取单调时钟的方式与类 Unix 平台不同。因此若你的剖析结果缺失metadata.clock-domain属于 Windows 平台下的预期行为并不影响traceEvents本身的可用性。七、查看剖析结果生成的 JSON 文件可以直接拖入以下任一工具解读Chrome DevTools打开开发者工具CtrlShiftI→ Performance性能面板 → 加载 profile 文件Load profilePerfetto UIPerfetto 官方在线 UI支持拖拽 JSON 文件交互式查看火焰图、事件时间线适合大型 traceTrace Viewer在任意 Chromium 浏览器地址栏打开chrome://tracing加载 JSON 文件即可查看。解读建议先看长任务Long Tasks与主线程空闲段快速定位卡顿区间再结合v8.execute分类确认是否为 JS 密集执行最后用latencyInfo核对输入到响应的延迟是否符合预期。多份 profile如基线 vs 本次构建可并列对比事件序列找出回归点。八、限制与注意事项使用profiler前必须明确以下边界仅支持 Chromium 系浏览器只适用于 Chrome、Edge 等 Chromium 内核Firefox 与 WebKit 不支持。内存上限 5 百万事件剖析期间轨迹数据在内存中累积上限为 500 万条事件。达到上限后采集数据可能被截断因此在感兴趣的区域结束后应尽快stop不要长时间空转。停止时有 30 秒超时stop的数据收集存在 30 秒超时窗口。如果浏览器处于无响应状态stop命令可能失败——这也是推荐「先stop再执行其他重操作」、并在 CI 脚本中做好失败兜底的原因。九、完整实践示例将以上知识点串成一个可落地的完整流程含会话隔离与清理# 1. 使用命名会话避免与其他任务冲突 agent-browser --session perf-check open https://app.example.com/dashboard # 2. 等待页面稳定后开始剖析 agent-browser --session perf-check wait --load networkidle agent-browser --session perf-check profiler start # 3. 执行待测交互 agent-browser --session perf-check click #refresh agent-browser --session perf-check wait 3000 # 4. 停止剖析、归档并清理会话 agent-browser --session perf-check profiler stop ./dashboard-refresh.json agent-browser --session perf-check close随后将dashboard-refresh.json拖入 DevTools Performance 面板或 Perfetto UI 即可查看从点击到数据刷新完成之间的完整事件时间线。相关命令的完整清单可继续查阅 commands.md速查起点见 SKILL.md本主题的原始参考文档见 profiling.md。【免费下载链接】activepiecesAI Agents MCPs AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows AI Agents • MCPs for AI Agents项目地址: https://gitcode.com/GitHub_Trending/ac/activepieces创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 agent-browser 性能剖析指南：在浏览器自动化中采集与分析 Chrome DevTools 性能数据
agent-browser 性能剖析指南在浏览器自动化中采集与分析 Chrome DevTools 性能数据【免费下载链接】activepiecesAI Agents MCPs AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows AI Agents • MCPs for AI Agents项目地址: https://gitcode.com/GitHub_Trending/ac/activepieces本指南基于当前仓库 .agents/skills/agent-browser/references/profiling.md 展开系统讲解 agent-browser 的profiler命令族如何围绕一次浏览器自动化任务开启/停止性能剖析、按需选择 Chrome trace 分类、理解 Trace Event 输出格式并用 DevTools / Perfetto / chrome://tracing 解读结果。读完本文你将掌握一套可嵌入自动化流程与 CI 的性能回归检查方案能够定位页面加载缓慢、交互卡顿等具体瓶颈。一、profiler 在 agent-browser 中的定位agent-browser 是当前仓库.agents目录下的浏览器自动化 CLI 技能见 SKILL.md面向 AI Agent 提供「导航 → 快照 → 交互 → 再快照」的完整浏览器操作闭环。profiler命令族是其中负责性能数据采集的能力它通过 Chrome DevTools ProtocolCDP捕获浏览器运行期间的性能轨迹performance profile供后续做性能分析。它与同属调试能力的trace命令有所区分见 commands.mdagent-browser trace start/trace stop trace.zip录制并导出浏览器 tracezip 包agent-browser profiler start/profiler stop trace.json以 Chrome DevTools 的方式采集性能剖析数据输出 JSON 轨迹文件。两者常配合--headed有头模式、wait --load networkidle、screenshot等命令共同构成完整的调试与观测工作流。二、基本剖析流程profiler的用法遵循「先开启采集 → 执行待测动作 → 停止并落盘」三段式。采集窗口应恰好覆盖你关心的那一段操作避免记录过多无关事件# 1. 开始剖析 agent-browser profiler start # 2. 执行需要分析的动作 agent-browser navigate https://example.com agent-browser click #button agent-browser wait 1000 # 3. 停止剖析并保存到文件 agent-browser profiler stop ./trace.json需要说明的是navigate、click、wait均为 commands.md 中的标准命令navigate是open的别名。由于浏览器通过后台守护进程在命令之间保持存活上述命令可以拆成多次调用也可以按 SKILL.md 的推荐用链式拼接例如agent-browser profiler start agent-browser open https://example.com agent-browser wait --load networkidle agent-browser profiler stop ./trace.json三、Profiler 命令详解profiler子命令只有两个核心动作参数极其精简# 使用默认 trace 分类启动剖析 agent-browser profiler start # 使用自定义 trace 分类启动逗号分隔 agent-browser profiler start --categories devtools.timeline,v8.execute,blink.user_timing # 停止剖析并保存到文件 agent-browser profiler stop ./trace.json要点说明start不带参数时使用默认分类集合见下文需要针对性采集例如只关心 JS 执行时间时用--categories覆盖stop的路径参数是输出文件位置支持相对路径与绝对路径停止动作会触发数据落盘若剖析窗口过长数据量可能很大建议在感兴趣的区间结束后尽快执行stop。四、剖析分类Trace Categories--categories接受逗号分隔的 Chrome trace 分类列表。默认分类包括分类覆盖内容devtools.timeline标准 DevTools 性能轨迹渲染、绘制、布局等v8.execute运行 JavaScript 所消耗的时间blink渲染进程renderer相关事件blink.user_timingperformance.mark()/performance.measure()调用latencyInfo输入事件到响应延迟的追踪renderer.scheduler任务调度与执行toplevel宽泛的基础事件集合此外默认集合还包含若干disabled-by-default-*分类用于获取更细粒度的 timeline、调用栈以及 V8 CPU 剖析数据这些分类默认关闭只有显式启用时才会产出主要用于深度定位 JS 热点与渲染细节。实战建议排查「页面加载慢」保留devtools.timeline、blink、v8.execute观察网络空闲前的事件序列排查「交互卡顿」追加latencyInfo与renderer.scheduler追踪输入事件到任务执行的延迟定位「JS 热点」启用含 V8 调用栈的disabled-by-default-*分类配合v8.execute分析函数级耗时。五、典型应用场景5.1 诊断缓慢的页面加载最直接的场景剖析一次完整导航定位首屏前的耗时环节。配合wait --load networkidle等网络空闲可以确保剖析覆盖到资源加载结束agent-browser profiler start agent-browser navigate https://app.example.com agent-browser wait --load networkidle agent-browser profiler stop ./page-load-profile.json5.2 剖析用户交互只采集交互片段把profiler start放在交互动作之前可以聚焦按钮点击、表单提交等事件的处理链路agent-browser navigate https://app.example.com agent-browser profiler start agent-browser click #submit agent-browser wait 2000 agent-browser profiler stop ./interaction-profile.json5.3 CI 性能回归检查将剖析嵌入 CI 脚本按构建号归档 profile 文件实现跨版本性能比对。示例脚本可参照 capture-workflow.sh 的set -euo pipefail严谨风格组织#!/bin/bash set -euo pipefail BUILD_ID${BUILD_ID:-local} mkdir -p ./profiles agent-browser profiler start agent-browser navigate https://app.example.com agent-browser wait --load networkidle agent-browser profiler stop ./profiles/build-${BUILD_ID}.json # 可选与基线 profile 对比关键指标如 DOMContentLoaded 时间、长任务数量 echo Profile saved: ./profiles/build-${BUILD_ID}.json在 CI 场景下建议同时关注 SKILL.md 中的会话管理约定为每个并行 job 使用命名会话--session name结束后显式agent-browser close避免残留后台进程污染指标。六、输出格式Chrome Trace Eventprofiler stop产出的文件是符合Chrome Trace Event 格式的 JSON顶层结构如下{ traceEvents: [ { cat: devtools.timeline, name: RunTask, ph: X, ts: 12345, dur: 100, ... }, ... ], metadata: { clock-domain: LINUX_CLOCK_MONOTONIC } }对关键字段的解读traceEvents事件数组是剖析数据的核心。每个事件至少包含cat所属分类、name事件名、ph事件阶段如X表示完整事件、B/E表示起止事件、ts时间戳单位微秒、dur持续时长单位微秒metadata.clock-domain时间基准域由宿主平台决定——Linux 与 macOS 上分别设置Windows 平台下该字段会被省略原因在于 Windows 上获取单调时钟的方式与类 Unix 平台不同。因此若你的剖析结果缺失metadata.clock-domain属于 Windows 平台下的预期行为并不影响traceEvents本身的可用性。七、查看剖析结果生成的 JSON 文件可以直接拖入以下任一工具解读Chrome DevTools打开开发者工具CtrlShiftI→ Performance性能面板 → 加载 profile 文件Load profilePerfetto UIPerfetto 官方在线 UI支持拖拽 JSON 文件交互式查看火焰图、事件时间线适合大型 traceTrace Viewer在任意 Chromium 浏览器地址栏打开chrome://tracing加载 JSON 文件即可查看。解读建议先看长任务Long Tasks与主线程空闲段快速定位卡顿区间再结合v8.execute分类确认是否为 JS 密集执行最后用latencyInfo核对输入到响应的延迟是否符合预期。多份 profile如基线 vs 本次构建可并列对比事件序列找出回归点。八、限制与注意事项使用profiler前必须明确以下边界仅支持 Chromium 系浏览器只适用于 Chrome、Edge 等 Chromium 内核Firefox 与 WebKit 不支持。内存上限 5 百万事件剖析期间轨迹数据在内存中累积上限为 500 万条事件。达到上限后采集数据可能被截断因此在感兴趣的区域结束后应尽快stop不要长时间空转。停止时有 30 秒超时stop的数据收集存在 30 秒超时窗口。如果浏览器处于无响应状态stop命令可能失败——这也是推荐「先stop再执行其他重操作」、并在 CI 脚本中做好失败兜底的原因。九、完整实践示例将以上知识点串成一个可落地的完整流程含会话隔离与清理# 1. 使用命名会话避免与其他任务冲突 agent-browser --session perf-check open https://app.example.com/dashboard # 2. 等待页面稳定后开始剖析 agent-browser --session perf-check wait --load networkidle agent-browser --session perf-check profiler start # 3. 执行待测交互 agent-browser --session perf-check click #refresh agent-browser --session perf-check wait 3000 # 4. 停止剖析、归档并清理会话 agent-browser --session perf-check profiler stop ./dashboard-refresh.json agent-browser --session perf-check close随后将dashboard-refresh.json拖入 DevTools Performance 面板或 Perfetto UI 即可查看从点击到数据刷新完成之间的完整事件时间线。相关命令的完整清单可继续查阅 commands.md速查起点见 SKILL.md本主题的原始参考文档见 profiling.md。【免费下载链接】activepiecesAI Agents MCPs AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows AI Agents • MCPs for AI Agents项目地址: https://gitcode.com/GitHub_Trending/ac/activepieces创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考