本技能支持两种连接模式,满足其中任意一种即可:
安装 Mtop DevTools 浏览器插件,打开 Chrome DevTools 应能看到 Mtop 标签页。
无需安装浏览器插件:
chrome://inspect/#remote-debuggingDevToolsActivePort 文件,native host 读取该文件自动连接安装完成并连接 Chrome 后即可直接调用:
mtop-devtools get_requests --payload '{"count": 5}'
mtop-devtools get_logs --payload '{"limit": 10}'
mtop-devtools get_screenshot --output ./screenshot.png
如命令不可用或连接失败,参考 socket 故障排查。
如果本地安装的 skill 内容过旧,重新获取并按照安装引导覆盖安装即可:
https://mtop-devtools.io.alibaba-inc.com/skill-setup.txt
根据用户的描述,选择对应的操作和参数:
| 用户说的话(示例) | 操作 | 说明 |
|---|---|---|
| --- | --- | --- |
| 获取最近的请求、看下刚才发了什么 | 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 掉某个接口、让接口返回 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 | 点击页面元素。可按 selector / text / point 三选一定位,默认走 CDP 真实事件(移动端 H5 可靠) |
| 输入文字、填写表单、在输入框里输入 | 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 | 向 元素上传本地文件 |
| 用户说的话(示例) | 操作 | 说明 |
|---|---|---|
| --- | --- | --- |
| 滚动后截图、点击然后等待、先滚动再点击再截图、批量操作 | run_actions | 批量顺序执行多个 action,一次调用完成组合流程,减少往返延迟。遇错即停 |
| 用户说的话(示例) | 操作 | 说明 |
|---|---|---|
| --- | --- | --- |
| 切到 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 | 获取当前浏览器标签页的页面截图;未指定 --output 时返回 base64,指定后保存到本地文件 |
| 截图某个元素、只截这个组件的图、看一下这个区域 | get_screenshot + selector: " | 对指定 CSS 选择器匹配的元素截图(类似 DevTools "Capture node screenshot") |
| 获取选中元素、看一下这个元素的布局/样式、分析元素 | get_selected_element | 获取 Elements 面板当前选中元素的详细信息;指定 --output 时自动截图并保存到本地文件 |
| 列出页面所有 frame、看下有哪些 iframe | page_frames | 获取当前页面的 frame 树(主 frame + 所有 iframe),返回 frameId / url / name / isMainFrame |
| 用户说的话(示例) | 操作 | 说明 |
|---|---|---|
| --- | --- | --- |
| 获取用户工号、获取当前登录用户 ID | get_user_info | 默认只返回工号(userId) |
| 获取用户详细信息、获取用户信息、看下用户资料 | get_user_info + detail: true | 返回完整的用户信息(姓名、花名、部门、BU 等) |
| 获取/切换 TDBank 账号、快速借用账号 | tdbank_account | 支持 current/list/switch/borrow,需要浏览器已登录 tdbank.alibaba-inc.com |
共 2 个版本