browser_inspect
Inspect live browser pages to get rendered HTML, CSS cascade data, screenshots, and style comparisons. Verify what browsers actually render for accurate CSS debugging and development.
Instructions
Inspects a live browser page to get CSS and DOM information — the same data a human sees in browser DevTools. Use this before writing or debugging CSS to verify what the browser actually renders, not just what the source code says. Four actions available: 'dom' gets the rendered HTML structure, 'styles' gets the full CSS cascade, 'screenshot' captures a visual snapshot, 'diff' compares styles before and after a change. Call with action 'help' if unsure.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| action | Yes | 'dom' — get real rendered HTML and class names. 'styles' — get all CSS rules, computed values, and which rule is winning. 'screenshot' — capture a visual snapshot of an element. 'diff' — compare styles before/after a CSS change to verify it applied. 'help' — explain what this tool can do. | |
| selector | No | CSS selector for the element to inspect (e.g. '.dropdown-menu', '#header', 'button.primary'). Required for all actions except 'help'. | |
| url | No | URL of the running dev server (e.g. 'http://localhost:5173'). Required on the first call. Optional on subsequent calls — reuses the open browser tab. | |
| viewport | No | Optional: browser viewport size before inspecting (e.g. {"width": 375, "height": 812} for mobile). Defaults to 1440×900. | |
| properties | No | Optional, 'styles' action only: filter computed styles to specific property names (e.g. ['color', 'border', 'display']). If omitted, returns the most useful set by default. | |
| padding | No | Optional, 'screenshot' action only: pixels of padding around the element (default: 8). Increase for more visual context. | |
| reset | No | Optional, 'diff' action only: pass true to discard any existing snapshot and start a fresh baseline. |