一键在 Manus 中运行任何 Skill

weapp-devtools

星标21

分支1

更新时间2026年4月11日 16:00

用于调试微信小程序的自动化工具集，基于 miniprogram-automator 封装，提供截图、元素检查、页面导航、网络 Mock 等功能。Use when working with WeChat Mini Programs for: (1) Debugging UI with screenshots and element inspection, (2) Automating interactions like clicks, input, and swipes, (3) Navigating between pages and tabs, (4) Mocking network requests, (5) Reading console logs and errors.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

LSTM-Kirigaya

LSTM-Kirigaya/jinhui-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

WeApp DevTools

用于调试微信小程序的自动化工具集，基于 miniprogram-automator 封装，提供截图、元素检查、页面导航、网络 Mock 等功能。

快速开始

第一步：检查环境

# 检查是否安装了 mrc (miniprogram-remote-control)
mrc --version

# 检查微信开发者工具是否在 9420 端口运行
lsof -i :9420

第二步：启动开发者工具自动化

⚠️ 重要：不同系统 CLI 路径不同，请根据你的系统选择正确的命令：

macOS：

/Applications/wechatwebdevtools.app/Contents/MacOS/cli auto \
  --project /path/to/miniprogram \
  --auto-port 9420

Windows：

"C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat" auto ^
  --project C:\path\to\miniprogram ^
  --auto-port 9420

📖 详细路径说明请参考 setup/SETUP.md 的【微信开发者工具 CLI 路径】章节

或 GUI 方式： 微信开发者工具 → 菜单栏 → 工具 → 自动化

第三步：基础调试

# 截图查看当前页面（推荐保存到 screenshots 文件夹）
mrc screenshot ./screenshots/weapp/debug.png --port 9420

# 获取当前页面信息
mrc where --port 9420

# 获取系统信息
mrc sysinfo --port 9420

📚 完整功能目录

以下功能按类别组织，点击链接查看详细用法。

🔧 初始化配置

新项目的必要配置 - 如果这是你第一次使用 WeApp DevTools，请先看这里。

包含：

安装 miniprogram-remote-control
启动开发者工具自动化服务
项目路径配置
端口配置

🔌 连接管理

管理与微信开发者工具的连接。

常用命令：

# 测试连接
mrc where --port 9420

# 检查连接状态
lsof -i :9420

🎯 UI 自动化

核心调试功能：截图、元素检查、点击、输入、滑动等。

功能列表：

📸 页面截图
🔍 元素存在检查
👆 点击/长按/双击元素
⌨️ 输入文本
🎨 获取元素样式
⏱️ 等待元素
📜 JavaScript 执行

🧭 页面导航

管理小程序页面跳转和导航。

功能列表：

Tab 页面切换
页面返回
重启到指定页面
获取页面栈信息

🌐 网络操作

网络请求拦截和 Mock。

功能列表：

Mock 网络请求
移除 Mock
清除所有 Mock

📝 日志分析

读取小程序运行时日志。

功能列表：

读取控制台日志
读取错误日志
读取警告日志

典型调试工作流

场景 1：检查 UI 问题

# 1. 截图看当前状态
mrc screenshot ./screenshots/weapp/issue.png --port 9420

# 2. 检查关键元素是否存在
mrc exists view --port 9420
mrc exists button --port 9420

# 3. 查看控制台日志
mrc logs error 20 --port 9420

场景 2：测试表单交互

# 1. 先截图确认初始状态
mrc screenshot ./screenshots/weapp/before.png --port 9420

# 2. 检查输入框是否存在
mrc exists textarea --port 9420

# 3. 输入文本
mrc type textarea "测试内容" --port 9420

# 4. 截图看结果
mrc screenshot ./screenshots/weapp/after.png --port 9420

场景 3：测试页面导航

# 1. 切换到 Tab 页面
mrc switchTab /pages/community/index --port 9420

# 2. 点击某个元素
mrc click view --port 9420

# 3. 查看页面栈
mrc stack --port 9420

# 4. 返回上一页
mrc back --port 9420

故障排除

问题	可能原因	解决方案
`Connection refused`	开发者工具未启动自动化	查看初始化配置
`Failed to connect`	端口被占用或错误	检查 `lsof -i :9420`，更换端口
`Element not found`	选择器错误或元素未加载	先截图确认，使用 `wait` 等待
`Screenshot timeout`	文件路径权限问题	使用相对路径或检查目录权限
命令无响应	WebSocket 连接断开	重新启动开发者工具自动化

参考

Usage Examples

Example 1

User: 请帮我启动微信小程序开发者工具自动化，截图查看当前页面，并检查是否有控制台报错。

AI: 我将根据你的请求，使用本 Skill 中的工具和调试流程来帮助你完成任务。

Example 2

User: 我想测试小程序的页面导航功能，帮我切换到社区 Tab，点击一个元素后查看页面栈信息。

AI: 我将根据你的请求，使用本 Skill 中的工具和调试流程来帮助你完成任务。

同仓库更多 Skills

同仓库

read-arxiv-paper

LSTM-Kirigaya/jinhui-skills

读取 arxiv 论文的 LaTeX 源码并生成结构化中文摘要或中文博客 JSON。当用户给出 arxiv URL（如 https://arxiv.org/abs/2601.07372）并要求阅读、总结、提炼论文观点时，使用默认工作流生成 ./knowledge/summary_{tag}.md；当用户要求生成中文博客、输出 JSON、保留图表并输出到测试工作区时，启用 read-paper 工作流。

2026-07-0321

zhihu-oauth

LSTM-Kirigaya/jinhui-skills

知乎 OAuth 2.0 接入指南。用于帮助开发者完成知乎 Authorization Code 授权流程，包括 APP_ID/APP_KEY 申请、授权页跳转、Token 换取、用户信息获取及社交关系接口调用。适用于 Web 应用第三方登录场景。

2026-06-3021

admin-console-blueprint

LSTM-Kirigaya/jinhui-skills

Use when you need to design, scaffold, refactor, or document a medium-sized admin console built as an independent Vite/React SPA backed by modular Go admin APIs, Cookie session auth, and CLI-provisioned administrator accounts. Helpful for tasks like planning a new admin console, extracting reusable architecture from an existing console, adding `/api/admin/*` modules, or converting a one-off internal page into a structured admin system.

2026-06-2121

rn-app-builder

LSTM-Kirigaya/jinhui-skills

基于真实项目沉淀的 React Native 移动端 App 一键构建方案。覆盖 Expo 初始化、monorepo 共享包、鉴权路由、API 适配、主题系统与构建发布。

2026-06-2021

lark-markdown

LSTM-Kirigaya/jinhui-skills

Build and send Feishu (Lark) interactive rich-text cards using lark_md format. Use when the user needs to: (1) construct Feishu card messages with markdown support, (2) send interactive cards via the Feishu Bot API, (3) format text with bold, inline code, lists, tables, or code blocks inside Feishu cards, or (4) convert markdown content into Feishu card elements.

2026-06-2021

tencent-ses-service

LSTM-Kirigaya/jinhui-skills

腾讯云官方的邮件推送 SES 服务使用 skill。涵盖：SMTP 发送邮件所需的全部环境变量、API 接口设计规范、验证码邮件的完整发送流程（含人机验证、频率控制、Redis 存储）。本 skill 以网络协议 / HTTP API 接口级别描述，不绑定具体编程语言。

2026-06-2021

name	weapp-devtools
description	用于调试微信小程序的自动化工具集，基于 miniprogram-automator 封装，提供截图、元素检查、页面导航、网络 Mock 等功能。Use when working with WeChat Mini Programs for: (1) Debugging UI with screenshots and element inspection, (2) Automating interactions like clicks, input, and swipes, (3) Navigating between pages and tabs, (4) Mocking network requests, (5) Reading console logs and errors.
tags	["微信小程序","小程序","调试","自动化"]
model	deepseek-chat
rootUrl	https://raw.githubusercontent.com/LSTM-Kirigaya/jinhui-skills/refs/heads/main/skills/weapp-devtools/SKILL.md

WeApp DevTools

用于调试微信小程序的自动化工具集，基于 miniprogram-automator 封装，提供截图、元素检查、页面导航、网络 Mock 等功能。

快速开始

第一步：检查环境

# 检查是否安装了 mrc (miniprogram-remote-control)
mrc --version

# 检查微信开发者工具是否在 9420 端口运行
lsof -i :9420

第二步：启动开发者工具自动化

⚠️ 重要：不同系统 CLI 路径不同，请根据你的系统选择正确的命令：

macOS：

/Applications/wechatwebdevtools.app/Contents/MacOS/cli auto \
  --project /path/to/miniprogram \
  --auto-port 9420

Windows：

"C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat" auto ^
  --project C:\path\to\miniprogram ^
  --auto-port 9420

📖 详细路径说明请参考 setup/SETUP.md 的【微信开发者工具 CLI 路径】章节

或 GUI 方式： 微信开发者工具 → 菜单栏 → 工具 → 自动化

第三步：基础调试

# 截图查看当前页面（推荐保存到 screenshots 文件夹）
mrc screenshot ./screenshots/weapp/debug.png --port 9420

# 获取当前页面信息
mrc where --port 9420

# 获取系统信息
mrc sysinfo --port 9420

📚 完整功能目录

以下功能按类别组织，点击链接查看详细用法。

🔧 初始化配置

新项目的必要配置 - 如果这是你第一次使用 WeApp DevTools，请先看这里。

包含：

安装 miniprogram-remote-control
启动开发者工具自动化服务
项目路径配置
端口配置

🔌 连接管理

管理与微信开发者工具的连接。

常用命令：

# 测试连接
mrc where --port 9420

# 检查连接状态
lsof -i :9420

🎯 UI 自动化

核心调试功能：截图、元素检查、点击、输入、滑动等。

功能列表：

📸 页面截图
🔍 元素存在检查
👆 点击/长按/双击元素
⌨️ 输入文本
🎨 获取元素样式
⏱️ 等待元素
📜 JavaScript 执行

🧭 页面导航

管理小程序页面跳转和导航。

功能列表：

Tab 页面切换
页面返回
重启到指定页面
获取页面栈信息

🌐 网络操作

网络请求拦截和 Mock。

功能列表：

Mock 网络请求
移除 Mock
清除所有 Mock

📝 日志分析

读取小程序运行时日志。

功能列表：

读取控制台日志
读取错误日志
读取警告日志

典型调试工作流

场景 1：检查 UI 问题

# 1. 截图看当前状态
mrc screenshot ./screenshots/weapp/issue.png --port 9420

# 2. 检查关键元素是否存在
mrc exists view --port 9420
mrc exists button --port 9420

# 3. 查看控制台日志
mrc logs error 20 --port 9420

场景 2：测试表单交互

# 1. 先截图确认初始状态
mrc screenshot ./screenshots/weapp/before.png --port 9420

# 2. 检查输入框是否存在
mrc exists textarea --port 9420

# 3. 输入文本
mrc type textarea "测试内容" --port 9420

# 4. 截图看结果
mrc screenshot ./screenshots/weapp/after.png --port 9420

场景 3：测试页面导航

# 1. 切换到 Tab 页面
mrc switchTab /pages/community/index --port 9420

# 2. 点击某个元素
mrc click view --port 9420

# 3. 查看页面栈
mrc stack --port 9420

# 4. 返回上一页
mrc back --port 9420

故障排除

问题	可能原因	解决方案
`Connection refused`	开发者工具未启动自动化	查看初始化配置
`Failed to connect`	端口被占用或错误	检查 `lsof -i :9420`，更换端口
`Element not found`	选择器错误或元素未加载	先截图确认，使用 `wait` 等待
`Screenshot timeout`	文件路径权限问题	使用相对路径或检查目录权限
命令无响应	WebSocket 连接断开	重新启动开发者工具自动化

参考

Usage Examples

Example 1

User: 请帮我启动微信小程序开发者工具自动化，截图查看当前页面，并检查是否有控制台报错。

AI: 我将根据你的请求，使用本 Skill 中的工具和调试流程来帮助你完成任务。

Example 2

User: 我想测试小程序的页面导航功能，帮我切换到社区 Tab，点击一个元素后查看页面栈信息。

AI: 我将根据你的请求，使用本 Skill 中的工具和调试流程来帮助你完成任务。