人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载本篇技术指南讲解 ZCode 内置的agent-browser浏览器自动化技能Skill中用于**性能分析Profiling**的完整能力如何在你编写的自动化脚本、Agent 工作流或 CI 流水线中一键捕获 Chrome DevTools 的性能 Trace性能剖析据此定位页面加载瓶颈、交互卡顿与渲染问题。读完本文你将掌握agent-browser profiler start/stop的完整命令用法、Trace 分类Categories的选择策略、Chrome Trace Event 输出格式的解读方法以及把性能回归检查嵌入 CI 的实战方案。该技能随 ZCode 仓库分发目录位于 .agents/skills/agent-browser其中 SKILL.md 提供快速上手references/commands.md 提供全部命令参考本文对应的原始文档为 references/profiling.md。Profiling 是什么给浏览器自动化加上性能仪表agent-browser是一个通过 Chrome DevTools 协议CDP直接驱动 Chrome/Chromium 的浏览器自动化 CLI。它的大多数命令open、click、fill、wait等服务于把页面操作跑起来而profiler子命令服务于另一类问题页面到底慢在哪里。Profiling 的本质是在浏览器自动化运行期间开启 Chrome 的性能追踪器把主线程任务、JavaScript 执行、渲染管线、用户输入延迟等事件记录成一份结构化 Trace 文件随后可以在 Chrome DevTools 或 Perfetto 等工具中加载回放、逐帧分析。典型的使用节奏是start开始记录 → 执行若干自动化操作 →stop停止并落盘三步即可拿到一份可复现的性能报告# 开始记录 agent-browser profiler start # 执行待分析的页面操作 agent-browser navigate https://example.com agent-browser click #button agent-browser wait 1000 # 停止并保存为 Trace 文件 agent-browser profiler stop ./trace.json注意这里的start无需传参stop必须给出保存路径。该能力仅适用于基于 Chromium 的浏览器Chrome、Edge这是 Chrome Trace Event 格式的硬性前提。Profiler 命令详解start / stop 与自定义分类profiler子命令只有两个动作但通过--categories参数可以精细控制采集范围# 使用默认分类开始剖析 agent-browser profiler start # 使用自定义 Trace 分类逗号分隔开始剖析 agent-browser profiler start --categories devtools.timeline,v8.execute,blink.user_timing # 停止剖析并保存到指定文件 agent-browser profiler stop ./trace.jsonprofiler start开启性能追踪。不传--categories时使用默认分类集合见下文足以覆盖绝大多数性能诊断场景。profiler start --categories 逗号分隔列表按需裁剪采集范围。只采集你关心的层面可以减少数据体积例如只关心 JavaScript 执行时间时可仅保留v8.execute与devtools.timeline。profiler stop path停止追踪并将内存中累积的事件序列化为 JSON 落盘。路径参数是必填的文件即 Chrome Trace Event 格式的性能剖析文件。在 SKILL.md 的 Visual Browser 调试小节中profiler与另一组调试命令并列出现方便在可视化调试时组合使用agent-browser --headed open https://example.com agent-browser highlight e1 # 高亮元素 agent-browser inspect # 为当前页面打开 Chrome DevTools agent-browser record start demo.webm # 录屏 agent-browser profiler start # 开始 DevTools 剖析 agent-browser profiler stop trace.json # 停止并保存路径可选从命令参考 commands.md 可以看到profiler与trace start/trace stop同属 Debugging 命令族前者产出 JSON 格式的 Trace 事件流后者产出可离线分析的 trace 压缩包二者可按需选用。Trace 分类Categories采集哪些事件--categories接受逗号分隔的 Chrome Trace 分类列表。Chrome 的 Trace 系统按主题划分事件类别选择不同的分类决定了最终数据里能看到什么。默认分类包括分类含义devtools.timeline标准 DevTools 性能追踪覆盖主线程任务、布局、绘制、合成等核心事件v8.executeV8 引擎执行 JavaScript 所花费的时间blink渲染器Blink事件涵盖样式计算、布局、绘制等渲染管线环节blink.user_timing页面内performance.mark()/performance.measure()调用产生的用户自定义计时点latencyInfo输入事件到响应延迟的追踪input-to-latencyrenderer.scheduler渲染器任务调度与执行细节toplevel覆盖面最广的基础事件集合此外采集还会默认附带若干disabled-by-default-*分类用于提供更细粒度的 Timeline、调用栈call stack以及 V8 CPU 剖析数据。这类分类默认不开启、需要显式请求它们能回答某个函数到底占了多久 CPU这类更深入的问题。如何选择分类快速定位整体瓶颈使用默认分类即可devtools.timeline已经能勾勒出主线程的时间分配聚焦脚本性能追加v8.execute区分JS 太慢还是渲染太慢验证业务埋点追加blink.user_timing与你自己的performance.mark()对齐量化关键业务阶段耗时深挖函数级热点依赖默认附带的disabled-by-default-*V8 CPU 剖析数据配合调用栈分析。三个实战用例加载、交互与 CI 回归用例一诊断页面加载缓慢最经典的场景是自动化打开页面后立即开始记录等网络空闲后停止agent-browser profiler start agent-browser navigate https://app.example.com agent-browser wait --load networkidle agent-browser profiler stop ./page-load-profile.json这里wait --load networkidle是 SKILL.md 中推荐的慢页面等待策略——等待网络活动平息后再停止采集确保 Trace 覆盖从导航开始到资源加载完成的完整区间而不是在页面还在加载时就过早截断。用例二剖析用户交互卡顿聚焦点击按钮后的响应与重渲染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.json先导航、再开启剖析可以避免把无关的初始加载开销混入交互数据点击后固定等待 2 秒把点击触发的任务、布局、绘制事件完整收进窗口。配合latencyInfo分类还能评估从用户输入到画面响应的延迟。用例三CI 性能回归检查把剖析嵌入构建流程每个构建产物都留下一条可对比的性能基线#!/bin/bash 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将BUILD_ID拼入文件名即可在构建产物中留存每次构建的 Trace后续通过脚本对比两次 Trace 中关键事件如首屏任务总时长、RunTask事件耗时分布的变化即可在 UI 性能退化时第一时间告警。若在 CI 中使用请参考 SKILL.md 中的建议为会话设置空闲自动回收AGENT_BROWSER_IDLE_TIMEOUT_MS避免后台守护进程残留。输出格式Chrome Trace EventJSONprofiler stop产出的文件是标准的Chrome Trace Event 格式JSON{ traceEvents: [ { cat: devtools.timeline, name: RunTask, ph: X, ts: 12345, dur: 100, ... }, ... ], metadata: { clock-domain: LINUX_CLOCK_MONOTONIC } }核心字段含义traceEvents事件数组是 Trace 的主体。每个事件至少包含cat事件所属分类对应上文的 Trace 分类如devtools.timelinename事件名称如RunTask执行一个任务、FunctionCall、Layout等ph事件类型phaseX表示完整事件有开始和结束此外还有B/E开始/结束、i瞬时事件、M元数据等ts时间戳微秒级相对于 Trace 起始的时钟dur持续时间微秒仅完整事件ph: X具有。metadata元信息。metadata.clock-domain字段根据宿主平台设置——在 Linux 上为LINUX_CLOCK_MONOTONIC在 macOS 上对应 macOS 的单调时钟在 Windows 上该字段会被省略。理解ph与dur的配合是解读 Trace 的关键X类型的完整事件自带持续时间可以直接用来统计某类任务的总耗时这也是性能回归脚本可以自动解析的依据。查看与分析 Trace生成的 JSON 可以直接拖入以下任一工具加载Chrome DevTools打开开发者工具CtrlShiftI→ Performance 面板 → Load profile选择 JSON 文件即可回放性能时间线Perfetto UI在线拖放 JSON 文件获得更现代的交互式 Trace 分析视图支持缩放、筛选与关键事件标记Trace Viewer在任意 Chromium 浏览器中打开chrome://tracing加载 JSON 进行传统时间线查看。加载后建议按cat过滤、按dur排序先看总耗时最长的任务类型再逐步下钻到具体函数这与分类选择策略先宽后窄相互呼应。已知限制与使用注意仅支持 Chromium 内核只适用于 Chrome、Edge 等 Chromium 系浏览器不支持 Firefox 或 WebKit使用其他内核如 SKILL.md 中提到的 Lightpanda 引擎时该能力不可用内存占用剖析期间 Trace 数据在内存中持续累积上限为500 万事件。请在关注区间结束后及时stop避免长时间运行导致内存膨胀甚至丢失数据停止超时停止采集有30 秒超时。如果浏览器无响应profiler stop可能失败此时应先排查浏览器是否卡死如页面存在死循环脚本与超时配置的联动若你在自动化中通过AGENT_BROWSER_DEFAULT_TIMEOUT调整了默认超时见 SKILL.md 的 Timeouts 小节注意停止采集的 30 秒上限独立于该配置属于浏览器侧的采集约束会话纪律剖析完成后建议执行agent-browser close清理会话避免后台守护进程残留影响下一次采集的纯净度。总结agent-browser profiler把性能剖析从繁琐的浏览器开发者工具操作中解放出来变成一行命令即可嵌入自动化脚本与 CI 的能力。通过掌握start/stop的调用节奏、--categories的分类选择、Chrome Trace Event 格式的字段语义以及三个开箱即用的实战用例你可以把 ZCode 中的浏览器自动化从能跑提升到跑得快、可度量、可回归的工程化水平。更完整的命令与配置项可继续查阅 commands.md 与 SKILL.md。赞分享人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载相关推荐ZCode 浏览器自动化性能分析实战agent-browser Chrome DevTools Profiling 完全指南ZCode 浏览器自动化性能分析实战agent browser Chrome DevTools Profiling 完全指南 在 ZCode 的浏览器自动化技agent-browser 性能剖析实战用 profiler 命令在浏览器自动化中捕获 Chrome DevTools 性能数据agent browser 性能剖析实战用 profiler 命令在浏览器自动化中捕获 Chrome DevTools 性能数据 导读 本文围绕 InstatCMS后端前端基于 agent-browser 的 Chrome DevTools 性能分析指南在浏览器自动化中捕获与解读 Profiling 数据基于 agent browser 的 Chrome DevTools 性能分析指南在浏览器自动化中捕获与解读 Profiling 数据 导读 在 AI Age人工智能大模型微调模型评测模型推理服务LLMOps本地部署后端CLI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ZCode 浏览器自动化性能分析实战：用 agent-browser 捕获并解读 Chrome DevTools Trace
人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载本篇技术指南讲解 ZCode 内置的agent-browser浏览器自动化技能Skill中用于**性能分析Profiling**的完整能力如何在你编写的自动化脚本、Agent 工作流或 CI 流水线中一键捕获 Chrome DevTools 的性能 Trace性能剖析据此定位页面加载瓶颈、交互卡顿与渲染问题。读完本文你将掌握agent-browser profiler start/stop的完整命令用法、Trace 分类Categories的选择策略、Chrome Trace Event 输出格式的解读方法以及把性能回归检查嵌入 CI 的实战方案。该技能随 ZCode 仓库分发目录位于 .agents/skills/agent-browser其中 SKILL.md 提供快速上手references/commands.md 提供全部命令参考本文对应的原始文档为 references/profiling.md。Profiling 是什么给浏览器自动化加上性能仪表agent-browser是一个通过 Chrome DevTools 协议CDP直接驱动 Chrome/Chromium 的浏览器自动化 CLI。它的大多数命令open、click、fill、wait等服务于把页面操作跑起来而profiler子命令服务于另一类问题页面到底慢在哪里。Profiling 的本质是在浏览器自动化运行期间开启 Chrome 的性能追踪器把主线程任务、JavaScript 执行、渲染管线、用户输入延迟等事件记录成一份结构化 Trace 文件随后可以在 Chrome DevTools 或 Perfetto 等工具中加载回放、逐帧分析。典型的使用节奏是start开始记录 → 执行若干自动化操作 →stop停止并落盘三步即可拿到一份可复现的性能报告# 开始记录 agent-browser profiler start # 执行待分析的页面操作 agent-browser navigate https://example.com agent-browser click #button agent-browser wait 1000 # 停止并保存为 Trace 文件 agent-browser profiler stop ./trace.json注意这里的start无需传参stop必须给出保存路径。该能力仅适用于基于 Chromium 的浏览器Chrome、Edge这是 Chrome Trace Event 格式的硬性前提。Profiler 命令详解start / stop 与自定义分类profiler子命令只有两个动作但通过--categories参数可以精细控制采集范围# 使用默认分类开始剖析 agent-browser profiler start # 使用自定义 Trace 分类逗号分隔开始剖析 agent-browser profiler start --categories devtools.timeline,v8.execute,blink.user_timing # 停止剖析并保存到指定文件 agent-browser profiler stop ./trace.jsonprofiler start开启性能追踪。不传--categories时使用默认分类集合见下文足以覆盖绝大多数性能诊断场景。profiler start --categories 逗号分隔列表按需裁剪采集范围。只采集你关心的层面可以减少数据体积例如只关心 JavaScript 执行时间时可仅保留v8.execute与devtools.timeline。profiler stop path停止追踪并将内存中累积的事件序列化为 JSON 落盘。路径参数是必填的文件即 Chrome Trace Event 格式的性能剖析文件。在 SKILL.md 的 Visual Browser 调试小节中profiler与另一组调试命令并列出现方便在可视化调试时组合使用agent-browser --headed open https://example.com agent-browser highlight e1 # 高亮元素 agent-browser inspect # 为当前页面打开 Chrome DevTools agent-browser record start demo.webm # 录屏 agent-browser profiler start # 开始 DevTools 剖析 agent-browser profiler stop trace.json # 停止并保存路径可选从命令参考 commands.md 可以看到profiler与trace start/trace stop同属 Debugging 命令族前者产出 JSON 格式的 Trace 事件流后者产出可离线分析的 trace 压缩包二者可按需选用。Trace 分类Categories采集哪些事件--categories接受逗号分隔的 Chrome Trace 分类列表。Chrome 的 Trace 系统按主题划分事件类别选择不同的分类决定了最终数据里能看到什么。默认分类包括分类含义devtools.timeline标准 DevTools 性能追踪覆盖主线程任务、布局、绘制、合成等核心事件v8.executeV8 引擎执行 JavaScript 所花费的时间blink渲染器Blink事件涵盖样式计算、布局、绘制等渲染管线环节blink.user_timing页面内performance.mark()/performance.measure()调用产生的用户自定义计时点latencyInfo输入事件到响应延迟的追踪input-to-latencyrenderer.scheduler渲染器任务调度与执行细节toplevel覆盖面最广的基础事件集合此外采集还会默认附带若干disabled-by-default-*分类用于提供更细粒度的 Timeline、调用栈call stack以及 V8 CPU 剖析数据。这类分类默认不开启、需要显式请求它们能回答某个函数到底占了多久 CPU这类更深入的问题。如何选择分类快速定位整体瓶颈使用默认分类即可devtools.timeline已经能勾勒出主线程的时间分配聚焦脚本性能追加v8.execute区分JS 太慢还是渲染太慢验证业务埋点追加blink.user_timing与你自己的performance.mark()对齐量化关键业务阶段耗时深挖函数级热点依赖默认附带的disabled-by-default-*V8 CPU 剖析数据配合调用栈分析。三个实战用例加载、交互与 CI 回归用例一诊断页面加载缓慢最经典的场景是自动化打开页面后立即开始记录等网络空闲后停止agent-browser profiler start agent-browser navigate https://app.example.com agent-browser wait --load networkidle agent-browser profiler stop ./page-load-profile.json这里wait --load networkidle是 SKILL.md 中推荐的慢页面等待策略——等待网络活动平息后再停止采集确保 Trace 覆盖从导航开始到资源加载完成的完整区间而不是在页面还在加载时就过早截断。用例二剖析用户交互卡顿聚焦点击按钮后的响应与重渲染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.json先导航、再开启剖析可以避免把无关的初始加载开销混入交互数据点击后固定等待 2 秒把点击触发的任务、布局、绘制事件完整收进窗口。配合latencyInfo分类还能评估从用户输入到画面响应的延迟。用例三CI 性能回归检查把剖析嵌入构建流程每个构建产物都留下一条可对比的性能基线#!/bin/bash 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将BUILD_ID拼入文件名即可在构建产物中留存每次构建的 Trace后续通过脚本对比两次 Trace 中关键事件如首屏任务总时长、RunTask事件耗时分布的变化即可在 UI 性能退化时第一时间告警。若在 CI 中使用请参考 SKILL.md 中的建议为会话设置空闲自动回收AGENT_BROWSER_IDLE_TIMEOUT_MS避免后台守护进程残留。输出格式Chrome Trace EventJSONprofiler stop产出的文件是标准的Chrome Trace Event 格式JSON{ traceEvents: [ { cat: devtools.timeline, name: RunTask, ph: X, ts: 12345, dur: 100, ... }, ... ], metadata: { clock-domain: LINUX_CLOCK_MONOTONIC } }核心字段含义traceEvents事件数组是 Trace 的主体。每个事件至少包含cat事件所属分类对应上文的 Trace 分类如devtools.timelinename事件名称如RunTask执行一个任务、FunctionCall、Layout等ph事件类型phaseX表示完整事件有开始和结束此外还有B/E开始/结束、i瞬时事件、M元数据等ts时间戳微秒级相对于 Trace 起始的时钟dur持续时间微秒仅完整事件ph: X具有。metadata元信息。metadata.clock-domain字段根据宿主平台设置——在 Linux 上为LINUX_CLOCK_MONOTONIC在 macOS 上对应 macOS 的单调时钟在 Windows 上该字段会被省略。理解ph与dur的配合是解读 Trace 的关键X类型的完整事件自带持续时间可以直接用来统计某类任务的总耗时这也是性能回归脚本可以自动解析的依据。查看与分析 Trace生成的 JSON 可以直接拖入以下任一工具加载Chrome DevTools打开开发者工具CtrlShiftI→ Performance 面板 → Load profile选择 JSON 文件即可回放性能时间线Perfetto UI在线拖放 JSON 文件获得更现代的交互式 Trace 分析视图支持缩放、筛选与关键事件标记Trace Viewer在任意 Chromium 浏览器中打开chrome://tracing加载 JSON 进行传统时间线查看。加载后建议按cat过滤、按dur排序先看总耗时最长的任务类型再逐步下钻到具体函数这与分类选择策略先宽后窄相互呼应。已知限制与使用注意仅支持 Chromium 内核只适用于 Chrome、Edge 等 Chromium 系浏览器不支持 Firefox 或 WebKit使用其他内核如 SKILL.md 中提到的 Lightpanda 引擎时该能力不可用内存占用剖析期间 Trace 数据在内存中持续累积上限为500 万事件。请在关注区间结束后及时stop避免长时间运行导致内存膨胀甚至丢失数据停止超时停止采集有30 秒超时。如果浏览器无响应profiler stop可能失败此时应先排查浏览器是否卡死如页面存在死循环脚本与超时配置的联动若你在自动化中通过AGENT_BROWSER_DEFAULT_TIMEOUT调整了默认超时见 SKILL.md 的 Timeouts 小节注意停止采集的 30 秒上限独立于该配置属于浏览器侧的采集约束会话纪律剖析完成后建议执行agent-browser close清理会话避免后台守护进程残留影响下一次采集的纯净度。总结agent-browser profiler把性能剖析从繁琐的浏览器开发者工具操作中解放出来变成一行命令即可嵌入自动化脚本与 CI 的能力。通过掌握start/stop的调用节奏、--categories的分类选择、Chrome Trace Event 格式的字段语义以及三个开箱即用的实战用例你可以把 ZCode 中的浏览器自动化从能跑提升到跑得快、可度量、可回归的工程化水平。更完整的命令与配置项可继续查阅 commands.md 与 SKILL.md。赞分享人工智能大模型代码智能体AI Agent桌面应用后端前端CLI【免费下载链接】ZCodeZCode 是 AI 编程工作台提供桌面应用、浏览器界面和终端 Agent。本仓库包含客户端、后端服务、共享 UI以及 Agent CLI 与运行时源码。项目地址https://gitcode.com/zai-org/ZCode点击查看免费下载相关推荐ZCode 浏览器自动化性能分析实战agent-browser Chrome DevTools Profiling 完全指南ZCode 浏览器自动化性能分析实战agent browser Chrome DevTools Profiling 完全指南 在 ZCode 的浏览器自动化技agent-browser 性能剖析实战用 profiler 命令在浏览器自动化中捕获 Chrome DevTools 性能数据agent browser 性能剖析实战用 profiler 命令在浏览器自动化中捕获 Chrome DevTools 性能数据 导读 本文围绕 InstatCMS后端前端基于 agent-browser 的 Chrome DevTools 性能分析指南在浏览器自动化中捕获与解读 Profiling 数据基于 agent browser 的 Chrome DevTools 性能分析指南在浏览器自动化中捕获与解读 Profiling 数据 导读 在 AI Age人工智能大模型微调模型评测模型推理服务LLMOps本地部署后端CLI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考