總結下移動端除錯的一些方法
前言
說起網站除錯，pc頁面和h5頁面，假如電腦上能夠重現的，都不在話下，除錯起來都蠻簡單。僅僅需要fiddler一個抓包工具，把線上壓縮程式碼替換成本地無壓縮程式碼就可以了。具體步驟我後面可以詳細介紹。但是，僅僅是某款手機重現，其他手機沒有問題的情況下如何除錯？hybrid頁面如何除錯呢？這篇文章簡單總結下我常用的除錯方法。
一、chrome的inspect除錯方法
這個除錯僅僅是針對安卓系統，可以除錯hybrid,也可以除錯h5，但是IOS系統就無能為力了。我很喜歡用這種方式除錯android手機。用inspect可以在chrome中模擬一個手機中的webview，你可以在chrome中除錯你手機中的程式碼。
步驟如下：
1、android手機通過資料線連線pc,開啟android手機的“允許除錯”功能（usb除錯）
一般是在手機的開發者工具裡面，有的手機連續點選幾次版本號可以出現，具體可以網上搜索一下。 如下圖：
點選允許USB除錯:
(有些手機連結不上，需要安裝一些驅動，可以下載PP助手，安裝手機驅動，pp助手鍊接成功，chrome應該就可以連結成功了！)
2 . chrome位址列裡面輸入“chrome://inspect"
3 . 手機（h5或者app掃描開啟指定頁面）看到如下畫面就可以真機除錯了：
二、vConsole或者eruda除錯
這兩種方式都是通過js程式碼注入來完成的。
vConsole如下圖： 
vConsole 說明文件： https://github.com/Tencent/vConsole
引入方式可以如下：
(function() {
if (!/vconsole=true/.test(window.location) ) return;//判斷瀏覽器有誤引數
var script = document.createElement('script');
script.src = "//pages.c-ctrip.com/amsweb/tools/vconsole.min.js";
document.body.appendChild(script);
script.onload = function() {
var vConsole = new VConsole();
console.log('Hello world');
}
})();
eruda除錯如下圖：
eruda 說明文件： https://github.com/liriliri/eruda
(function() {
if (!/eruda=true/.test(window.location) ) return;//判斷瀏覽器有誤引數
var script = document.createElement('script');
script.src = "//pages.c-ctrip.com/amsweb/tools/eruda.min.js";
document.body.appendChild(script);
script.onload = function() {
eruda.init()
}
})();
三、fiddler抓包（http,https)
對於fiddler抓包抓http的，很簡單，手機設定代理。 fiddler設定埠號
對於http的除錯一般沒有問題，問題是對於https的除錯
首先要勾選忽略錯誤
然後下載證書
手機中安裝證書。
(備註：android手機可能直接點選 FiddlerRoot.cer 沒反應，或者提示無法安裝，那麼就需要從儲存裝置安裝。)
小米安裝步驟是：
【設定】->【更多設定】->【系統安全】->【從儲存裝置安裝】→選擇證書安裝即可
不同手機不一樣。可以網上查下。
四、spy-debugger除錯
這個不可以除錯hybrid頁面（js等讀取手機本地的檔案的hybrid頁面非app直連h5），但是可以遠端除錯任何手機瀏覽器頁面，支援HTTP/HTTPS(可以除錯app 直連h5頁面，就是app裡面巢狀的h5)
具體使用步驟如文件： https://github.com/wuchangming/spy-debugger。
第一步：手機和PC保持在同一網路下（比如同時連到一個Wi-Fi下）
第二步：命令列輸入spy-debugger，按命令列提示用瀏覽器開啟相應地址。
第三步：設定手機的HTTP代理，代理IP地址設定為PC的IP地址，埠為spy-debugger的啟動埠(預設埠：9888)。
Android設定代理步驟：設定 - WLAN - 長按選中網路 - 修改網路 - 高階 - 代理設定 - 手動
iOS設定代理步驟：設定 - 無線區域網 - 選中網路 - HTTP代理手動
第四步：手機安裝證書。
第五步：用手機瀏覽器訪問你要除錯的頁面即可。
這種方式主要是除錯微信，或者百度或者app中直連的h5頁面，除錯起來很方便。
五、 IOS中頁面除錯
ios頁面除錯最好用mac電腦
1：開啟iphone手機的開發者模式，流程是：【設定】->【Safari】->【高階】->開啟【Web檢查器】
2：開啟Mac上Safari的開發者模式，流程是【Safari】->【偏好設定】->【高階】→【在選單欄中顯示“開發”選單】勾選
3：用資料線將iphone手機和mac連線起來，在電腦的safari中按照流程執行：【開發】->【xxx的iphone】→【你的網站】
4 ：這樣你就能在mac上面除錯用iphone的safari開啟的網頁了