Debugger Panel

About this piece

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
    }
  ]}
  bordered={false}
/>

More Editor pieces

View all Editor

Feature177 Content

Heading

No tutorials needed.

Description

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

Dashboard
state
render
computeStats

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

1const user = createUser(name: "Nils", role: "admin");

Dashboardrender()if (isReady)

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

greet.ts

1export function greet(name: string) {
2  return `Hello, ${name}!`;
3}
4 
5// Ship it