mirror of
https://github.com/hanzoai/react.git
synced 2026-09-24 17:02:27 +00:00
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
41 lines
873 B
HTML
41 lines
873 B
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>react-devtools-cdt-mcp fixture</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, system-ui, sans-serif;
|
|
margin: 2rem;
|
|
color: #1c1e21;
|
|
}
|
|
.app {
|
|
max-width: 40rem;
|
|
}
|
|
.panel {
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
}
|
|
.panel[data-theme='dark'] {
|
|
background: #f5f6f7;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin: 0.25rem 0;
|
|
}
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script src="/dist/bundle.js"></script>
|
|
</body>
|
|
</html>
|