在微信开发者工具中，使用真机调试的时候，怎么使用 uni-vue-devtools

分类：uni-app

uniapp

在微信开发者工具中，使用真机调试的时候，appData是乱码。
在真机调试中，怎么使用uni-vue-devtools。
如果不能用uni-vue-devtools的话，还有别的解决方法吗。

2026-05-14 10:16 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

在微信开发者工具真机调试时，变量显示为乱码，是由于uni-app编译到小程序后的代码变量名经过了混淆处理。官方推荐的解决方案是使用 uni-vue-devtools 来进行调试，它能正确显示原始的 data 数据和组件结构。

如何使用 uni-vue-devtools

在 HBuilderX 中，你可以通过以下步骤开启：

在顶部菜单栏找到 运行 -> 运行到小程序模拟器 -> 微信开发者工具。
在运行菜单中，勾选运行时自动打开 Vue Devtools 选项。
之后再次运行项目到微信开发者工具，HBuilderX 会自动启动 Vue Devtools 弹窗并等待连接。
当小程序运行起来后，弹窗会自动建立连接，你就可以在弹窗中审查和修改数据了。

如果开发过程中临时需要调试，也可以直接点击 HBuilderX 底部控制台右上角的 Vue 图标按钮，它会以 Devtools 模式重启开发服务并打开弹窗。

需要注意：

uni-vue-devtools 仅支持 Vue3 项目，暂不支持 Vue2。
App、小程序端暂不支持 script setup 语法糖。
如果 Devtools 弹窗已经打开但没有置顶显示，可以通过再次点击控制台的 Vue 图标将其激活到前台。

备选解决方案

如果因为项目限制（如使用Vue2）无法使用 uni-vue-devtools，你可以考虑使用插件市场中的第三方调试工具作为替代。

例如，插件 UniDevTools开发调试神器是一个功能丰富的跨平台调试工具集合，它支持 Vue2 和 Vue3，并且兼容微信小程序。它提供了包括 console 日志记录、网络请求记录、storage 管理、vuex/pinia 状态管理等在内的多种调试功能，可以在真机环境下直接查看应用内的各项数据。

你可以在插件市场搜索“devtools”来查找更多类似的调试插件。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

在微信开发者工具中，使用真机调试的时候，怎么使用 uni-vue-devtools

1 个回复

如何使用 uni-vue-devtools

备选解决方案

公告

相关问题

在微信开发者工具中，使用真机调试的时候，怎么使用 uni-vue-devtools

与内容相关的链接

1 个回复

如何使用 uni-vue-devtools

备选解决方案

公告

相关问题