移动端手机调试的方法

原博地址

参考博客

移动端调试困难

很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视化的界面。不似在PC端，我们能直观的去改变样式，或者是进行断点调试。有时，在移动端我们不得不借助于alert来调试，但是这样的调试方法效率极其低下，很多时候，都是靠经验，或者是靠排除法。甚至，我们不得不归结为是浏览器的实现问题。

解决策略

这里主要介绍三种方法

（1）chrome真机调试

（2）X5 内核环境下，我们访问 debugx5.qq.com/ 进行调试（只适用于安卓手机）

（3）苹果手机解决方案

（4）利用vconsole进行调试

1.开启 Chrome 浏览器 Inspect 调试

在 Chrome 浏览器地址栏中输入 chrome://inspect/#devices 并回车，就可以打开 Inspect 调试界面，此时我们勾选 Discover USB devices 选项便可以看到设备列表。

然后打开手机中开发者选项并打开 USB 调试开关（具体方法自行百度，不同手机有一定区别），使用数据线将手机连接到电脑上，我们就可以在设备列表中看到自己的设备。

这时，如果你手机上安装了 Chrome 浏览器的话，随便打开一个网址（以掘金为例），设备列表中你的设备下便会出现你打开的页面。

此时我们点击 inspect 选项

看到这个熟悉的界面了吗？接下来你便可以和调试 PC 界面一样通过 Chrome 进行你所需要的调试，你在左侧屏幕上做的一切操作和你的手机上的操作会始终保持同步，如果你嫌左边这块多余，也可以关闭 Toggle Screencast 只保留控制台本身。

点击左上角箭头，然后手指点击手机屏幕你要选择的区域，即可完成选取指定元素操作，其余的操作都和在 PC 上完全一样。

除了Chrome 浏览器，在手机的其他场景下怎么调试看效果呢。如微信，QQ，UC浏览器或者 App 内嵌，参考以下方法（只适用于安卓）：

2.微信、QQ、QQ浏览器等 X5 内核 Webview

X5 内核环境下，我们访问 debugx5.qq.com/

在这个页面中我们可以对 X5 内核进行配置（如非必要不建议改动配置），我们选择信息Tab并勾选“打开TBS内核Inspector调试功能”和“打开TBS内核X5jscore Inspector调试功能”两个选项，完成后重启页面生效

然后 inspect 页面就会自动刷新列表，这时我们就能对微信及 QQ 等 X5 内核 Webview 进行调试

3.苹果手机解决方案：

极大限制：苹果手机只能用苹果手机中的Safari浏览器对苹果电脑上的Safari浏览器进行调试。
1.打开手机端web检查器，设置 -> Safari -> 高级（最底部） -> Web 检查器打开
2.苹果手机通过usb线连接上苹果电脑，没错一定要苹果电脑！
3.找到Mac电脑的Safari浏览器，找到开发者，就会显示的手机的设备;可参考
4.此时此刻就可以使用了，调试各个App上网页版的页面了。

4.vconsole在手机端进行调试；

1.下载

2.找到 dist/vconsole.min.js，在页面中引入

<head>
<script src="dist/vconsole.min.js"></script>
</head>

<script>
// 初始化
var vConsole = new VConsole();//这里一定要初始化，不然页面中没有vConsole 的按钮，打开不了控制台
console.log('VConsole is cool');
</script>

出现vConsole按钮，证明可以正常使用了

请注意，VConsole 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，vConsole 不会被插入到网页中