with one click
debug
Use logging calls for in-depth debugging via local log files
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Menu
Use logging calls for in-depth debugging via local log files
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Use when adding a new LLM/model to stagewise model catalogs, provider routing, validation, docs, or showcase UI.
Complete guide for the Figma plugin — REST API access, real-time selection monitoring via CDP, and the figma-app interactive UI. Read this IMMEDIATELY when the user asks to work with Figma.
Best practices for using the stagewise built-in JavaScript sandbox. Explains how to access APIs for browser debugging/interaction, use external dependencies, file system access, running mini-apps, etc.
Guide for building custom interactive web apps ("mini apps") displayed in browser tabs — scaffolding, iframe constraints, bidirectional messaging with the sandbox, and iteration workflows.
Create an interactive design-preview in a browser tab
How stagewise's agent history compression pipeline works — boundary selection, recency bias, chained compressions, and the SQLite-backed test harness for replaying real compressions in LLM playgrounds. Use when debugging, tuning, or extending history compression, when investigating context-window overflow, or when the user wants to probe compression quality against real chat histories.
Based on SOC occupation classification
| name | Debug |
| description | Use logging calls for in-depth debugging via local log files |
| user-invocable | true |
| agent-invocable | true |
Inject fetch() logging calls into user code that send structured data to a local HTTP ingest server. Log entries accumulate in JSONL files you can read for analysis.
The env-snapshot includes a logIngest field once the ingest server is running:
logIngest: { port: <number>, token: "<uuid>" }
If logIngest is null, the server has not started yet — wait for an env-change.
Use write to create an empty JSONL file. The channel name must be kebab-case ([a-z0-9]+(-[a-z0-9]+)*).
write('logs/react-renders.jsonl', '')
This registers the channel. You will receive a log-channel-created env-change.
http://127.0.0.1:{port}/ingest/{channel-name}?token={token}
Example: http://127.0.0.1:54321/ingest/react-renders?token=abc-123
Wrap all injected debug code in region markers for easy identification and removal:
// #region @stagewise-debug
fetch('http://127.0.0.1:54321/ingest/react-renders?token=abc-123', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
level: 'info',
source: 'useEffect-mount',
data: { component: 'App', props: { userId: 42 } }
})
}).catch(() => {});
// #endregion @stagewise-debug
Rules:
// #region @stagewise-debug / // #endregion @stagewise-debug..catch(() => {}) — instrumentation must never break user code.source field distinguishes instrumentation points.{
"level": "info" | "warn" | "error" | "debug" | "log",
"source": "descriptive-label",
"data": { ... }
}
Body must be a JSON object. All fields are optional. level defaults to "log". The server prepends a ts field (epoch milliseconds) automatically — do not send your own.
read('logs/react-renders.jsonl')
Each line is a JSON object with a server-injected timestamp: { "ts": 1713000000000, "level": "info", "source": "useEffect-mount", "data": { ... } }.
Use grepSearch with mount_prefix targeting logs for filtered searches.
You receive these for owned log channels only:
| Event | Attributes | Meaning |
|---|---|---|
log-channel-created | channel | New channel file appeared |
log-entries-added | channel, newLines | New lines were appended |
log-channel-removed | channel | Channel file was deleted |
409 when full.When a file is full: read and analyze the data, then truncate with write('logs/{name}.jsonl', '') and continue.
When debugging is complete, always perform both steps:
// #region @stagewise-debug … // #endregion @stagewise-debug blocks from user code.delete('logs/{name}.jsonl') for every channel you created.Never leave debug instrumentation or log files behind.
Access-Control-Allow-Origin: *). fetch() works from any origin.fetch() works directly to 127.0.0.1.