Uniapp —— app编译调试_uniapp调试工具

最近也是需要用到uniapp写APP，遇上的第一个难题便是调试问题，在网上搜罗很久也是始终找不到比较好的办法，要不是文章太旧，要不是试过不行。本篇文章也算是寻找解决方案之后的总结。

背景

写习惯web项目、H5项目、还是说小程序的朋友，都清楚各类的调试方式。F12检查，微信开发者工具的操作台等，都有现成好用的调试办法。但是在uniapp转译app后调试则变得十分困难，对于app中使用到的nvue文件对css样式有特殊要求，调试更是显得重中之重。

现阶段使用的调试方式

我们都知道跑项目，编译app后需要一个app基座，这个app基座可以是真机，也可以是模拟器，就像你的web、H5项目跑在浏览器一样。坑放到最后面说。

模拟器

我自己使用的是网易的mumu模拟器12。
HBuilderX版本是3.8.7。
下载模拟器后打开，点击模拟器右上角三条横线的图标，将模拟器设置成竖屏手机，尺寸自己选。

保存设置，等待模拟器重启。重启后到模拟器中的 设置 ➡ 关于手机 ➡ 连点版本号进入开发者模式。（注意这个设置是手机模拟器的 “齿轮” 图标，不是右上角mumu模拟器的整体设置）。

打开HbuilderX，打开项目，点击顶部工具栏 运行 ➡ 运行到手机或模拟器 ➡ ADB路径设置，进入到Settings.json，配置adb路径和模拟器端口。
mumu模拟器对应端口就是 7555，其他模拟器端口可以去uniapp官方看，模拟器的端口也可修改，具体可以查阅一下其他文章。
adb路径就需要看你自己 HbuilderX 的安装位置，到adb.exe所在目录。

设置好将模拟器和HBuilderX都重启。

PS:：ADB是Andorid调试桥，在HBuilderX中下载真机运行插件(运行 ➡ 运行到手机或模拟器 ➡ 下载真机运行插件)会帮你装上，并配置环境变量，十分重要。

ctrl + R回车输入cmd打开命令行，可以先输入adb确定一下adb是否在环境变量中，得到输出各种adb命令的介绍说明adb已经在环境变量中了，不需要自己加。输入adb connect 127.0.0.1:7555，将HBuilderX和模拟器连接起来，下面是连接成功的输出。

这时到HBuilderX工具栏 运行 ➡ 运行到手机或模拟器 ➡ 运行到Android app基座，刷新，可以看到 ⬇

点击运行就可以将项目跑到模拟器中了。
项目跑起来后，点击操作台右上角工具栏最左边的昆虫图标，就可以进入调试了，不过这东西…，坑有点多（最后说），但目前来说是比较好的解决办法了。

真机

使用真机其实就是将app基座换成你的手机，调试工具还是上面介绍的调试方式。
步骤：

1. 电脑手机连上数据线
2. 手机 设置 ➡ 关于手机 ➡ 连点系统版本号进入开发者模式
3. 回到设置，找到开发人员选项，我的手机在系统更新里面，不同手机位置可能不同 ➡ 开启USB调试 ➡ 连接USB配置改为多媒体传输（MTP）
4. 电脑 ctrl + R回车打开命令行，输入adb start-server开启adb服务
5. HBuilderX 运行 ➡ 运行到手机或模拟器 ➡ 运行到Android app基座，刷新，可以看到一个字母 + 数字的基座ID可以选择（我看到的是字母 + 数字），选中运行即可运行在真机。

坑

坑要另开一个小节聊聊，可见无论是从连接还是调试上，折磨的地方还是比较多的。

连接方面

就拿模拟器调试来说，在输入命令adb connect 127.0.0.1:7555建立连接后，关闭模拟器或关闭HBuilderX
HBuilderX就找不到app基座了，尽管adb服务还在进程当中。也就是说，你每次断网，开关IDE，模拟器，电脑，都需要重新建立连接，adb进程开启中，还不能直接adb connect会提示adb运行中，需要先结束进程，再开启。下面是断网，断开连接的报错。

这里给几条常用的命令 ⬇

HBuilderX 连接 MuMu模拟器 ➡ adb connect 127.0.0.1:7555
查看adb端口进程（adb默认端口5037）➡ netstat -ano | findstr "5037"
根据PID结束进程，按上一个命令找到的PID结束adb进程 ➡ taskkill -PID PID号 -F

调试方面

一
上面介绍的调试方式已经是官方推荐的了。这种调试方式只能调试nvue页面或组件，在调试界面选中vue组件，模拟器里面的程序会闪退。

二
只能调试一些主要页面，举个例子，某个页面有个按钮，点击出现弹窗，这个弹窗你是调试不了的，只能调试主要页面原有的东西。

文章有问题之处还望评论斧正！