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

若是文章對你有幫助，歡迎關注個人微信公衆號（驕爾），不按期更新踩坑筆記，好用的工具和有趣的思想，謝謝！