browser debugging

用 OMB 调试真实网页

让 Agent 将代码分析与浏览器现场结合:先读页面和诊断,再查看 Network、Console 与截图核实。普通网页不需要安装网站 SDK,也不用开启 Chrome 实验性 WebMCP。

先做一次只读排查

确认 OMB 已连接;打开问题页面并保留标签,再发现当前文档的诊断工具。

omb_status({})
omb_read({url:"http://127.0.0.1:5173/",keepForChain:true})
omb_map({tabId:<returned tabId>,source:"webmcp"})
omb_action({tabId:<same tabId>,action:"webmcp_call",toolRef:<fresh toolRef>,arguments:{}}

若当前页没有结构化工具,继续用普通 OMB 页面读取、DOM、Network、Console 和截图排查。导航或热更新后,重新发现并使用新的 toolRef;不要盲目重试可能重复提交的操作。

“健康”只表示采集窗口内未发现已覆盖的错误,不证明业务正确。通用诊断不会凭 DOM 推断登录角色、选中业务对象或后端 trace。

可选:给你的网站补充业务上下文

网站开发者可以用轻量 JS/TS SDK 主动提供当前模块、选中对象以及脱敏的只读业务诊断。SDK 不会自动读服务器日志;没有 OMB 扩展时也不会阻止网站运行。

npm install @getohmy/omb-web-diagnostics

复制给你的开发 Agent

请为这个网站接入 @getohmy/omb-web-diagnostics,只提供只读开发诊断。先查找真实的前端入口、路由/选中对象状态和现有只读接口;只初始化一次,需要时仅在开发环境启用。getContext 仅返回白名单中的非敏感业务字段。注册一个带应用前缀的只读工具,验证输入并限制输出;不要返回凭据、Cookie、个人信息或请求/响应正文。卸载或热更新时注销工具;没有 OMB 插件或 Chrome 原生 WebMCP 时网站也须正常运行。在真实浏览器用 omb_map({source:"webmcp"}) 发现工具,使用最新 toolRef 通过 omb_action({action:"webmcp_call"}) 调用,并与 Network 或页面状态核对。

最小 TypeScript 示例

import { startOmbDiagnostics } from "@getohmy/omb-web-diagnostics";

const diagnostics = startOmbDiagnostics({
  app: "my-web-app",
  getContext: () => ({ module: currentModule(), itemId: selectedItemId() }),
});
const unregister = diagnostics.registerTool({
  name: "my_app_inspect_item",
  title: "Inspect current item",
  description: "Read a bounded diagnostic status for one item.",
  inputSchema: {
    type: "object",
    properties: { id: { type: "string", maxLength: 128 } },
    required: ["id"], additionalProperties: false,
  },
  annotations: { readOnlyHint: true, consequentialHint: false },
  execute: async ({ id }: { id: string }) => {
    if (!id || id.length > 128) throw new Error("Invalid item ID");
    const result = await inspectItemReadOnly(id); // Your app supplies this function.
    return { state: result.state, failureCategory: result.failureCategory ?? null };
  },
});
// On unmount or hot reload: unregister(); diagnostics.dispose();

验证接入

在真实页面重新执行 omb_map,找到 my_app_inspect_item 的最新 toolRef,再用 omb_action 调用。将返回状态与页面或 Network 证据核对。网站应显式提供 inspectItemReadOnly 与当前状态函数。

@getohmy/omb-web-diagnostics ↗
安装与连接指南