# UniDevTools - UniApp调试工具

><b>在线文档 - 完整版使用教程:<br>
><a href="https://dev.api0.cn" target="_blank">https://dev.api0.cn</a>

----

不知道大家是否和我一样已经受够了使用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工具设置、清空全部缓存、导出全部日志

兼容框架：
| Vue2+js+vuex | Vue3+ts+vuex(pinia)|
| -- | -- |
| √ | √ |

兼容平台：
| H5 | APP |  微信小程序 | APP-NVUE  |  其他小程序 |  UniAppX |
| -- | -- | -- | -- | -- | -- |
| √| √ | √ | √(大部分功能支持) | 未测试 | × (待办中) |

><b>本工具支持在<span style="color: red;">生产环境</span>中使用</b><br>
><span style="font-size: 13px;">生产环境使用时建议隐藏调试浮窗，可设置通过特定方法进入调试页</span>






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

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

1. 克隆项目到本地:
```cmd
git clone https://github.com/1615958039/UniDevTools.git
```
2. 进入项目
```cmd
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](https://github.com/1615958039/UniDevTools/releases) <br>
  >Gitee: [releases](https://gitee.com/t1zf/UniAppDevTools/releases/) <br>
  >备用：[v3.5.0_r.zip](https://dev.api0.cn/releases/v3.5.0_r.zip)
1. 引入项目(请移步至在线文档)：[https://dev.api0.cn/guide/install](https://dev.api0.cn/guide/install)

----





### 示例项目
>《斗图助手APP》表情包制作工具<br>
>该项目基于Uniapp+Vue2，已集成DevTools工具<br>
>打开APP后在搜索页输入` __devtools__ `即可打开调试弹窗查看请求和日志数据
<div class="qrCodeList" style="display: flex;flex-direction: row; align-items: center;gap: 30px;flex-wrap: wrap;">
  <div class="codeItem">
    <img src="https://dev.api0.cn/qrCode/iosAppStore.png" style="width: 160px;height: 160px;">
    <div class="codeTitle">苹果AppStore</div>
  </div>
  <br><br><br>
  <div class="codeItem">
    <img src="https://dev.api0.cn/qrCode/androidYYB.png" style="width: 160px;height: 160px;">
    <div class="codeTitle">安卓应用宝</div>
  </div>
  <br><br><br>
  <div class="codeItem">
    <img src="https://dev.api0.cn/qrCode/wxmp.jpg" style="width: 160px;height: 160px;">
    <div class="codeTitle">微信小程序</div>
  </div>
  <br><br><br>
  <div class="codeItem">
    <img src="https://dev.api0.cn/qrCode/web.png" style="width: 160px;height: 160px;">
    <div class="codeTitle">H5</div>
  </div>
</div>