Ruslan LesiutinandGitHub
54831395ea
> [!NOTE] > I had to invalidate `node_modules` cache keys on CI, because we are now using `react-devtools-facade` package and we need to create a symlink to it, otherwise Flow will fail. We use a hash value of `yarn.lock`, but it's not invalidated when a package inside yarn workspace is using another private package. --- This change introduces new `react-devtools-cdt-mcp` package, which is responsible for installing React tools for `chrome-devtools-mcp` server. It is using `react-devtools-facade` as a dependency: it doesn't own the implementation of these tools, it just relays Facade's tools to `chrome-devtools-mcp` format. When CDT MCP navigates to a fresh page, it emits unique `devtoolsdiscovery` method, that has `respondWith` method, which is the integration point between runtime libraries and MCP server. `react-devtools-cdt-mcp` is the owner for this integration. More details are available here - https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/third-party-developer-tools.md. Here is the list of tools that are being installed: - `react_get_component_tree` - `react_get_component_by_uid` - `react_find_components` - `react_get_component_source` - `react_get_owner_stack_trace` - `react_get_owner_stack` - `react_start_profiling` - `react_stop_profiling ` - `react_get_trace_overview` - `react_get_commit_report` --- Quick demo how to test the package with `chrome-devtools-mcp` CLI. Steps are also mentioned in `README` file: https://github.com/user-attachments/assets/af9fefce-03f0-4ebd-a94f-e9dd72b87f4d
react-devtools-facade
Experimental, private package that defines building blocks for querying React runtime state.
The facade installs the __REACT_DEVTOOLS_GLOBAL_HOOK__ that React looks for at
initialization time — enabling fiber-root tracking without the overhead of the
full DevTools backend — and exposes a small, framework-agnostic library API that
integrators compose into tools.
This package is intentionally low-level. It does not install any tool
globals and it does not decide how tools are surfaced. It installs the hook,
tracks fiber roots, and hands back building blocks; the integrator (for example,
a chrome-devtools-mcp integration) decides everything else — including whether
to expose anything else on globals.
API
installFacade(target = globalThis): Facade
Installs __REACT_DEVTOOLS_GLOBAL_HOOK__ on target and returns a Facade
handle holding the hook plus the runtime state it tracks (fiberRoots,
rendererInternals, profilingState). Building blocks read from the returned
Facade; they never reach for globals.
Call this before React initializes so the hook captures the first commit:
import {installFacade} from 'react-devtools-facade';
const facade = installFacade();
// ...load React, render your app...
installFacade installs only the DevTools hook. It does not install
__REACT_TOOLS__, __REACT_LLM_TOOLS__, or any other global. Once the tool
building blocks land, an integrator composes them from the returned Facade and
decides whether to expose anything on globals.