前言
移动端页面调试一直是好多行内朋友们头疼的问题。
ios系统由于其封闭性质的系统以及良好的性能表现，整体的适配相对简单，即使有问题safari和mac的互联做的也非常好，可以链接数据线直接在safari浏览器中调试出开发者工具。
android系统则不一致，尤其是国内安卓系统移动设备厂商居多，都采用自主研发的内核。使的其成为了移动端页面频繁出现问题的平台。
前端开发者们也使用了很多的方式去调试移动端页面，比如：
- alert()对象
- 页面引入vConsole/eruda打开移动端控制台
- Fiddler / Charles / adb 抓包工具抓包分析
各种方式层出不穷，随着国内的厂商们积极更新内核以及逐步淘汰低版本的内核，使得调试移动端页面变得容易起来。
这篇文章主要讲述使用 Chrome 开发者工具调试 Android 终端H5页面的方式，会逐步实现如下：
- Chrome 等基于原生 Chromium 内核的浏览器
- 微信、QQ、QQ浏览器等 X5 内核webview
- UC 浏览器等 U4 以上内核 Webview
- App 内嵌 Webview
- 系统浏览器
本篇文章会介绍 Chrome 等基于原生 Chromium 内核的浏览器
开启 Chrome 浏览器 Inspect 调试
1、在 Chrome 浏览器地址栏中输入 chrome://inspect/#devices 并回车，就可以打开 Inspect 调试界面，此时我们勾选 Discover USB devices 选项便可以看到设备列表
2、然后打开手机中开发者选项并打开 USB 调试开关（具体方法自行百度，不同手机有一定区别），使用数据线将手机连接到电脑上，我们就可以在设备列表中看到自己的设备。
3、这时，如果你手机上安装了 Chrome 浏览器的话，随便打开一个网址（以掘金为例），设备列表中你的设备下便会出现你打开的页面。
4、此时我们点击 inspect 选项
接下来你就可以像平时调试pc端页面的方式调试移动端页面。
写到这里，未完待续......
