pi-to-chrome
极简Chrome调试工具，6个动作集成于一个工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：pi-to-chrome。 它的用途是：极简Chrome调试工具，6个动作集成于一个工具 完整的 Skill 内容见：https://321skill.com/skills/pi-to-chrome/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我查找页面中#header的CSS样式来源，并显示对应的样式表文件和行号。'，它会调用chrome_inspect工具的trace_css动作，追踪到具体的CSS文件、行号和选择器，并返回完整路径。
介绍
这个Skill解决了Chrome调试中工具臃肿、Token消耗高的问题。在实际开发中，开发者经常需要在浏览器中查找元素、追踪CSS来源、查看DOM树结构、检查布局、读取控制台日志或执行JavaScript，但现有的Playwright等MCP集成体积庞大、功能冗余，90%的功能用不上且消耗大量Token。
使用方式很简单，你只需要安装后运行/chrome-start启动本地Chrome（或连接已运行的实例），即可通过自然语言调用chrome_inspect工具的6个动作。例如，说“帮我找到页面中‘提交订单’按钮的DOM路径”会触发find_elements，“追踪这个奇怪样式的来源”会调用trace_css定位到具体样式表文件和行号。如果需要远程控制，只需在Mac上运行两个Shell脚本建立SSH隧道，然后在服务器上执行/chrome-start --remote即可。
它非常适合需要频繁调试网页前端、排查布局问题、分析CSS污染的前端开发者或全栈工程师。尤其是那些已经使用Pi作为AI编码助手，但苦于Chrome集成工具过于笨重、Token成本过高的团队或个人。对于需要轻量且精准的浏览器控制场景，这是理想选择。
建议在开发调试流程中统一使用此工具，避免混用多个重量级工具导致上下文混乱。需要注意的是，它主要支持Chrome浏览器，且本地使用最为便捷；远程使用需提前配置SSH隧道和Chrome远程调试端口。另外，工具仅聚焦于6个最常用的调试动作，不涵盖截图、录制等高级功能。
常见问题
能否远程控制另一台电脑上的Chrome？
可以，在Mac上运行start-chrome.sh和start-tunnel.sh建立SSH反向隧道，然后在服务器上执行/chrome-start --remote即可连接。
安装需要什么前置条件？
需要已安装Pi（pi.dev），以及支持DevTools协议的Chrome浏览器。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/pi-to-chrome/raw/index.md 读取 pi-to-chrome 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/pi-to-chrome/raw/index.md（查看排版版本）