MPX Devtools 是一个为滴滴跨端框架 MPX 开发的开发者工具，提供组件树可视化、数据监控和实时修改等强大功能，大幅提升小程序开发调试体验。
- 📊 组件树可视化 - 实时查看应用的完整组件树结构，清晰展示组件层级关系
- 🔍 智能搜索 - 快速搜索组件数据，精准定位目标组件和状态
- 🔄 数据监控 - 实时监控和修改组件的 data、computed 等状态
- 📍 源码追踪 - 自动追踪组件源文件路径，快速定位问题代码
- 🛠️ 生命周期追踪 - 监控组件的挂载、卸载等生命周期事件
- 🔌 零侵入集成 - 通过 Webpack 插件自动注入，生产环境零侵入
- ⚡ 性能优化 - 高效的实例管理和更新机制，不影响应用性能
小程序开发调试面临诸多挑战：组件层级深难以定位、数据流向不直观、缺乏实时监控能力、编译后代码难以追踪源码。MPX Devtools 提供可视化组件树、实时数据监控和源码追踪，让调试更高效。
使用 npm 或 yarn 安装：
npm install mpx-devtools --save-dev或
yarn add mpx-devtools -D在你的 mpx.config.js 中添加以下配置：
const MpxDevtoolsWebpackPlugin = require('mpx-devtools/src/webpack-plugin/index.js')
module.exports = defineConfig({
// ... 其他配置
configureWebpack(config) {
// 建议仅在开发环境启用
if (process.env.NODE_ENV === 'development') {
config.plugins.push(new MpxDevtoolsWebpackPlugin())
}
}
})npm run dev启动项目后，MPX Devtools 会自动注入到你的应用中。你可以通过小程序开发者工具的控制台查看和操作组件树数据。
MPX Devtools 通过以下机制实现零侵入的调试功能：
- Webpack Loader - 自动在
.mpx文件中注入源文件路径信息 - Mixin 注入 - 通过 loader 自动为页面和组件注入生命周期钩子
- 实例管理 - 监听组件的挂载和卸载，维护组件实例集合
- 数据追踪 - 实时收集和更新组件的 data、computed 等状态信息
mpx-devtools/
├── src/ # 源代码目录
│ ├── mpx-devtools.js # 核心监控类，管理组件实例和数据
│ ├── mixin/ # Mixin 文件
│ │ ├── mixin-page.js # 页面生命周期 mixin
│ │ └── mixin-component.js # 组件生命周期 mixin
│ └── webpack-plugin/ # Webpack 插件
│ ├── index.js # 插件入口
│ └── loader/ # Webpack loader
│ └── mpx-devtools-source-loader.js # 源文件路径注入 loader
├── example/ # 示例项目
│ ├── src/ # 示例源码
│ │ ├── pages/ # 示例页面
│ │ └── components/ # 示例组件
│ └── package.json # 示例项目配置
├── assets/ # 资源文件（截图等）
├── package.json # 项目配置
└── README.md # 项目文档
核心监控类，提供以下主要方法：
// 获取当前页面的所有活跃组件实例
mpxDevTools.activeInstances
// 搜索包含指定文本的组件数据
mpxDevTools.search(text)
// 获取当前页面信息
mpxDevTools.currentPageMpxDevToolsInfo
// 组件挂载回调
mpxDevTools.onComponentMounted(instance)
// 组件卸载回调
mpxDevTools.onComponentUnmounted(instance)组件信息类，包含以下属性：
__mpx_file_src__- 组件源文件路径data- 组件 data 数据computed- 组件 computed 数据id- 组件唯一标识- 其他组件相关信息...
目前主要支持：
- ✅ 微信小程序（wx） - 完全支持
计划支持：
- ⏳ 支付宝小程序（ali）
- ⏳ 百度小程序（swan）
- ⏳ 字节跳动小程序（tt）
- ⏳ 钉钉小程序（dd）
查看 example/ 目录中的完整示例项目：
# 进入示例目录
cd example
# 安装依赖
npm install
# 启动示例项目
npm run dev然后使用微信开发者工具打开编译后的 dist/wx 目录即可体验完整功能。
目前插件暂无配置选项，后续版本将支持更多自定义配置。
new MpxDevtoolsWebpackPlugin({
// 未来将支持的配置选项
})欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建你的特性分支 (
git checkout -b feature/AmazingFeature) - 提交你的改动 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启一个 Pull Request
qirong77
- GitHub: @qirong77
如果这个项目对你有帮助，欢迎 star ⭐️
qirong77
如果这个项目对你有帮助，欢迎给它一个 star ⭐️