在開發移動端頁面時，一般都得保證在微信頁面中能夠正常訪問，雖說微信內置瀏覽器統一了各個不同安卓機的WebView，但在不同的機子上，還是會出現不一樣的兼容問題。
調試頁面，有幾個維度要考慮：能夠訪問頁面、審查元素查看頁面輸出、抓包查看請求模擬登陸、斷點調試、性能測試、在模擬器上調試、在真機上調試
本文僅涉及基礎頁面的調試，不涉及Hybrid app、公眾號JDK 、小程序的相關調試
一、能夠訪問頁面
在開發安卓微信頁面時，剛開始一般是會在PC上進行，等到開發后期的自測階段再轉到安卓模擬器上、轉到各種真機上自測，上線了如果出問題還需要在真機上調試測試。
能夠訪問頁面，當然簡單，但難在能夠訪問頁面，並能為接下去的調試頁面打好基礎。
很多公司會有內外網之分，開發環境是在內網，外網訪問不到，就需要使用代理工具作一個中轉。
某個活動頁的開發環境地址是， local.abc.com/wx/page-spring ，測試機上估計也會有對應的一個地址 test.abc.com/wx/page-spring
為了訪問這個頁面，在PC的開發機上會設置HOST： 127.0.0.1 local.abc.com 12.70.0.1 test.abc.com
同樣的移動端手機為了能夠訪問，也需要設置HOST，但大部分機型都需要進行ROOT，不可取
使用Fiddler工具，手機設置代理
1. 首先，使手機和PC處在同一個局域網中，查看PC的IP（目前為 11.22.33.44）
2. 開啟Fiddler，在 options 中設置 Allow remote computers to connect ， 如果是HTTPS的頁面，還需要設置允許HTTPS的解析
3. 如果是HTTPS，就先在手機上安裝Fiddler的證書，在手機瀏覽器中訪問IP:port 然后按照提示進行安裝
4. 在手機的Wi-Fi連接上設置代理，設置成 IP:port
不同手機修改方式不一樣，但也類似，一般在更多或者高級修改網絡里頭
這樣一來，就可以在手機上直接用域名進行訪問頁面了。
但在手機上設置代理還是稍微麻煩了一點，還可以使用Fiddler的開放端口功能
使用Fiddler工具，開放端口直連
省略上面的第四步，改為使用Fiddler開放一個端口（比如8877），在命令行中執行
在FiddlerScript腳本面板中添加替換規則，請求前匹配IP:port來進行host轉換，然后保存應用
然后在PC上訪問 11.22.33.44:8877/wx/page-spring 試看是否正常轉換，再在手機上訪問這個鏈接即可
另外，有些頁面需要綁定微信oAuth授權，這些頁面上線之后（比如為 www.abc.com/wx/page-spring），如果想在PC上直接訪問調試，就會出問題了
使用Fiddler，請求前設置Cookie
微信授權其實是綁定了OpenID，並和我們自己的系統中做了對應，那我們只要拿到這個登陸cookie就能實現模擬登陸了
在Fiddler中，有很多種為請求設置cookie的方法
1. 獲取Cookie
使用上面的方法，讓手機訪問的請求能被Fiddler捕獲，取某條請求，獲取其中的Cookie（比如這個PHPSESSID）
2. Fiddler為請求設置Cookie
可以打斷點，在PC上訪問鏈接，然后在Raw或相應的Tab修改Cookie，再返回即可
手動打斷點是有點麻煩的，也可以直接使用FiddlerScript簡單地替換設置
當然也可以使用AutoResponder來直接匹配處理來訪問這個頁面
二、審查元素查看頁面輸出
遇到樣式的兼容性問題時，需要通過審查元素來調試。第一個調試基礎是查看頁面的元素和基本的日志輸出。
這類工具有很多，最常見的要屬Chrome的開發者調試工具，在PC上我們可以直接通過設備模擬來使用原生支持的DevTools，在真機上我們可以使用它的遠程調試功能。
1. Chrome設備模擬
這個就很常見了，這里不多說
2. Chrome遠程調試
遠程調試，代名詞，其實只是在PC上調試手機中訪問的頁面，通過USB連接進行調試。
PC的Chrome DevTools不僅能識別到手機端的Chrome瀏覽器，其他一些WebView瀏覽器也支持（比如微信內置X5瀏覽器 ，小米瀏覽器，華為瀏覽器等）
手機USB連接電腦，在手機開發者人員設置中開啟 允許USB調試，在電腦控制面板設備管理上看到設備驅動安裝成功（可以直接使用刷機精靈來幫助安裝驅動）
然后在Chrome中訪問 chrome://inspect/#devices ，在手機上訪問某個頁面，在這里就能識別出來了
上圖按順序為 手機Chrome、小米瀏覽器、微信X5瀏覽器 打開的頁面
以微信中的 CSS Triggers頁面為例來審查， 點擊 inspect將彈出一個類似 DevTools的調試窗口
很多時候只能看到一個空白的頁面，那是因為在遠程調試的時候，Chrome要先請求下載調試工具包（為什么不跟隨瀏覽器安裝包來打包呢？可能是覺得打包之后體積太大，而且這個調試工具包是有版本控制的，各個環境不一致），需要翻牆才行。
首次調試某個（手機）瀏覽器環境需要獲取，后續則直接使用離線的緩存。
科學上網工具自行解決 ，能訪問這個域名就行 https://chrome-devtools-frontend.appspot.com/#
這里提供一個host，可能后面會失效：
# 216.239.38.126 chrome-devtools-frontend.appspot.com
216.58.203.244 chrome-devtools-frontend.appspot.com
然后就能開始審查了，功能和DevTools基本一致（跟隨Chrome版本）
不過要注意的是，UC瀏覽器是識別不出的，需要使用PC的UC瀏覽器開發版和移動端的UC瀏覽器開發版才能調試，方法類似
其他的WebView也不一定能識別，需要WebView本身開啟支持了調試
小米瀏覽器默認是支持的，微信X5在去年的時候也是默認支持的，不過最近需要手動開啟了，在微信里訪問 http://debugx5.qq.com/ ， 然后打開 Inspector調試功能，重新訪問頁面即可
3. 搭建 Weinre 調試環境
使用Weinre，原理是往頁面插入一段腳本，不支持斷點調試功能
使用NPM安裝之后，
npm i -g weinre
weinre --boundHost localhost --httpPort 9876
將這串腳本放到要調試的頁面中即可，詳細用法可查看 文檔
功能雖然比較簡單，但這是最通用的調試方法，基本大部分環境下都能使用
4. 使用微信開發者工具進行調試
微信開發者工具的調試分為兩種，一種是基於Weinre的網絡連接調試，另一種是基於USB線纜連接的調試。安卓可以使用兩種，iOS只能使用前者
使用簡單的調試
需要手機與PC同處於一個局域網，在手機中設置代理，然后在微信里打開某個頁面進行調試
使用方法類似普通的Weinre，不過有個缺陷，就是不支持HTTPS，所以訪問HTTPS的頁面會出現白屏
使用USB調試X5內核
這種方法可以調試微信瀏覽器、QQ瀏覽器 或其他使用了X5內核的相關頁面，可以進行腳本的斷點調試
同樣的，需要先保證X5打開了可調試的選項，打開頁面后開始調試
在頁面列表中選擇inspect審查即可，同樣地會調用開發者工具集成的Chrome DevTools，所以初次也需要爬牆找調試工具包
調試情況與Chrome的遠程調試類似，差的是微信開發工具里調試功能的稍微舊了些，好的是它可以識別一些Chrome識別不到的
5. 使用 spy-debugger 進行調試
對Weinre來說，除了使用微信開發者工具的集成之外，還有另一個稍好的方案
spy-debugger本質上也是基於weinre進行開發調試的，除此之外它還支持HTTPS頁面，支持簡單的網絡抓包以及文件映射
npm i spy-debugger -g
spy-debugger
安裝之后啟動，同局域網下手機設置好代理（默認端口為 9888）
可見對HTTPS頁面做了一定的支持（需要先 按步驟 設置好證書）
另外也提供了基礎的抓包功能（默認使用AnyProxy，還可以自行設置），也是蠻實用的
6. 使用 VConsole 進行調試
上面所說都只是為了能夠審查頁面的元素，以便做一些基礎的調試。
不過，似乎都是在PC上操作的，那有沒有能直接在手機上用的工具呢？
近段時間發現這個小工具，如果電腦不在身邊，對移動端的調試還是蠻有幫助的
在新版QQ瀏覽器中，已經集成了這個選項，使用手機QQ瀏覽器訪問 http://debugx5.qq.com ，設置為開啟即可在右下方看到功能入口
點擊后可以看到幾個面板，能夠滿足基本的頁面審查、請求查看、命令執行，需要的話也可以自己添加插件
而在微信內置瀏覽器中訪問頁面時，則需要手動引入 VConsole.js 這個文件，然后調用一下即可
var vConsole = new VConsole();
三、抓包查看請求模擬登陸
很多時候我們希望獲取某個頁面所發起的請求和響應，對數據進行分析。抓包工具有很多，在Windows上有Fiddler，在Mac上有Charles，在手機上也有其他工具
Fiddler的功能用法是很強大的，但大部分人只知道基本的功能，還有很多東西未曾了解。比如其中的自定義腳本FiddlerScript部分，可以實現很多擴展
本文不展開來講，推薦好好看一下《Fiddler調試指南》
大部分其他工具可以查看請求或返回，但無法進行自定義修改。這是Fiddler和Charles的獨到之處
當然，使用Fiddler就得使用電腦，如果只是想直接在手機上看看請求的話，還有兩個工具可以推薦
1. 使用 Packet Capture 進行抓包
在安卓機子中，安裝之后，在它的設置項里配置一下證書
點擊綠色按鈕開啟監聽，它會監聽到所有APP的各種協議，也可以選擇監聽某一個APP
比如，這里監聽了我在微信里訪問博客園，查看捕獲的列表可以看到相關的信息
2. 使用 HttpInterceptor 抓包工具
相對前者來說，這個東西功能算是多了點
它內置了一個WebView瀏覽器，可以直接在里頭訪問連接分析頁面，也可以設置代理，設置host（免ROOT），修改返回數據等
如果PC上的開發環境設置了host ，PC的IP是 11.22.33.44，那么就可以在這里的host 設置為PC的IP，即可通過域名進行訪問
如果想監聽其他APP（比如微信里的頁面），則設置代理為 127.0.0.1:8888 即可（有點Fiddler的影子了），注意不用的時候（或者此進程被殺死）把代理關掉，否則訪問不了網絡
點擊預覽可以看到捕獲的請求列表，然后點擊進去可以看到請求和返回的數據詳情
如果想修改返回數據，可以在這里進行設置。比如結合上述的 VConsole 來使用，可以在不借助電腦的情況下就能做一些基本的調試功能
四、斷點調試
斷點調試，包括JS的調試，以及DOM節點元素的樹結構、屬性改變的調試，它在調試過程中是很重要的，一般來說都需要使用到開發者工具。
在這個維度上看，調試方法要屬Chrome的設備模擬和遠程調試
五、性能測試
某些時候還需要對頁面進行性能的測試，從加載時的時間線性能，到運行時的流暢度性能，再到頁面占用的內容性能等角度來分析
要比較准確地顯示地考量這些指標，一般都需要在真機上進行調試，也少不了開發者工具
一般設計到這一環時，Chrome遠程調試就是必須的了。
本文先不展開，后續會有關於Chrome DevTools 的調試整理，敬請期待~
六、在真機上調試
關於移動端頁面的測試，有三個層次：
1. 在PC上用瀏覽器設備模擬測試
2. 在PC上用模擬器模擬測試
3. 使用真機模擬測試
瀏覽器的設備模擬多是從樣式上來模擬，安卓模擬器有了一些硬件上的傾向性，在真機上最為可靠
然而現在大多數的手機瀏覽器都自帶了工具欄，而華為手機上自帶了虛擬鍵盤，導致一個頁面的高度不統一。也許在設備模擬頁面上正常了，在真機卻被擠壓元素被覆蓋了。
所以說，有機會的話都要搜集常見的機型來進行真機測試，或者至少要進行模擬器的測試。
以調試安卓微信頁面為基礎，本文列舉了幾個常見的調試工具和相應的使用方法
並不是每個方法都保證可行，所以在調試過程中會有很多的備選方案
要說最重要的，應該就是Fiddler和DevTools的結合了，DevTools解決不了的再找Weinre