Skip to main content

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

NameType
propsObject
props.childrenNode
«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

NameType
fn(element: Element<any>) => unknown

Returns

Object

NameType
[debugRepresentationSymbol](element: Element<any>) => unknown

Defined in

packages/ai-jsx/src/core/debug.tsx:29