pi-browser-debug
通过Chrome DevTools协议调试浏览器会话的Pi扩展
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：pi-browser-debug。 它的用途是：通过Chrome DevTools协议调试浏览器会话的Pi扩展 完整的 Skill 内容见：https://321skill.com/skills/pi-browser-debug/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“连接到本地的9222端口，检查当前页面中所有失败的网络请求。”，它会通过pi-browser-debug扩展与你的浏览器通信，获取并列出请求详情。接着你可以说：“在控制台执行这段代码，获取所有图片的加载时间。”，它便会执行并返回结果。
介绍
Pi-browser-debug是一个专为AI助手Pi设计的浏览器调试扩展，它解决了开发者在AI对话环境中难以直接对正在运行的浏览器会话进行深度调试的问题。通过集成Chrome DevTools Protocol，该扩展允许Pi直接与浏览器实例通信，执行如检查元素、获取网络请求、运行JavaScript脚本等操作，从而将AI的辅助能力无缝融入前端调试工作流。
使用该扩展时，你需要在本地运行一个支持Chrome DevTools Protocol的浏览器实例（如Chrome/Edge的远程调试模式），并通过配置告知Pi如何连接到它。之后，你便可以在与Pi的对话中，直接请求其检查页面结构、捕获网络性能数据或模拟用户交互，Pi会通过该扩展向浏览器发送指令并返回结果。
它非常适合前端开发工程师、测试工程师以及任何需要频繁进行网页调试和问题排查的技术人员。尤其是在探索性测试、复现复杂Bug或进行自动化脚本原型设计时，能显著提升效率。
使用建议方面，请确保你的浏览器已启用远程调试（通常通过--remote-debugging-port启动参数），并注意网络安全，避免将调试端口暴露在公共网络。由于依赖具体的浏览器协议版本，建议在使用前确认Pi-browser-debug与你的浏览器版本兼容性。
核心特点
与仅能提供代码建议或模拟浏览器行为的通用AI技能不同，pi-browser-debug的核心在于建立了Pi与真实、活动浏览器实例的直接控制通道，允许执行实时的、协议级的调试操作，而非基于静态代码的分析。
注意事项
不适合用于生产环境监控或需要无头浏览器进行大规模自动化测试的场景。
常见问题
如何启动Chrome的远程调试？
通过命令行启动Chrome，例如：`chrome --remote-debugging-port=9222`。
Pi能通过这个扩展操作任何网页吗？
只能操作通过指定调试端口启动的浏览器实例中打开的页面。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/pi-browser-debug/raw/index.md 读取 pi-browser-debug 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/pi-browser-debug/raw/index.md（查看排版版本）