Fixture app
A small React app for manually exercising the react-devtools-cdt-mcp tools with
chrome-devtools-mcp.
Not part of the published package.
It renders a variety of components so every tool has something to inspect:
function/host/context/memo/forwardRef nodes, a custom hook (nested subHooks),
keyed list items, and timer/button components that re-render (for profiling).
Like react-devtools-shell, React (and the DevTools backend dependencies the
facade uses) are resolved from the monorepo build output via webpack aliases, so
the fixture runs against React from source — no CDN copy, and
react_get_component_by_uid hooks inspection matches the build exactly.
Run
-
Build React for DevTools from the repo root (populates
build/oss-experimental/):yarn build-for-devtools -
Start the fixture dev server (bundles the package source + this app):
cd packages/react-devtools-cdt-mcp/fixtures/app yarn startThis opens
http://localhost:8080/. -
Point chrome-devtools-mcp at the page. The React tool group is discovered automatically — list it with
list_3p_developer_toolsand call the tools withexecute_3p_developer_tool({toolName, params}).
Test with the chrome-devtools-mcp CLI
With the dev server running, drive the tools end-to-end from the CLI:
-
Start chrome-devtools-mcp with experimental third-party tools enabled:
chrome-devtools start --categoryExperimentalThirdParty=true -
Navigate to the fixture page:
chrome-devtools navigate_page --url http://localhost:8080 -
Run a React tool by name:
chrome-devtools execute_3p_developer_tool <react-tool-name>