前言
現在原生app中混合web頁面這種方式用的場景越來越多，app的原生代碼很容易使用android studio進行debug調試，web頁面在Chrome瀏覽器中F12打開開發者工具，也非常方便調試web頁面。但是嵌入在app中的web頁面如何調試代碼呢？
使用混合開發WebView調試必備神器DevTools。
使用DevTools進行調試
準備工作
1.設置Webview調試模式
可以在Activity的init進行如下設置，WebView類包含一個公共靜態方法，可應用於項目中的所有WebView，同時不受Manifest文件中的debuggable屬性影響。(Android版本應該在Android 4.4（KitKat）或更高版本上)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
2.首先Android手機需要打開開發者模式，並允許USB調試。將手機與電腦相連。
3.打開Chrome瀏覽器，在地址欄輸入 chrome://inspect , 此時手機上會收到授權，點擊允許.如果（可能沒有如果）你的電腦無法訪問 developers.google ，那麼你需要先想辦法連上一下（hosts、牆或vpn），因爲需要自動下載手機的驅動。
4.可以了,在Devices列表中可以看到連接的手機。手機上打開要調試的頁面，在Chrome中點擊相應頁面鏈接，即打開調試器。
調試中的效果
調試中跟Chrome中調試web頁面類似
調試WebView白屏
1.原因:
由於無法訪問 https://chrome-devtools-frontend.appspot.com，只能出現空白頁面
2.嘗試解決方案：
修改本地Host文件: 在C:\Windows\System32\drivers\etc\hosts文件中添加以下語句：
61.91.161.217 chrome-devtools-frontend.appspot.com
61.91.161.217 chrometophone.appspot.com
此方案不一定可以解決問題,必須要ping通 chrometophone.appspot.com纔可以。
3.通過其他方式能夠訪問 chrometophone.appspot.com即可
然後刷新chrome://inspect界面