Debug

GitHub

通过注入fetch调用向本地HTTP服务器发送结构化日志,支持创建通道、构造URL、注入带区域标记的调试代码、读取JSONL日志及自动清理。

apps/browser/bundled/skills/debug/SKILL.md mereyabdenbekuly-ctrl/clodex-ide

触发场景

需要深入调试应用状态或执行流程 需监控特定组件渲染或副作用触发

安装

npx skills add mereyabdenbekuly-ctrl/clodex-ide --skill Debug -g -y
更多选项

非标准路径

npx skills add https://github.com/mereyabdenbekuly-ctrl/clodex-ide/tree/main/apps/browser/bundled/skills/debug -g -y

不安装直接使用

npx skills use mereyabdenbekuly-ctrl/clodex-ide@Debug

指定 Agent (Claude Code)

npx skills add mereyabdenbekuly-ctrl/clodex-ide --skill Debug -a claude-code -g -y

安装 repo 全部 skill

npx skills add mereyabdenbekuly-ctrl/clodex-ide --all -g -y

预览 repo 内 skill

npx skills add mereyabdenbekuly-ctrl/clodex-ide --list

SKILL.md

Frontmatter
{
    "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.

Prerequisites

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.

Protocol

1. Create a log channel

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.

2. Construct the ingest URL

http://127.0.0.1:{port}/ingest/{channel-name}?token={token}

Example: http://127.0.0.1:54321/ingest/react-renders?token=abc-123

3. Inject instrumentation code

Wrap all injected debug code in region markers for easy identification and removal:

// #region @clodex-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 @clodex-debug

Rules:

  • Always wrap in // #region @clodex-debug / // #endregion @clodex-debug.
  • Always .catch(() => {}) — instrumentation must never break user code.
  • Keep payloads small. The source field distinguishes instrumentation points.

4. POST body schema

{
  "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.

5. Read logs

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.

6. Env-change notifications

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

7. Size limits

  • 64 KB max per POST body. Split large payloads.
  • 2 MB max per log file. The server returns 409 when full.

When a file is full: read and analyze the data, then truncate with write('logs/{name}.jsonl', '') and continue.

8. Cleanup (mandatory)

When debugging is complete, always perform both steps:

  1. Remove instrumentation — delete all // #region @clodex-debug// #endregion @clodex-debug blocks from user code.
  2. Delete log filesdelete('logs/{name}.jsonl') for every channel you created.

Never leave debug instrumentation or log files behind.

Notes

  • Browser-side code: The ingest server handles CORS (Access-Control-Allow-Origin: *). fetch() works from any origin.
  • Node.js server code: fetch() works directly to 127.0.0.1.
  • Write buffering: Entries are buffered and flushed every 500ms or 50 entries. There may be a short delay before new entries appear in the file.

版本历史

  • 0f01f5b 当前 2026-07-19 09:03

同 Skill 集合

apps/browser/bundled/plugins/figma/SKILL.md
apps/browser/bundled/plugins/github/SKILL.md
apps/browser/bundled/plugins/javascript-sandbox/SKILL.md
apps/browser/bundled/plugins/mini-apps/SKILL.md
apps/browser/bundled/plugins/open-code-review/SKILL.md
apps/browser/bundled/plugins/openmanus/SKILL.md
apps/browser/bundled/plugins/posthog/SKILL.md
apps/browser/bundled/plugins/remotion/SKILL.md
apps/browser/bundled/plugins/supabase/SKILL.md
apps/browser/bundled/plugins/vercel/SKILL.md
apps/browser/bundled/skills/learn-skill/SKILL.md
apps/browser/bundled/skills/plan/SKILL.md
apps/browser/bundled/skills/preview/SKILL.md
apps/browser/bundled/skills/implement/SKILL.md

元信息

文件数
0
版本
ac87edc
Hash
e007c6da
收录时间
2026-07-19 09:03

首页 - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-07-22 15:29
浙ICP备14020137号-1 $访客地图$