mtop-devtools-socket

SKILL.md

---
name: mtop-devtools-socket
description: 'Use when/适用于以下三个场景：1) 需要登录态的请求 —— 复用浏览器已登录的 Cookie/签名调用接口（mtop/http 请求）；2) 操作浏览器 —— 打开/切换/关闭标签页、点击、输入、滚动、按键、导航、上传文件、执行 JS、截图、页面快照等；3) 调试页面 —— 获取页面请求/控制台日志/埋点事件、查看与设置 mock、添加请求规则（重定向/改请求头）、获取 API schema、查看选中元素信息。通过 CDP 或本地 socket 调用 Mtop DevTools 能力。'
argument-hint: '<action> [--payload <json> | --payload-file <path>] [--output <path>]'
---

# Mtop DevTools Socket 技能

## 📦 前置条件

本技能支持两种连接模式，满足其中**任意一种**即可：

### 模式一：浏览器插件（推荐，功能最完整）

安装 [Mtop DevTools 浏览器插件](https://mtop-devtools.io.alibaba-inc.com/)，打开 Chrome DevTools 应能看到 `Mtop` 标签页。

### 模式二：Chrome CDP 直连（无需插件，Chrome 145+）

无需安装浏览器插件：
1. 打开 Chrome，访问 `chrome://inspect/#remote-debugging`
2. 勾选 "Discover network targets"（Chrome 会弹出授权提示，点击允许）
3. Chrome 会自动写入 `DevToolsActivePort` 文件，native host 读取该文件自动连接

## 🚀 快速开始

安装完成并连接 Chrome 后即可直接调用：

```bash
mtop-devtools get_requests --payload '{"count": 5}'
mtop-devtools get_logs --payload '{"limit": 10}'
mtop-devtools get_screenshot --output ./screenshot.png
```

如命令不可用或连接失败，参考 [socket 故障排查](./references/troubleshooting.md)。

## 🔄 更新 Skill

如果本地安装的 skill 内容过旧，重新获取并按照安装引导覆盖安装即可：

https://mtop-devtools.io.alibaba-inc.com/skill-setup.txt

## 🎯 意图识别与支持的操作

根据用户的描述，选择对应的操作和参数：

### API 调试

| 用户说的话（示例） | 操作 | 说明 |
|---|---|---|
| 获取最近的请求、看下刚才发了什么 | `get_requests` | 获取请求，默认返回 panel 当前模式（mtop 或普通请求） |
| 获取 mtop 接口请求 | `get_requests` + `source: "mtop"` | 强制获取 mtop 接口 |
| 获取普通 HTTP 请求（xhr/fetch） | `get_requests` + `source: "requests"` | 强制获取非 mtop 请求 |
| 看下控制台日志、报了什么错 | `get_logs` | 获取浏览器控制台日志 |
| 看下埋点数据、RUM 事件、aplus 上报了什么 | `get_events` | 获取 RUM/aplus 埋点事件 |
| 获取接口 schema、接口出入参是什么 | `get_api_schema` | 获取 API 接口 schema，可选择返回 schema、hsf 或全部 |

### Mock & 请求规则

| 用户说的话（示例） | 操作 | 说明 |
|---|---|---|
| mock 掉某个接口、让接口返回 xxx | `set_mock` | 设置 API mock 数据 |
| 查看当前有哪些 mock | `get_mocks` | 查看当前生效的 mock |
| 添加请求规则、重定向请求、修改请求头、拦截请求 | `add_rule` | 添加 Chrome declarativeNetRequest 规则 |

### 网络请求代理

| 用户说的话（示例） | 操作 | 说明 |
|---|---|---|
| 调用某个接口、带上 Cookie 发一个 HTTP 请求 | `proxy_request` | 代理请求，自动携带浏览器 Cookie |
| 调用某个 mtop 接口、发一个 mtop 请求 | `send_mtop_request` | 在页面上下文中发起 mtop 请求，自动处理签名和 token |
| 申请域名权限、授权某个域名（`proxy_request` 报 `Cookie access not authorized` / `Permission denied` 时） | `request_domain_permission` | 弹窗让用户授权指定域名（host permission），授权后 `proxy_request` 才能携带该域名 Cookie |

### 浏览器操作

| 用户说的话（示例） | 操作 | 说明 |
|---|---|---|
| 打开一个页面、新建标签页 | `tab_open` | 在浏览器中打开新 Tab 并等待加载完成 |
| 关闭标签页 | `tab_close` | 关闭指定 tabId 的标签页 |
| 列出所有标签页、看下打开了哪些页面 | `tab_list` | 获取当前窗口所有标签页列表 |
| 点击按钮、点击元素、点一下某个东西 | `page_click` | 点击页面元素，支持 JS 点击和 CDP 真实鼠标点击 |
| 输入文字、填写表单、在输入框里输入 | `page_type` | 向输入框填写文本，兼容 React 受控组件 |
| 滚动页面、翻到底部、往下翻 | `page_scroll` | 滚动页面，支持 up/down/top/bottom 四个方向 |
| 悬停、鼠标移上去、鼠标放元素上 | `page_hover` | 将鼠标悬停在元素上，触发 hover 效果（如下拉菜单、提示信息） |
| 执行 JS、在页面上运行脚本 | `page_eval` | 在页面上下文中执行任意 JavaScript 表达式 |
| 按键、按回车、按 Tab | `page_press` | 在页面中按下键盘按键（Enter/Tab/Escape 等） |
| 等待页面加载、等元素出现 | `page_wait` | 等待指定时间或等待某个元素出现 |
| 在当前标签页导航、跳转页面 | `page_navigate` | 在当前标签页内导航到新 URL |
| 上传文件、选择文件、文件上传 | `page_upload` | 向 `<input type="file">` 元素上传本地文件 |

### 移动端模拟

| 用户说的话（示例） | 操作 | 说明 |
|---|---|---|
| 切到 iPhone / Android 模拟、调试 H5 移动页面、模拟手机视口 | `set_device_emulation` + `enabled: true, preset: "iphone-15-pro"` | 把目标 tab 切换为移动端模拟态（视口/UA/触摸），等价 DevTools 设备工具栏，作用域 per-tab。启用后默认 reload 让页面以移动模式重新初始化 |
| 关闭移动模拟、恢复桌面视图 | `set_device_emulation` + `enabled: false` | 清除当前 tab 的移动端模拟，回到桌面态 |

### 页面感知

| 用户说的话（示例） | 操作 | 说明 |
|---|---|---|
| 获取页面结构、看下页面上有什么元素、页面快照 | `page_snapshot` | 获取页面无障碍树快照，返回所有可交互元素的结构化文本 |
| 截图、获取当前页面截图、看一下页面长什么样 | `get_screenshot`，保存文件时加 `--output <path>` | 获取当前浏览器标签页的页面截图；未指定 `--output` 时返回 base64，指定后保存到本地文件 |
| 截图某个元素、只截这个组件的图、看一下这个区域 | `get_screenshot` + `selector: "<css>"` | 对指定 CSS 选择器匹配的元素截图（类似 DevTools "Capture node screenshot"） |
| 获取选中元素、看一下这个元素的布局/样式、分析元素 | `get_selected_element` | 获取 Elements 面板当前选中元素的详细信息；指定 `--output <path>` 时自动截图并保存到本地文件 |

### 用户信息

| 用户说的话（示例） | 操作 | 说明 |
|---|---|---|
| 获取用户工号、获取当前登录用户 ID | `get_user_info` | 默认只返回工号（userId） |
| 获取用户详细信息、获取用户信息、看下用户资料 | `get_user_info` + `detail: true` | 返回完整的用户信息（姓名、花名、部门、BU 等） |

## 📚 参考文档

- [使用示例](./references/examples.md)（各操作的完整 CLI 调用示例）
- [API 参数详细说明](./references/api-reference.md)（set_mock / proxy_request / get_requests / get_events / get_screenshot / get_selected_element 完整参数表及响应结构）
- [socket 故障排查](./references/troubleshooting.md)