dillon1000/react

Commit

[react-devtools-cdt-mcp] chrome-devtools-mcp integration (#36600)

> [!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
Browse files
Changed paths24 files
First-parent comparison
M .eslintignore ModifiedM .github/workflows/devtools_regression_tests.yml ModifiedM .github/workflows/runtime_build_and_test.yml ModifiedM .gitignore ModifiedA packages/react-devtools-cdt-mcp/README.md AddedA packages/react-devtools-cdt-mcp/fixtures/app/App.js AddedA packages/react-devtools-cdt-mcp/fixtures/app/README.md AddedA packages/react-devtools-cdt-mcp/fixtures/app/index.html AddedA packages/react-devtools-cdt-mcp/fixtures/app/index.js AddedA packages/react-devtools-cdt-mcp/fixtures/app/package.json AddedA packages/react-devtools-cdt-mcp/fixtures/app/webpack.config.js AddedA packages/react-devtools-cdt-mcp/fixtures/app/yarn.lock AddedA packages/react-devtools-cdt-mcp/index.js AddedA packages/react-devtools-cdt-mcp/package.json AddedA packages/react-devtools-cdt-mcp/rollup.config.cjs AddedA packages/react-devtools-cdt-mcp/src/DevToolsCdtMcp.js AddedA packages/react-devtools-cdt-mcp/src/__tests__/DevToolsCdtMcp-test.js AddedA packages/react-devtools-cdt-mcp/src/index.js AddedM packages/react-devtools-facade/src/DevToolsFacadeTools.js ModifiedM scripts/jest/config.build.js ModifiedM scripts/jest/config.source-persistent.js ModifiedM scripts/jest/config.source-www.js ModifiedM scripts/jest/config.source-xplat.js ModifiedM scripts/jest/config.source.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…