一、真机调试
二、Vconsole
VConsole是一个专门为移动端开发设计的调试工具库，提供了许多有用的功能，如日志打印、页面性能指标监控、AJAX 拦截等，可以方便地在移动端上进行调试。
以下是在vue项目中使用 VConsole 的步骤：
- 安装 VConsole
npm install vconsole
- 在项目的main.js文件中引入 VConsole
// 引入 Vconsole
import VConsole from 'vconsole';
// 所有环境均使用
const vConsole = new VConsole();
Vue.use(vConsole);
- 移动端的右下角就会出现绿色的
vconsole标识，如下图：
三、使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
以Charles为例：
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHOsts！软件给Mac电脑配Hosts
- 手机访问开发环境页面 注：默认情况下，Charles软件无法抓取到https的请求，需要安装证书。
常用代理工具：
下面以Charles为例进行说明基本功能：
在Mac电脑上打开Charles：
可以做远程代理，把我们页面相关的资源代理到远程某一个地址，如下图：
四、常用开发调试技巧
线上即时修改———Overrides：这个技巧非常实用。正常情况下，我们在控制台对相应的元素进行样式修改时，因为现在项目普遍都有热更新，如果刷新或者代码改动，都会导致控制台上的调试被刷新。
这时候最需要的就是将控制台上的修改进行保留，如果调试完成，可以直接对照控制台将本地代码进行更改。方法如下：
