Debug a live website with OMB
Combine your agent's code analysis with live browser evidence. Inspect the page and diagnostics, then verify with Network, Console, and screenshots. Ordinary sites need no website SDK or experimental Chrome WebMCP flag.
Start with a read-only diagnostic
Confirm OMB is connected. Open the affected page with a retained tab, then discover the current document's diagnostic tools.
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:{}}If no structured tool is available, continue with OMB page reading, DOM, Network, Console, and screenshots. Rediscover tools after navigation or hot reload and use the new toolRef. Do not blindly replay a consequential action.
A healthy result only means no covered failure was observed during the capture window. Generic diagnostics cannot infer user roles, selected business objects, or backend traces from the DOM.
Optional: add application context
A web app can explicitly supply its current module, selected object, and redacted read-only business diagnostics through the small JS/TS SDK. It does not automatically read server logs, and the site keeps working without the OMB extension.
npm install @getohmy/omb-web-diagnostics
Copy a task for your coding agent
Add @getohmy/omb-web-diagnostics to this web app for read-only debugging. Find the real frontend entry, route/object state, and existing read-only APIs. Initialize once (development-only if appropriate). Supply only allowlisted, non-sensitive application context. Register one app-prefixed read-only tool with bounded input and output; never include credentials, cookies, personal data, or request/response bodies. Dispose the registration on unmount or hot reload. Keep the app working without OMB or native Chrome WebMCP. Verify by discovering the tool with omb_map({source:"webmcp"}), invoking its fresh toolRef with omb_action({action:"webmcp_call"}), and cross-checking the result with browser Network or page state.Minimal TypeScript example
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();Verify the integration
Run omb_map again on the live page, find the latest toolRef for my_app_inspect_item, and call it with omb_action. Cross-check the returned state against the page or Network evidence. Your app must provide inspectItemReadOnly and the current-state functions.
@getohmy/omb-web-diagnostics ↗