还在手动复制/截图调试日志给AI？安装这个skill，让AI学会自己看

dimples
17 阅读5分钟

本文面向人群： 已经在使用 Claude Code、OpenCode、Cursor 等 AI 编程工具的开发者。如果你正在用这些工具协作开发，希望这篇文章可以帮你提升调试效率。

前言

你有没有经历过这样的场景：

AI 帮你写了一段代码，运行后发现有问题。你打开控制台，截图发给它，或者把一堆日志复制粘贴过去...

「帮我看看这个报错是什么意思」

AI 分析完，给你改了代码。你又运行一遍，又截图，又粘贴...

如此反复，直到问题解决。

这种**"用户操作 → 截图/复制 → 发给AI → AI分析 → 改代码 → 用户再操作"**的循环，费时费力，而且很容易遗漏关键信息。

如果 AI 能自己看日志呢？

传统调试方式的痛点

在和 AI 协作调试时，我们通常会这样做：

用户操作页面/触发代码
↓
打开 DevTools 控制台
↓
截图 OR 复制日志文本
↓
粘贴到 AI 对话框
↓
AI 根据日志分析问题
↓
改完代码后... 重复上述流程

问题明显：

  1. 操作繁琐 - 每次都要手动截图/复制

  2. 信息不完整 - 截图可能漏掉关键上下文，复制可能格式乱

  3. 效率低下 - 一来一回浪费大量时间

  4. 无法实时 - AI 无法看到代码执行的实时状态

有没有更好的方式？

有！ 让 AI 直接读取日志。

核心思路很简单：

AI 在代码中注入日志收集语句
↓
用户操作页面/触发代码
↓
日志自动发送到 HTTP 服务
↓
AI 直接 curl 读取日志并分析
↓
完成！无需用户手动干预

整个过程中，用户只需要：

  1. 说「帮我看看 xxx 问题, 使用dev-log」

  2. 按照提示操作页面

  3. 说「操作完成了」

日志的查看和分析，全部由 AI 自动完成。

dev-log：让 AI 学会自己看日志

dev-log 是一个 AI 编程代理技能，通过 HTTP 服务实时收集运行时日志，让 AI 能够自主获取并分析，无需用户手动复制控制台内容。

安装

npx skills add dimple-smile/agent-skills

工作流程

1. 提出问题 → 「帮我看看 xxx 问题，使用dev-log」
2. 自动埋点 → AI 在关键位置写入日志收集语句
3. 等待操作 → AI 告知「已在关键位置添加日志，请操作」
4. 完成操作 → 用户操作完成后说「我已操作完成」
5. 自动分析 → AI 自行 curl 读取日志，分析问题

整个过程无需截图或复制日志，AI 完全自主完成调试分析。

对比效果

方式操作步骤效率
传统方式在各个文件手动加上log语句 → 操作 → 打开控制台 → 截图/复制 → 粘贴到对话框 → AI分析低
dev-log跟AI说使用dev-log收集日志→-操作 → 说「操作完成」 → AI自动读取分析高

使用场景

dev-log 特别适合以下场景：

  • 调试/验证代码 - 需要查看运行时状态

  • 追踪异步流程 - fetch、Promise、async/await 的执行过程

  • 验证逻辑 - 表单验证、状态更新、条件判断等

  • 查看变量值 - 特别是动态生成或用户输入的值

多语言支持

支持 14 种语言：

平台语言
WebJavaScript, TypeScript
移动端Swift (iOS), Kotlin (Android), Dart (Flutter)
后端Python, Go, PHP, Ruby, Java, Rust, C++, C#, R

无论你用什么语言开发，都能用同一套方案。

实际演示

假设你在调试一个表单提交问题：

传统方式

你: 这个表单提交后没反应，帮我看下
AI: 请打开控制台，截图发给我
你: [发送截图]
AI: 看起来是 validation 返回 false，请再提交一次，把完整的日志发我
你: [再次操作，复制日志]
你: [粘贴一大堆日志文本]
AI: 找到问题了，是 xxx 导致的...

使用 dev-log

你: 使用 dev-log 帮我调试这个表单提交问题
AI: [自动在代码中注入日志]
AI: 已在关键位置添加日志收集，请操作一下表单提交
你: 操作完成了
AI: [自动 curl 读取日志]
AI: 找到问题了，是 validation 返回 false，因为 xxx 字段为空...

用户全程不需要碰控制台。

提示： 在提示词中加上「使用 dev-log」可以更稳定地触发日志收集功能。例如：「使用 dev-log 帮我调试这个问题」。

功能特性

  • 自动启动 HTTP 日志服务 - 随机端口，避免冲突

  • 内网穿透支持 - HTTPS 页面、远程访问也能用

  • 会话隔离 - 多个调试会话互不干扰

  • 多语言模板 - 开箱即用的代码片段

  • 敏感数据过滤 - 自动过滤密码、token 等敏感信息

总结

传统的 AI 协作调试方式，把用户当成了"日志搬运工"。每次调试都要手动复制、截图，效率低下。

dev-log 的核心价值：让 AI 从被动接收日志，变成主动获取日志。

用户只需要关注问题本身，日志的收集和分析交给 AI 来完成。这才是 AI 编程助手日志分析场景应该有的样子。

立即安装体验：

npx skills add dimple-smile/agent-skills

相关链接：

后记： 本文由人类主导原创主要设计思想和行文框架，文案由 AI 辅助生成。

avatar
文章
阅读
粉丝