使用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 頁面的方法，希望能幫助到你