Skip to content

Commit a749eb6

Browse files
committed
Tools: keep only the summary list
1 parent acba543 commit a749eb6

1 file changed

Lines changed: 12 additions & 228 deletions

File tree

‎src/content/reference/dev-tools/react-devtools-cdt-mcp.md‎

Lines changed: 12 additions & 228 deletions
Original file line numberDiff line numberDiff line change
@@ -337,239 +337,23 @@ The tool console in this sandbox stands in for Chrome DevTools MCP so you can tr
337337

338338
`react-devtools-cdt-mcp` registers a tool group called `react`. Your agent calls these tools through Chrome DevTools MCP.
339339

340-
* [`react_get_component_tree`](#react_get_component_tree): Returns a snapshot of the component tree.
341-
* [`react_find_components`](#react_find_components): Finds components by name.
342-
* [`react_get_component_by_uid`](#react_get_component_by_uid): Returns a component's props and Hooks.
343-
* [`react_get_component_by_dom_element`](#react_get_component_by_dom_element): Returns the React host component for a DOM element.
344-
* [`react_get_parent_stack`](#react_get_parent_stack): Returns where a component is mounted in the tree.
345-
* [`react_get_owner_stack`](#react_get_owner_stack): Returns the components that created a component in their JSX.
346-
* [`react_get_owner_stack_trace`](#react_get_owner_stack_trace): Returns the owner stack of a component as a stack trace.
347-
* [`react_get_component_source`](#react_get_component_source): Returns where a component is defined.
348-
* [`react_start_profiling`](#react_start_profiling): Starts recording render timing.
349-
* [`react_stop_profiling`](#react_stop_profiling): Stops recording render timing.
350-
* [`react_get_trace_overview`](#react_get_trace_overview): Returns a summary of every commit in a recording.
351-
* [`react_get_commit_report`](#react_get_commit_report): Returns which components rendered in a commit and how long each took.
340+
* `react_get_component_tree`: Returns a snapshot of the component tree.
341+
* `react_find_components`: Finds components by name.
342+
* `react_get_component_by_uid`: Returns a component's props and Hooks.
343+
* `react_get_component_by_dom_element`: Returns the React host component for a DOM element.
344+
* `react_get_parent_stack`: Returns where a component is mounted in the tree.
345+
* `react_get_owner_stack`: Returns the components that created a component in their JSX.
346+
* `react_get_owner_stack_trace`: Returns the owner stack of a component as a stack trace.
347+
* `react_get_component_source`: Returns where a component is defined.
348+
* `react_start_profiling`: Starts recording render timing.
349+
* `react_stop_profiling`: Stops recording render timing.
350+
* `react_get_trace_overview`: Returns a summary of every commit in a recording.
351+
* `react_get_commit_report`: Returns which components rendered in a commit and how long each took.
352352

353353
Components are identified by short, stable uids like `"r5"`. A uid stays the same across every tool and across re-renders, but not across page reloads.
354354

355355
Every tool returns a plain, serializable object. If a tool fails, it returns an object with an `error` message instead.
356356

357-
#### `react_get_component_tree` {/*react_get_component_tree*/}
358-
359-
Returns a snapshot of the component tree of every mounted root.
360-
361-
##### Parameters {/*react_get_component_tree-parameters*/}
362-
363-
* **optional** `depth`: Maximum depth to walk. Defaults to `20`.
364-
* **optional** `rootUid`: Start the snapshot from this component instead of the roots.
365-
366-
##### Returns {/*react_get_component_tree-returns*/}
367-
368-
`react_get_component_tree` returns an object with one property:
369-
370-
* `nodes`: A flat array of the components in the tree. Each node has these properties:
371-
* `uid`: The component's uid.
372-
* `type`: The kind of node, like `"function"`, `"class"`, `"host"`, `"memo"`, `"forwardRef"`, `"context"`, `"suspense"`, or `"root"`.
373-
* `name`: The component's name, or the tag name for host components.
374-
* `key`: The component's [`key`](/learn/rendering-lists#keeping-list-items-in-order-with-key), or `null`.
375-
* `firstChild`: The uid of the first child, or `null`.
376-
* `nextSibling`: The uid of the next sibling, or `null`.
377-
378-
#### `react_find_components` {/*react_find_components*/}
379-
380-
Finds components whose name contains a substring, ignoring case.
381-
382-
##### Parameters {/*react_find_components-parameters*/}
383-
384-
* `name`: The substring to search for.
385-
* **optional** `rootUid`: Only search inside this component's subtree.
386-
* **optional** `page`: The page of results to return. Defaults to `1`.
387-
* **optional** `pageSize`: Results per page. Defaults to `10`.
388-
389-
##### Returns {/*react_find_components-returns*/}
390-
391-
`react_find_components` returns an object with these properties:
392-
393-
* `results`: The matching components on this page, as nodes in the same shape as [`react_get_component_tree`](#react_get_component_tree) returns.
394-
* `page`: The current page.
395-
* `pageSize`: The number of results per page.
396-
* `totalCount`: The total number of matching components.
397-
* `totalPages`: The total number of pages.
398-
399-
#### `react_get_component_by_uid` {/*react_get_component_by_uid*/}
400-
401-
Returns the props and, optionally, the Hooks of one component.
402-
403-
##### Parameters {/*react_get_component_by_uid-parameters*/}
404-
405-
* `uid`: The component's uid.
406-
* **optional** `includeHooks`: Whether to inspect Hooks. Defaults to `false`.
407-
408-
##### Returns {/*react_get_component_by_uid-returns*/}
409-
410-
`react_get_component_by_uid` returns an object with these properties:
411-
412-
* `uid`, `type`, `name`: The same as in [`react_get_component_tree`](#react_get_component_tree).
413-
* `key`: The component's `key`, if it has one.
414-
* `props`: The component's props, without `children`.
415-
* `hooks`: Only when `includeHooks` is `true`. An array of the component's Hooks. Each Hook has these properties:
416-
* `id`: The Hook's index, or `null` for custom Hooks.
417-
* `name`: The Hook's name, like `"State"` or `"Effect"`.
418-
* `value`: The Hook's current value.
419-
* `subHooks`: For a custom Hook, the Hooks it calls.
420-
421-
##### Caveats {/*react_get_component_by_uid-caveats*/}
422-
423-
* `hooks` is only returned for function, `forwardRef`, and `memo` components.
424-
* Prop and Hook values are normalized so they can be serialized.
425-
* To read Hook values, React DevTools calls the component's render function again. Effects don't run, but side effects in the render body itself do. This is one more reason to keep [components pure](/learn/keeping-components-pure).
426-
427-
#### `react_get_component_by_dom_element` {/*react_get_component_by_dom_element*/}
428-
429-
Returns the React host component for a DOM element, for example the `<button>` that React rendered. To find the component that rendered it, pass the returned `uid` to [`react_get_owner_stack`](#react_get_owner_stack).
430-
431-
##### Parameters {/*react_get_component_by_dom_element-parameters*/}
432-
433-
* `element`: A DOM element in the page. Chrome DevTools MCP clients pass `{uid}`, using an element uid from the page snapshot, and Chrome DevTools MCP resolves it to the element.
434-
435-
##### Returns {/*react_get_component_by_dom_element-returns*/}
436-
437-
`react_get_component_by_dom_element` returns an object with the same properties as [`react_get_component_by_uid`](#react_get_component_by_uid), without `hooks`. Its `type` is always `"host"`.
438-
439-
#### `react_get_parent_stack` {/*react_get_parent_stack*/}
440-
441-
Returns where a component is mounted in the rendered tree, from its immediate parent up to the root. Parents can include host components and the root itself.
442-
443-
##### Parameters {/*react_get_parent_stack-parameters*/}
444-
445-
* `uid`: The component's uid.
446-
447-
##### Returns {/*react_get_parent_stack-returns*/}
448-
449-
`react_get_parent_stack` returns an array of the component's parents, from its immediate parent up to the root. Each parent has a `uid`, a `name`, and a `type`, the same as in [`react_get_component_tree`](#react_get_component_tree). The array is empty for a root.
450-
451-
#### `react_get_owner_stack` {/*react_get_owner_stack*/}
452-
453-
Returns the components that created this one through JSX, from its immediate owner up to the root owner.
454-
455-
<Note>
456-
457-
The **parent** of a component is where it's mounted in the tree. The **owner** is the component that created it in its JSX. For example, in `<Card><Avatar /></Card>` written inside `Profile`, `Avatar`'s parent is `Card` but its owner is `Profile`.
458-
459-
</Note>
460-
461-
##### Parameters {/*react_get_owner_stack-parameters*/}
462-
463-
* `uid`: The component's uid.
464-
465-
##### Returns {/*react_get_owner_stack-returns*/}
466-
467-
`react_get_owner_stack` returns an array of the component's owners, from its immediate owner up to the root owner. Each owner has a `uid`, a `name`, and a `type`, the same as in [`react_get_component_tree`](#react_get_component_tree). The array is empty for a root component and in production builds.
468-
469-
#### `react_get_owner_stack_trace` {/*react_get_owner_stack_trace*/}
470-
471-
Returns the raw [owner stack](/reference/react/captureOwnerStack) of a component: the JSX call sites that created it, as a stack trace.
472-
473-
##### Parameters {/*react_get_owner_stack_trace-parameters*/}
474-
475-
* `uid`: The component's uid.
476-
477-
##### Returns {/*react_get_owner_stack_trace-returns*/}
478-
479-
`react_get_owner_stack_trace` returns an object with one property:
480-
481-
* `stack`: A string in the same format as an [`Error` stack](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack). It's empty in production builds.
482-
483-
#### `react_get_component_source` {/*react_get_component_source*/}
484-
485-
Returns where a component is defined.
486-
487-
##### Parameters {/*react_get_component_source-parameters*/}
488-
489-
* `uid`: The component's uid.
490-
491-
##### Returns {/*react_get_component_source-returns*/}
492-
493-
`react_get_component_source` returns an object with one property:
494-
495-
* `source`: An object with the component's `name`, `fileName`, `line`, and `column`. It's `null` for host components and in production builds. The location points at the code the browser loaded, so it may need source maps to map back to your files.
496-
497-
#### `react_start_profiling` {/*react_start_profiling*/}
498-
499-
Starts recording render timing for every commit, like the Profiler tab in React DevTools. Stop recording with [`react_stop_profiling`](#react_stop_profiling).
500-
501-
##### Parameters {/*react_start_profiling-parameters*/}
502-
503-
* **optional** `traceName`: A name for the trace. One is generated if you don't pass it.
504-
505-
##### Returns {/*react_start_profiling-returns*/}
506-
507-
`react_start_profiling` returns an object with these properties:
508-
509-
* `status`: Always `"started"`.
510-
* `traceName`: The name of the trace.
511-
512-
It returns an error if a profiling session is already running.
513-
514-
#### `react_stop_profiling` {/*react_stop_profiling*/}
515-
516-
Stops the running profiling session.
517-
518-
##### Parameters {/*react_stop_profiling-parameters*/}
519-
520-
`react_stop_profiling` takes no parameters.
521-
522-
##### Returns {/*react_stop_profiling-returns*/}
523-
524-
`react_stop_profiling` returns an object with these properties:
525-
526-
* `status`: Always `"stopped"`.
527-
* `traceName`: The name of the trace.
528-
* `commits`: The number of commits recorded.
529-
530-
It returns an error if no profiling session is running.
531-
532-
#### `react_get_trace_overview` {/*react_get_trace_overview*/}
533-
534-
Returns one row per commit in a recorded trace.
535-
536-
##### Parameters {/*react_get_trace_overview-parameters*/}
537-
538-
* `traceName`: The trace to read.
539-
540-
##### Returns {/*react_get_trace_overview-returns*/}
541-
542-
`react_get_trace_overview` returns an array with one entry per commit. Each entry has these properties:
543-
544-
* `commit`: The commit's index, starting from `0`.
545-
* `committedAt`: When the commit happened, in milliseconds since profiling started.
546-
* `renderDuration`: Milliseconds spent rendering components.
547-
* `layoutDuration`: Milliseconds spent in layout effects, like [`useLayoutEffect`](/reference/react/useLayoutEffect).
548-
* `passiveDuration`: Milliseconds spent in passive effects, like [`useEffect`](/reference/react/useEffect).
549-
* `componentsChanged`: The number of components that rendered.
550-
551-
Durations are `null` when the React build doesn't collect profiling timing.
552-
553-
#### `react_get_commit_report` {/*react_get_commit_report*/}
554-
555-
Returns which components rendered in one commit of a recorded trace, and how long each took.
556-
557-
##### Parameters {/*react_get_commit_report-parameters*/}
558-
559-
* `traceName`: The trace to read.
560-
* `commitIndex`: The commit to read, starting from `0`.
561-
562-
##### Returns {/*react_get_commit_report-returns*/}
563-
564-
`react_get_commit_report` returns an object with these properties:
565-
566-
* `committedAt`, `renderDuration`, `layoutDuration`, `passiveDuration`: The same as in [`react_get_trace_overview`](#react_get_trace_overview).
567-
* `priority`: The priority of the update, one of `"Sync"`, `"UserBlocking"`, `"Normal"`, or `"Idle"`.
568-
* `components`: The components that rendered, slowest first. Each component has these properties:
569-
* `uid`, `name`, `type`: The same as in [`react_get_component_tree`](#react_get_component_tree).
570-
* `actualDuration`: Milliseconds spent rendering the component and its children.
571-
* `selfDuration`: Milliseconds spent rendering only the component itself.
572-
573357
---
574358

575359
### `register(target?)` {/*register*/}

0 commit comments

Comments
 (0)