最近开发手机移动端拍照、多图上传，OCR识别、连拍等功能
都需要用到手机的物理硬件（定位、相机、相册、麦克风），调试就需要在真机环境中实现。
真机环境调试起来就非常的不方便，例如：
- 无法看到日志信息
- 无法实时调试（每次都要打包到线上才可测试） 下面教程提供一下移动端的调试方法，仅供学习交流。
一、打开vConsole工具
"vconsole": "^3.15.0"
在index.html script脚本中加入如下代码
new VConsole()
现在打开移动端会发现多了一个
点开后，可以看到一些console日志和network
到此其实通过console也就能调试一些问题了。
实用小妙招
受启发与手机的debug调试模式，点10次版本号，打开调试模式。 所以在项目的生产环境中，也可以通过监听某个事件，点击10次打开vConsole，神不知鬼不觉。
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
let clickCount = 0;
let lastClickTime = 0;
window.addEventListener('touchstart', handleTouchStart);
function handleTouchStart() {
const currentTime = new Date().getTime();
const timeDiff = currentTime - lastClickTime;
if (timeDiff < 300) { // 300毫秒内算作快速点击
clickCount++;
if (clickCount === 10) {
// 执行你的操作
console.log('快速点击10次');
new VConsole()
// 重置点击次数
clickCount = 0;
}
} else {
clickCount = 1;
}
lastClickTime = currentTime;
}
但是！！！
总不能一个console.log，上传一次代码，看一次问题。那效率太低了。所以需要使用到网络代理工具Charles，仅供学习交流！仅供学习交流！
二、使用代理工具Charles转发
如果想实时调试手机环境，可以使用Charles拦截手机请求，再转发到本地。
打开后找到设置界面，里面端口设置为8888
然后手机端设置
设置后，手机中打开一个网站或APP，可以看看你的Charles是否捕捉到了网络请求。
捕获后，可以慢慢研究一下你的手机天天都发出去一些什么网络请求👍
回归正题，那现在已经监听到手机发出的网络请求后，如何能够转到本机的电脑起的相关服务呢。
这里就需要再在Charles设置了
工具 - 远程映射 - 打开如下窗口
我这里设置了87.ek.ztccloudxxxx转发给我的主机10.20.0.150:7777端口
到此设置就已经大功告成，可以在手机上刷新一下试试看是不是能直接监听到你的手机发出的所有网络请求，如果涉及到87.ek就会再转回给你的电脑，这样你在电脑上改一行代码，手机上就实时刷新了。
类似于你在PC端Chrome打开了移动端一样，可以做到修改一行，真机上可以实时刷新。
如果遇到什么问题，欢迎随时联系我。
互相交流学些，如果你觉得文章对你有帮助，麻烦给个👍 谢谢❤️
三、其他反馈
有些人可能在想为什么搞得这么麻烦，直接浏览器访问主体ip不就行了嘛。
那是因为有很多api要求在企业微信、微信、钉钉等特殊环境生效。
Charles汉化版 www.aliyundrive.com/s/GeVbFfvZY… 点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线。
