利用 Chrome 開發人員工具遠端偵錯 Android 中的原生 WebView

標籤：==   rto   csdn   water   comment   調試   pre   int   通過   

之前寫過一篇關於 Android Studio 斷點調試技巧 的文章，但都是針對 Native 代碼的調試，對於 Hybrid 開發模式下的 WebView 卻無從下手。幸運的是，PC 中的 Chrome 瀏覽器提供的開發人員工具能夠協助我們遠端偵錯 Android 中的 WebView 載入的網頁。

Android 4.4 (KitKat) 開始，使用 Chrome 開發人員工具可以協助我們在原生 Android 應用中遠端偵錯 WebView 網頁內容。一起來看看怎麼操作吧。

第一步，設定 WebView 偵錯模式。WebView 類包含一個公用靜態方法，作為 Debug 開關：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    WebView.setWebContentsDebuggingEnabled(true);}

注意：這個方法相容至 Android 4.4 及更高版本，並且只需設定一次，便可應用於項目中的所有 WebView，同時不受 Manifest 檔案中 debuggable 屬性的影響。

第二步，確保 USB 串連的前提下，開啟 PC 中的 Chrome 瀏覽器，輸入網址，開啟頁面：

chrome://inspect

DevTools 頁面的 Devices 菜單頁自動顯示當前串連的遠程裝置名稱和序號，以及當前原生 App 開啟的 WebView 的網頁地址，

點擊對應網頁下方的 inspect 選項便可以進入開發人員工具頁：

，網頁顯示內容和原始碼、控制台等都可以看到，供安卓開發人員自由調試。

事實上，Chrome 開發人員工具也是 H5 開發人員開發手機端網頁的調試利器。

開啟 PC 中 Chrome 瀏覽器的開發人員工具頁面：設定 -> 更多工具 -> 開發人員工具，或者直接在 Chrome 瀏覽器的任意網頁上右鍵選擇 檢查。在開發人員工具按照方式中開啟 Remote devices ：

同樣，確保 PC 通過 USB 串連手機裝置的前提下，檢查開啟 Remote devices 頁面左側 Settings 菜單中的 Discover USB devices 選項：

開啟手機的 Chrome 瀏覽器 App，在 Remote devices 中選擇對應的手機裝置，便可以看到當前 Chrome App 的版本資訊，以及一個 URL 輸入框：

在此，我們可以輸入任意的 Url 地址，點擊 Open，便可同步開啟手機 Chrome 上的網頁，同時在 Remote devices 出現對應的地址欄，點擊即可進入前面介紹 WebView 時所看到的類似調試頁。

更多有關 Chrome DevTools 的細節，請參考連結：Chrome DevTools for Mobile: Screencast and Emulation。

關於我：亦楓，部落格地址：http://yifeng.studio/，新浪微博：IT亦楓

掃描二維碼，歡迎關注我的個人公眾號：安卓筆記俠

不僅分享我的原創技術文章，還有程式員的職場遐想

利用 Chrome 開發人員工具遠端偵錯 Android 中的原生 WebView