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

  1. Build React for DevTools from the repo root (populates build/oss-experimental/):

    yarn build-for-devtools
    
  2. Start the fixture dev server (bundles the package source + this app):

    cd packages/react-devtools-cdt-mcp/fixtures/app
    yarn start
    

    This opens http://localhost:8080/.

  3. Point chrome-devtools-mcp at the page. The React tool group is discovered automatically — list it with list_3p_developer_tools and call the tools with execute_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:

  1. Start chrome-devtools-mcp with experimental third-party tools enabled:

    chrome-devtools start --categoryExperimentalThirdParty=true
    
  2. Navigate to the fixture page:

    chrome-devtools navigate_page --url http://localhost:8080
    
  3. Run a React tool by name:

    chrome-devtools execute_3p_developer_tool <react-tool-name>