移動端H5調試

背景：
開發PC頁面的時候使用chrome瀏覽器的開發者工具，能夠很容易的捕獲到頁面的dom元素，而且能夠修改樣式，方便調試；
可是手機上卻很麻煩，由於手機上沒有辦法直接打開開發者工具查看元素。其實能夠經過將設備鏈接到PC，使用PC的開發者工具檢測。

1.安卓手機調試工具chrome DevTools
調試步驟
a、須要知足安卓系統版本爲Android 4.4以上，而且須要再你的APP內配置相應的代碼，在WebView類中調用靜態方法setWebContentsDebuggingEnabled，以下：
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
即須要app支持追加代碼打包
b、把Android設備設置爲開發者模式，把手機USB調試模式打開(「設置」->」開發人員選項」->」USB調試」) 
c、用USB數據線將電腦和手機鏈接
d、chrome瀏覽器，建議最新版本，瀏覽器地址輸入chrome://inspect/#devices
e、操做APP內H5頁面，瀏覽器內會有webview視圖，能夠捕獲頁面的dom元素，控制檯輸出調試，查看接口請求和報錯

APP調試頁面（試用IOS和安卓）
頁面追加以下代碼進行調試，能夠採用參數動態控制以下代碼的追加和調試
<script type="text/javascript" src="https://hd.qingyidai.com/m/activity/wheel/air/vconsole.min.js"></script>
<script type="text/javascript">
var vConsole = new VConsole();
</script>

Fiddler抓包工具
Fiddler是強大的抓包工具，它的原理是以web代理服務器的形式進行工做的，使用的代理地址是：127.0.0.1，端口默認爲8888，咱們也能夠經過設置進行修改。
代理就是在客戶端和服務器之間設置一道關卡，客戶端先將請求數據發送出去後，代理服務器會將數據包進行攔截，代理服務器再冒充客戶端發送數據到服務器；同理，服務器將響應數據返回，代理服務器也會將數據攔截，再返回給客戶端。
Fiddler能夠抓取支持http代理的任意程序的數據包，若是要抓取https會話，要先安裝證書。

使用：
a、手機端和電腦端同在一個wifi局域網下
b、電腦上打開Fiddler軟件
c、手機設置wifi代理，代理地址是電腦的IP地址，端口默認爲8888
d、手機操做瀏覽器H5頁面，Fiddler會有接口請求