UniDevTools – UniApp调试工具

不知道大家是否和我一样已经受够了使用Uniapp开发APP时需要插USB线连着HbuilderX才能看到console打印，各项指标数据全是黑盒，开发APP时无法选择调试节点等各类头疼问题。Uniapp官方一直没有一个标准的调试工具，为什么不能像Chrome调试工具一样调试App呢？为此我们开发了一个插件，把这些痛点问题依次解决！

UniDevTools是一个UniApp工具库，包含console打印日志、request请求记录、storage缓存管理、vuex状态管理、框架报错记录、文件管理等多功能调试工具合集:

• Tools 常用工具(重启、请求构建、跳转指定页面、注入VConsole、Eruda)、自定义工具页
• Error 全局报错拦截：vue模板报错、uniapp框架报错
• Console 打印日志记录
• Network request请求记录、重发请求
• JsRunner 执行js代码、支持App和H5端
• Storage 缓存管理，支持localStorage、cookie、sessionStorage
• Pages 路由页面管理、日活时间记录
• Vuex 状态管理,支持Vuex、Pinia、globalData
• Logs 框架运行日志、框架api调用日志、自定义上报的日志记录
• Info 当前设备参数、App启动参数、运行时信息、权限列表
• UniBus uni框架事件总线调用记录
• FileSys 本地文件管理系统
• Setting DevTools工具设置、清空全部缓存、导出全部日志

本工具支持在生产环境中使用
生产环境使用时建议隐藏调试浮窗，可设置通过特定方法进入调试页

下载运行本示例项目使用说明：

注意该项目使用Cli模式搭建，请勿导入HBuilderX中运行
开始前请先准备好环境：node18 + pnpm

1. 克隆项目到本地:

   git clone https://github.com/1615958039/UniDevTools.git

2. 进入项目

   cd ./UniDevTools

3. 安装依赖

   pnpm i

4. 启动预览H5

   pnpm run dev:h5

说明：示例基于UniApp+Vue3+ts+Vite，UI框架为TM-UI3.1

把调试工具引入自己项目：

1. 下载最新源码包v3.5.0
   

   GitHub: releases
   Gitee: releases
   备用：v3.5.0_r.zip

2. 引入项目(请移步至在线文档)：https://dev.api0.cn/guide/install

示例项目

《斗图助手APP》表情包制作工具
该项目基于Uniapp+Vue2，已集成DevTools工具
打开APP后在搜索页输入 __devtools__ 即可打开调试弹窗查看请求和日志数据

苹果AppStore

安卓应用宝

微信小程序

H5