背景：
開發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="vconsole.min.js"></script>
<script type="text/javascript">
var vConsole = new VConsole();
</script>
其中vconsole.min.js下載和使用可以查看https://www.meiwen.com.cn/subject/vybabqtx.html
Fiddler抓包工具
Fiddler是強大的抓包工具，它的原理是以web代理服務器的形式進行工作的，使用的代理地址是：127.0.0.1，端口默認為8888，我們也可以通過設置進行修改。
代理就是在客戶端和服務器之間設置一道關卡，客戶端先將請求數據發送出去后，代理服務器會將數據包進行攔截，代理服務器再冒充客戶端發送數據到服務器；同理，服務器將響應數據返回，代理服務器也會將數據攔截，再返回給客戶端。
Fiddler可以抓取支持http代理的任意程序的數據包，如果要抓取https會話，要先安裝證書。
使用：
a、手機端和電腦端同在一個wifi局域網下
b、電腦上打開Fiddler軟件
c、手機設置wifi代理，代理地址是電腦的IP地址，端口默認為8888
d、手機操作瀏覽器H5頁面，Fiddler會有接口請求
Android的WebView調試工具（無需FQ，可同時調試多個設備，永不過期）
https://www.cnblogs.com/hjblog/p/9078147.html#4055020
微信打開X5調試，使手機與微信開發者工具都可以進行調式
https://www.jianshu.com/p/e4a8ef68c35b
UC 瀏覽器開發者版本
https://dev.ucweb.com/download/?spm=ucplus.11199946.banner.1.53974692harejG
開發者版本 (Developer Edition) 支持 DevTools Protocol，它允許開發者使用任何兼容該協議的客戶端（如 Chrome 開發者工具）進行遠程調試。最新版基於 Chromium 57 構建，對 PWA 、ES2015+ 等新特性支持良好。