Module: core/debug
This module provides helper functions for debugging AI.JSX applications.
Functions
DebugTree
▸ DebugTree(props, «destructured»): AsyncGenerator<string, Node[], unknown>
Render a tree of JSX elements as a string, yielding each step of the rendering process.
Most devs will not need to use this directly, and should use showInspector instead.
Example
<DebugTree>
<MyComponent />
</DebugTree>
==>
Frame 0: <DebugTree><MyComponent /></DebugTree>
Frame 1: <DebugTree>the text my component resolved to</DebugTree>
Parameters
| Name | Type |
|---|---|
props | Object |
props.children | Node |
«destructured» | RenderContext |
Returns
AsyncGenerator<string, Node[], unknown>
Defined in
packages/ai-jsx/src/core/debug.tsx:190
debugRepresentation
▸ debugRepresentation(fn): Object
Creates props that associate a debug representation with an element.
Usage example:
<InvisibleComponent {...debugRepresentation((e) => e.props.children)}>
<Foo>1</Foo>
</InvisibleComponent>
When the <InvisibleComponent> would be displayed in a DebugTree, it will be replaced
with its children.
Parameters
| Name | Type |
|---|---|
fn | (element: Element<any>) => unknown |
Returns
Object
| Name | Type |
|---|---|
[debugRepresentationSymbol] | (element: Element<any>) => unknown |