MPX Devtools 是一个为滴滴跨端框架 MPX 开发的开发者工具，它可以帮助开发者可视化查看和修改组件树的数据。

在小程序开发过程中，作者经常会遇到以下几个痛点问题：

• 各平台小程序开发者工具限制
  • 热更新不稳定，经常出现更新失败
  • 编译速度慢，影响开发效率
  • 开发工具启动耗时长
  • 调试工具响应迟缓

• 组件树层级深，难以快速定位问题组件
• 数据流向不直观，难以追踪状态变化
• 缺乏实时的数据监控和修改能力
• 跨端编译后的代码难以追踪源码位置

• 接手复杂项目时，难以快速理解组件结构
• 组件间的数据流动和依赖关系不清晰
• 缺乏统一的调试工具，跨团队协作效率低
• 项目重构时缺乏可视化辅助工具

MPX Devtools 正是为解决这些问题而生

• 📊 组件树可视化：实时查看应用的组件树结构
• 🔄 数据监控：实时监控和修改组件的数据状态
• 🛠️ 开发调试：提供便捷的开发调试工具
• 🔌 Webpack 插件支持：通过 Webpack 插件轻松集成，在生产模式 0 侵入

使用 npm 安装：

npm install mpx-devtools --save-dev

在你的 mpx.config.js 中添加以下配置：

const MpxDevtoolsWebpackPlugin = require('mpx-devtools/src/webpack-plugin/index.js')

module.exports = defineConfig({
  // ... 其他配置
  configureWebpack(config) {
    const isDev = true // 开发环境下集成
    if(isDev) {
        config.plugins.push(new MpxDevtoolsWebpackPlugin())
    }
  }
})

├── src/                    # 源代码目录
│   ├── components/        # 组件目录
│   ├── mixin/            # 混入文件
│   └── webpack-plugin/   # Webpack 插件实现
├── example/               # 示例项目
└── assets/               # 资源文件

• 微信小程序（wx）
• 支付宝小程序（ali）
• 百度小程序（swan）
• 字节跳动小程序（tt）
• 钉钉小程序（dd）

1. 安装并配置 MPX Devtools
2. 启动你的 MPX 项目
3. 打开对应平台的开发者工具
4. 使用 MPX Devtools 进行调试

欢迎提交 issue 和 Pull Request，一起完善 MPX Devtools。

ISC License

• MPX 框架
• 问题反馈
• 项目主页

qirong77

如果这个项目对你有帮助，欢迎给它一个 star ⭐️