专项能力 / 前端调试

按快捷键 Alt+Shift+C，在页面上点一个元素，写一句“这里改成什么样”， 回车。chrome-use 会把这句话、元素的源码文件和行号、截图和样式， 通过 ocs 投给正在这个项目里干活的 Claude Code、Codex 或 Pi 会话，由它去改代码。 本地 dev server 和测试环境域名都能用，用的就是你已经登录的 Chrome。

开始使用

1. 装好 chrome-use 和扩展（扩展 0.5.56 及以上、CLI 1.5.213 及以上）。
2. 装 ocs，并在项目目录里开着一个 Claude Code、Codex 或 Pi 会话。没装 ocs 时，面板会给出安装命令，草稿不会丢。
3. 在页面上按 Alt+Shift+C，或点工具栏图标里的 Inspect element。第一次使用会先问你是否启用。快捷键可以在 chrome://extensions/shortcuts 里改。
4. 点元素。Shift+点击或拖一个框可以一次选多个（最多 8 个）；↑/↓ 在父子元素之间切换；P 暂停页面动画，方便选中会动的东西；Esc 退出。
5. 在弹出的面板里写修改要求，每个元素也可以单独写备注，或者在截图上画圈。按 Enter 或 Send 发送；Shift+Enter 换行。

第一次在某个站点发送时，面板会问两件事：这个站点对应哪个项目目录，交给哪个会话。 候选项目来自本地 dev server 的进程目录、ocs 里会话的工作目录，以及哪个项目里真的存在页面标注的源码文件。 选一次就记住，之后同一站点直接发送。绑定可以在扩展设置的 Inspect & Ask 卡片里查看和解除。

源码定位：接入 code-inspector-plugin

元素要显示 文件:行号，项目需要在构建时给 DOM 加上位置标记。chrome-use 读取 code-inspector-plugin 注入的 data-insp-path 属性，支持 Vite、webpack、Rspack、esbuild、Turbopack，React、Vue、Svelte 等都可以。 面板发现页面没有标记时，会列出要改的地方，问你是否让你的 agent 来配置；也可以自己加：

// vite.config.ts
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  plugins: [
    codeInspectorPlugin({ bundler: 'vite', pathType: 'relative' }),
    // ...your other plugins
  ],
});

// webpack.config.js / vue.config.js (configureWebpack)
const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = {
  plugins: [codeInspectorPlugin({ bundler: 'webpack', pathType: 'relative' })],
};

没有接插件时也能用：React 18 及以下的开发构建会读组件自带的源码位置，Vue 开发构建会读组件文件名； 都读不到时，消息会标明“没有源码位置”，带上选择器和文本，让 agent 自己搜。React 19 已经去掉了组件上的源码位置，所以 React 19 项目建议接插件。

实测 code-inspector-plugin 2.0.9 的构建产物里，标记是绝对路径（测试环境里就是 CI 机器上的路径）。chrome-use 只在你绑定的项目目录里按路径后缀找对应文件，找到的标为“按路径后缀匹配”，找不到的标为未核实，不会去项目目录以外查找。

测试环境

测试环境的页面也能点选，前提是测试构建里保留了位置标记。插件默认只在开发模式生效， 需要给测试构建显式打开。生产构建绝不能打开：开启后，能访问测试环境的人都能在页面里看到源码文件路径。

// Test builds only, never production. DEPLOY_ENV is whatever your CI sets.
const isTestBuild = process.env.DEPLOY_ENV === 'test';

codeInspectorPlugin({
  bundler: 'vite',
  pathType: 'relative',
  dev: () => process.env.NODE_ENV === 'development' || isTestBuild,
  server: isTestBuild ? 'close' : 'open',
});

// index.html of the test build: lets the agent compare revisions
<meta name="chrome-use-revision" content="%GIT_SHA%">

# a production build must contain no source marks
$ grep -rl "data-insp-path" dist/ && echo "FOUND: do not ship" || echo "clean"

测试环境跑的代码可能比你本地分支旧。页面带了 chrome-use-revision 时，消息会附上这个版本号， 并提醒 agent 先核对本地文件，行号只当参考。这个版本号也来自页面，只用来提示，不作为任何授权依据。

发送和状态

面板只显示 ocs 真实返回的结果，存储和唤醒分开说：

完整内容（每个元素的 HTML、样式、截图）写在本机 ~/.chrome-use/inspect/ctx/<id>/，只有你自己能读，7 天后清理（之后只保留批次 ID 和结果，用来保证同一批不会发两次）； ocs 消息里只放摘要和这个文件的路径。没有 ocs 或不想投递时，Copy 会把同样的内容复制成 Markdown； Open in editor 会用 VS Code、Cursor、Windsurf 或 WebStorm 打开对应文件和行。

安全边界

• 只在你按快捷键或点按钮时注入页面，不常驻任何页面，也不会弹出“正在调试此浏览器”的提示条。
• 页面里的文本、HTML、组件名、源码路径都当作不可信数据，在消息里和你写的要求分开标注；它们不能决定投给哪个项目、哪个会话。
• 输入框运行在扩展自己的 iframe 里，页面脚本读不到也改不了你写的内容。它凭一次性密钥向扩展证明身份，页面复制出来的输入框拿不到这个密钥。
• 每次发送前重新检查输入框是否完整可见；被遮挡、半透明或被挪动时不会发送。这只能降低界面欺骗的风险，无法保证完全防住。
• 截图只在页面就是当前可见标签、发送前后页面没变时才附上；否则丢弃截图并说明原因，不会替你切换标签。
• 投递不会提高接收会话原有的权限，也不会替你启动 agent。

和同类工具的区别

code-inspector-plugin 的 AI 模式、React Grab、Agentation、MCP Pointer、Cursor 的 Design Mode 都能“点元素交给 AI”。 它们大多只支持本地 dev server，或者另起一个 agent 进程、经剪贴板或本地 MCP 交付。 Inspect & Ask 用的是你已登录的 Chrome，测试环境也能用；它把请求投给你已经在跑的那个会话，不另开进程，也不放宽权限。

故障排查