Debugger Panel

Call stack
  • renderListlist.tsx:42
  • Dashboarddashboard.tsx:14
  • Appapp.tsx:8
About this piece

Debugger Panel

Call stack list with function names, source file and line, and an amber current-frame highlight.

Usage

The import and the props worth knowing about, in one place.

import { Editor43 } from "@/components/beste/piece/editor43";

<Editor43
  title="Call stack"
  frames={[
    {
      "fn": "renderList",
      "file": "list.tsx",
      "line": 42,
      "current": true
    },
    {
      "fn": "Dashboard",
      "file": "dashboard.tsx",
      "line": 14
    },
    {
      "fn": "App",
      "file": "app.tsx",
      "line": 8
    }
  ]}
/>

More Editor pieces

View all Editor
Feature177 Content#feature177
Heading

No tutorials needed.

Description

If you can order food online, you can build a website with Beste.

Content Panel

Side-panel content editor with a header chip row, locale and history pills, and stacked rich-text fields for heading and description.

Outline
  • Dashboard
  • constructor
  • state
  • render
  • computeStats

Outline Panel

Document outline with colored kind tiles for class, function, method, and prop. Depth-indented with an active row.

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
// Ship it

Code Window

Theme-adaptive editor window with traffic-light header, filename, and a tokenized code body.

1// TODO migrate to server components
2// FIXME handles null state poorly
3// NOTE revisit once design lock lands

TODO Comment

Italic comment lines with colored TODO, FIXME, NOTE, or HACK tags.

1const user = createUser(name: "AyÅŸe", role: "admin");
nameinlay parameter hints

Inlay Hints

Function call with muted parameter-name chips inlaid before each argument.

Dashboardrender()if (isReady)
    // hidden lines…
    const ready = useReady();
    if (!ready) return null;

Sticky Header

Scope breadcrumb pinned above a code snippet, showing the current class, method, and block.