vue移动端真机调试方法

最近开发手机移动端拍照、多图上传，OCR识别、连拍等功能

都需要用到手机的物理硬件（定位、相机、相册、麦克风），调试就需要在真机环境中实现。

真机环境调试起来就非常的不方便，例如：

1、无法看到日志信息

2、无法实时调试（每次都要打包到线上才可测试）

下面教程提供一下移动端的调试方法，仅供学习交流。

一、vConsole工具

一个轻量、可拓展、针对手机网页的前端开发者调试面板。
vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。
现在 vConsole 是微信小程序的官方调试工具。

功能特性

• 日志(Logs)： console.log|info|error|…
• 网络(Network)： XMLHttpRequest, Fetch, sendBeacon
• 节点(Element)： HTML 节点树
• 存储(Storage)： Cookies, LocalStorage,SessionStorage
• 手动执行 JS 命令行
• 自定义插件

上手

方法一：使用npm（推荐）

$ npm i vconsole

我安装的版本号

 "vconsole": "^3.15.0"

可参考下方的截图红框部分。

import 并初始化后，即可使用console.log 功能，如 Chrome devtools 上一样

import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用配置参数来初始化，详情见文档
const vConsole = new VConsole({ theme: 'dark' });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后，可移除掉
vConsole.destroy();

方法二：使用 CDN 直接插入到 HTML

然后在vue项目中

在index.html script脚本中加入如下代码

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
	new VConsole()
</script>

可用的 CDN：

• https://unpkg.com/vconsole@latest/dist/vconsole.min.js
• https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

现在打开移动端会发现多了一个

点开后，可以看到一些console日志和network

到此其实通过console也就能调试一些问题了。

但是！！！

总不能一个console.log，上传一次代码，看一次问题。那效率太低了。所以需要使用到网络代理工具Charles，仅供学习交流！仅供学习交流！

实用小妙招

受启发与手机的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;
      }

二、使用代理工具Charles转发

如果想实时调试手机环境，可以使用Charles拦截手机请求，再转发到本地。

打开后找到设置界面，里面端口设置为8888

然后手机端设置

设置后，手机中打开一个网站或APP，可以看看你的Charles是否捕捉到了网络请求。

捕获后，可以慢慢研究一下你的手机天天都发出去一些什么网络请求👍

回归正题，那现在已经监听到手机发出的网络请求后，如何能够转到本机的电脑起的相关服务呢。

这里就需要再在Charles设置了

工具 - 远程映射 - 打开如下窗口

我这里设置了87.ek.ztccloudxxxx转发给我的主机10.20.0.150:7777端口

到此设置就已经大功告成，可以在手机上刷新一下试试看是不是能直接监听到你的手机发出的所有网络请求，如果涉及到87.ek就会再转回给你的电脑，这样你在电脑上改一行代码，手机上就实时刷新了。

类似于你在PC端Chrome打开了移动端一样，可以做到修改一行，真机上可以实时刷新。

如果遇到什么问题，欢迎随时联系我。互相交流学些，如果你觉得文章对你有帮助

麻烦给个👍 谢谢❤️

有些人可能在想为什么搞得这么麻烦，直接浏览器访问主体ip不就行了嘛。那是因为有很多api要求在企业微信、微信、钉钉等特殊环境生效。

Charles汉化版
https://www.aliyundrive.com/s/GeVbFfvZYai

比较复杂，但是真的很好用的调试方法参考如下文档
https://www.cnblogs.com/terrylin/p/4606277.html