peek-cli：给 AI 编程助手装上"透视眼"

大家好啊，最近 AI 编程助手火得不行，但我相信很多朋友都遇到过一个尴尬的问题——

这玩意儿写代码确实溜，但问题是你让它调 Bug 的时候，它根本看不见你的浏览器里到底发生了什么。说白了，它就是在蒙着眼睛干活。

今天要聊的这个工具 peek-cli，就是来解决这个问题的。

peek-cli 是干嘛的

简单说，peek-cli 是一个开源的命令行工具，由 puffinsoft 开发。它的核心作用就是给 AI 编程助手打开一扇窗户，让它能"看到"你浏览器里的情况。

有了它，AI 助手就能：

• 截屏——看到浏览器现在显示的页面
• 检查 DOM——了解页面的结构
• 监控网络请求——排查接口有没有报错
• 读取控制台——拿到错误日志
• 操作页面元素——比如点个按钮、填个表单

你看，这可不是简简单单截个图就完事了。它让 AI 获得了真正的视觉感知能力，调试、测试、写前端，效率都能上一个台阶。

为什么这事挺重要

传统的 AI 编程助手，套路都差不多——它分析代码、给出建议，但它看不到运行结果。

举个例子，你的 React 组件出问题了，AI 可能根据代码模式猜了几个修复方案，但它根本没法确认哪个方案真管用。

有了 peek-cli，事情就不一样了：

1. AI 帮你启动应用，打开浏览器
2. 截个图，看看现在长什么样
3. 直接发现问题是什么
4. 读取控制台和报错信息
5. 根据实际情况改代码
6. 再截张图验证修复效果

这样就形成了一个完整的反馈闭环，调试效率自然翻倍。

实际用起来什么样

视觉测试自动化

以前写自动化测试，CSS 改了一个地方，得靠人眼去对比效果，一不小心就漏掉问题。

现在可以这样：让 AI 在 CI/CD 流程里跑测试，看到哪个测试挂了，顺手就看看渲染出来的页面长啥样，排查视觉回归 bug 轻松多了。

代码生成更贴合实际

以前让 AI 写新组件，它只能参考你代码库里写好的组件样式。问题是，你代码库里的样式可能跟你实际页面的风格有差异。

现在不一样了——AI 直接打开你的应用，看到真实的 UI 风格，然后生成的代码自然就更匹配了。

调试不用来回描述了

以前遇到问题，你得在 AI 和浏览器之间来回切换，把错误信息复制粘贴给它，累死个人。

现在直接让 AI 自己进来看，它会告诉你："我看到了，这个按钮被 z-index 挡住了，藏在模态框背后了。"

多省事。

怎么上手

官方仓库在 GitHub，支持主流的 AI 编程框架。安装方式很简单：

npm install -g peek-cli
peek-cli --help

运行一下 help 就能看到支持的命令，截图、检查元素、建立连接，都能搞定。

写在最后

说实话，我觉得这代表了一个趋势——以后的 AI 编程工具，不只是帮你读写代码，还得有真正的环境感知能力。

它得看到你看到的，理解真实的使用场景，辅助才能真正靠谱，而不是在那儿瞎猜。

不管你是做自动化测试、开发 AI 增强的 IDE 插件，还是单纯想让调试过程少点糟心事，peek-cli 都值得试试。

你们有没有用过类似的工具？ 感觉 AI 的"视觉能力"有没有真正帮到你？欢迎留言聊聊！