前言
移動端頁面除錯一直是好多朋友頭疼的問題，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 頁面的方法，希望能幫助到你
如果文章對你有幫助，歡迎關注我的微信公眾號（驕爾），不定期更新踩坑筆記，好用的工具和有趣的思想，謝謝！
