使用Chrome开发者工具调试Android端内网页(微信，QQ，UC，App内嵌页等)

前言

移动端页面调试一直是好多朋友头疼的问题，iOS 因为其封闭的特性和总体较高的性能，总体适配相对好作，调试也因为 safari 的打通变得很方便。而 Android 系统，尤为是国内环境下的 Android 系统，因为版本跨度大，且各家厂商采用自研内核，使得其成为移动端页面问题出现的主要平台。工程师们采用了各类各样的方式来对其进行调试：alert 大法，页面引入或注入VConsole/eruda开启移动端控制台，Fiddler / Charles / Whistle抓包，Weinre......，各类解决方式层出不穷，但随着国内厂商积极的更新内核和旧版本Android机型的逐渐淘汰，在当前节点下，咱们只须要作一点微小的工做，就可使用咱们最熟悉的 Chrome 开发者工具对移动端页面进行调试。

这篇文章主要讲述使用 Chrome 开发者工具调试 Android 终端内的各类 webview 环境下页面的方法，主要包含如下环境：

• Chrome 等基于原生 Chromium 内核的浏览器
  
• 微信、QQ、QQ 浏览器等 X5 内核webview
  
• UC 浏览器等 U4 以上内核 Webview
  
• App 内嵌 Webview
  
• 系统浏览器
  

若是你已经分别知道以上每种环境中开启 Inspect 调试的方法，这篇文章对你来讲意义不大，能够选择关闭。但若是以上有你不知道如何开启 Inspect 调试的环境甚至你不知道 Chrome 的 Inspect 调试，能够继续往下看，应该会对你以后的调试工做有所帮助，Let's do it！

开启 Chrome 浏览器 Inspect 调试

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

而后打开手机中开发者选项并打开 USB 调试开关（具体方法自行百度，不一样手机有必定区别），使用数据线将手机链接到电脑上，咱们就能够在设备列表中看到本身的设备。

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

此时咱们点击 inspect 选项

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

点击左上角箭头，而后手指点击手机屏幕你要选择的区域，便可完成选取指定元素操做，其他的操做都和在 PC 上彻底同样。

若是你以前没有使用过这种调试方式，你应该会感到相比以前的调试方式更加方便快捷

问题来了，Chrome 手机浏览器在国内市场份额很是少，咱们的页面主要出现的地方也是微信，QQ，UC浏览器或者 App 内嵌等等，针对这些环境，如何开启 inspect 调试？下面咱们逐一讨论。

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

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

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

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

UC 浏览器等 U4 以上内核 Webview

针对U4及以上内核，咱们访问 plus.ucweb.com/download/，即可下载中文版及国际版 UC 浏览器的对应开发版

而后咱们在 UC 开发版中打开要调试的页面，和上面同样，咱们也能够在列表中看到 UC 浏览器打开的页面并对其进行调试

App 内嵌 Webview

不少团队会采用 Hybrid 模式开发业务，针对 App 内嵌页面，咱们须要 Android 同事协助打开 Webview 调试，具体方法为，

webView.setWebContentsDebuggingEnabled(true);复制代码

每一个 webview 组件实例须要单独设置，开启后即可进行 inspect 调试

系统自带浏览器

针对 MIUI 自带浏览器（MIUI为例），咱们须要刷入开发版系统，而后系统自带浏览器即可以经过 inspect 进行调试

以上就是在使用 Chrome 开发者工具调试 Android 端各类环境 Web 页面的方法，但愿能帮助到你

若是文章对你有帮助，欢迎关注个人微信公众号（骄尔），不按期更新踩坑笔记，好用的工具和有趣的思想，谢谢！