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;
      }