移動端H5除錯

背景：

開發pc頁面的時候使用chrome瀏覽器的開發者工具，可以很容易的捕獲到頁面的dom元素，並且可以修改樣式，方便除錯；

但是手機上卻很麻煩，因為手機上沒有辦法直接開啟開發者工具檢視元素。其實可以通過將裝置連線到pc，使用pc的開發者工具檢測。

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，可同時除錯多個裝置，永不過期）

uc 瀏覽器開發者版本

開發者版本 (developer edition) 支援 devtools protocol，它允許開發者使用任何相容該協議的客戶端（如 chrome 開發者工具）進行遠端除錯。最新版基於 chromium 57 構建，對 pwa 、es2015+ 等新特性支援良好。