How an AI agent uses React debugging
Inspect the React component tree, props and hooks on pages that use React.
Updated · T3rnel Browser 1.3.0
What the agent can do
- Detects React on the page and walks the component tree with component names, props and hook state.
- Highlights the DOM element that corresponds to a selected component so you can see the rendered output immediately.
- Works alongside the CSS inspector: select a component, then inspect its styles without losing context.
The tools
| Tool | Risk | Tier |
|---|---|---|
browser_react_detect | low | Pro |
browser_react_tree | low | Pro |
browser_react_inspect | low | Pro |
browser_react_highlight | low | Pro |
Calling it over MCP
{ "method": "tools/call", "params": { "name": "browser_react_detect", "arguments": {} } }Connect a client first: add the MCP Session Bridge. The extension then exposes 97 tools against your signed-in tabs.
Questions
Which tools does React debugging use?
browser_react_detect, browser_react_tree, browser_react_inspect, browser_react_highlight.
Is React debugging free?
Partly. browser_react_detect, browser_react_tree, browser_react_inspect, browser_react_highlight need Pro ($29.99 once); none of the others work on the free tier.
Does the agent have to ask before using React debugging?
Each tool has a risk level: browser_react_detect is low; browser_react_tree is low; browser_react_inspect is low; browser_react_highlight is low. The approval gate is off by default and can be armed in Settings.