背景： 隨著移動端的不斷推進，移動端的除錯也成為前端開發者不得不面臨的問題，在PC端的時代，我們直接開啟 chrome的檢查元素皮膚，就可以解決大部分的問題了。但是到了移動端，明明在電腦上模擬好的元素，在手機上就會 亂掉。下面我們就來一起聊一聊移動端除錯的那些問題，讓真機除錯不在那麼困難。
1、瀏覽器模擬手機除錯
1.1 如何使用？
chrome作為一款瀏覽器，給開發者帶來的便捷也是為人所稱道的。在PC端，只需要F12，開啟開發者工具，就可以開始除錯了，這點就不用我多說了。而其開發者工具中加入的模擬手機除錯選項更是強大。只需要點選切換裝置工具，如圖1.1.1所示。
1.2 何時使用？
建議在日常的開發過程中，儘量使用chrome模擬進行開發，因為其容易使用與速度快（電腦的效能與網速還是比手機強不少的）。使用模擬功能，我們能快速先把功能與佈局除錯出來。據筆者經驗，使用chrome模擬開發出來的網頁，一般在真機上都沒什麼問題。
1.3 注意事項
使用chrome模擬除錯的同學可能有時候會碰到touchstart，touchend等事件無法觸發的情況。先不要著急擔心是自己程式碼的問題，因為chrome模擬除錯。目前還有一點問題，我們在進行過一些操作後，模擬狀態會丟失。chrome雖然視窗大小還在模擬移動端，滑鼠事件已經變成PC端的模擬了。所以需要再觸發兩次模擬，就會恢復模擬移動端。如圖1.1.2所示
2、Android手機 + chrome（真機除錯）
2.1 有什麼用？
雖然使用PC端瀏覽器模擬開發很強大，但是我們在chrome上模擬的移動端網頁，在真機執行的時候，總會遇到一些樣式錯亂的問題，這時，我們就需要使用真機來進行除錯； **建議：**使用模擬開發完後，如果在真機上測試遇到了問題（無論什麼瀏覽器），首先應該用chrome來檢查一下，如果在手機chrome上也遇到了同樣的問題，那麼使用chrome的除錯是非常方便的，應該首選其除錯。
2.2 如何使用？
你需要有：一臺Android手機，一臺電腦，一根Android資料線
操作步驟： 1、首先需要在Android手機上安裝chrome瀏覽器； 2、然後開啟手機的開發者模式，一般Android手機都是通過以下路徑開啟開發者模式，設定->關於手機->版本號連按5次，之後設定選單裡會多出一個開發人員選項，進入將其中的“USB除錯”開啟即可，如圖2.2.1
3、將手機與電腦通過USB線連線，彈出對話方塊“是否允許USB除錯”，選擇確定，如圖2.2.2
4、開啟手機上的chrome，並進入需要除錯的頁面，如圖2.2.3
5、開啟PC端chrome，在位址列中輸入chrome://inspect/，進入除錯頁面，此時，我們發現，chrome檢測到了我們的手機，如圖2.2.4
6、點選inspect彈出chrome除錯工具，然後就可以在電腦上除錯真機了，如圖2.2.5
2.3 注意事項
在上面第6步的時候，點選inspect後，彈出的皮膚可能是一片空白，這是因為，首次使用該功能時，需要連線外網（翻牆），初始化後，成功顯示了除錯工具的皮膚後，以後就不需要翻牆了。
3、iPhone手機 + Safari瀏覽器
3.1 有什麼用？
如果模擬器沒有問題，iPhone手機上執行時出現了問題，首先使用iPhone自帶的Safari瀏覽器檢視一下網頁，如果瀏覽器中出現了同樣的問題，則建議配合Mac上的Safari進行除錯，找出問題所在。
3.2 如何使用
你需要有：一部iPhone，一臺Mac，一根iPhone資料線
操作步驟：
1、開啟手機上的Safari除錯，具體步驟為，設定->Safari->高階->web檢查器（開啟），如圖3.2.1
2、開啟Safari，並開啟需要除錯的網頁，如圖3.2.2
3、開啟Mac上的Safari，選擇開發->賬戶名-右側需要測試的網頁URl，如圖3.2.3
4、利用檢查器進行除錯，如圖3.2.4
4、微信內建瀏覽器除錯
4.1 有什麼用
使用微信團隊提供的微信除錯工具，可以除錯在微信中訪問的頁面。
4.2 如何使用
操作步驟：
1、首先，下載微信除錯工具，並安裝。微信除錯工具下載 2、使用USB線，將手機與電腦連線，掃描二維碼，勾選 資訊->TBS setting->是否開啟TBS核心inspector除錯功能。點選“提交” 如圖4.2.1、4.2.2
3、使用微信，開啟網頁，之後點選“開始除錯”（如圖4.2.3），彈出如圖4.2.4的除錯列表。點選需要除錯的頁面下方的inspect進行除錯，彈出除錯工具，如圖4.2.5
5、使用weinre除錯
5.1 有什麼用
如果上述所說的所有瀏覽器均沒有出問題，但是偏偏有些瀏覽器下，自己的網頁發生了問題，可是這個瀏覽器又沒有解決方案的話。我們的祕密武器weinre就要登場了。
它可以除錯所有瀏覽器。其原理是在要除錯的頁面上加上一段js，再由這段js，支援電腦與手機的除錯與呼叫。由於weinre的原理是注入js，微信等內建瀏覽器也可以使用weinre進行除錯。
5.2 如何使用
如果是一個人除錯的話，可以在自己的機器上使用個人的解決方案。
操作步驟
1、在自己的電腦上使用npm（或cnpm）安裝weinre，安裝命令及結果如圖5.2.1所示
2、啟動weinre服務，繫結到localhost，埠可以自己選一個，不要與其他服務埠重啟就行，如圖5.2.2所示，開啟8081埠
3、按照提示開啟 http://localhost:8081 ，發現服務已經啟動了，如圖5.2.3所示
4、將生成的js，引入自己將要除錯的頁面中去，如圖5.2.4所示，生成的js在圖5.2.3中箭頭標識
5、然後使用任意手機端瀏覽器開啟這個頁面，進行除錯，如圖5.2.5所示
6、在http://localhost:8081上，點選第一個連線，進入除錯頁面，如圖5.2.6所示
7、在除錯頁面中，發現有一個客戶端連線了本weinre服務，如圖5.2.7，點選上方最新連線的客戶端，然後點選element進行除錯，如圖5.2.8所示
8、團隊除錯 如果希望搭建一個服務，團隊公用的話，也是可以的，只需要找一臺伺服器，在其上執行weinre，並讓所有團隊成員，除錯時，均引用這臺伺服器上生成的js，除錯頁面是可以選擇除錯哪個接入的手機的，如圖5.2.9，只要團隊成員，除錯的時候，自己選擇自己的訪問就可以了。
6、使用spy-debugger方法除錯（github介紹）
6.1 介紹及特性
1、介紹
（1）站式頁面除錯、抓包工具。遠端除錯任何手機瀏覽器頁面，任何手機移動端webview（如：微信，HybirdApp等）。支援HTTP/HTTPS，無需USB連線裝置。 （2）spy-debugger原理是整合了weinre，簡化了weinre需要給每個除錯的頁面新增js程式碼。spy-debugger原理是攔截所有html頁面請求注入weinre所需要的js程式碼。讓頁面除錯更加方便。
2、特性
（1）頁面除錯＋抓包 （2）操作簡單，無需USB連線裝置 （3）支援HTTPS。 （4）spy-debugger內部整合了weinre、node-mitmproxy、AnyProxy。 （5）自動忽略原生App發起的https請求，只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不造成任何影響。 （6）可以配合其它代理工具一起使用(預設使用AnyProxy) (設定外部代理)
6.2 使用步驟
1、安裝外掛 window下：
npm install spy-debugger -g
複製程式碼Mac下：
sudo npm install spy-debugger -g
複製程式碼2、使手機和PC保持在同一網路下（比如同時連在一個WiFi下）； 3、開啟cmd，輸入spy-debugger，按命令列提示用瀏覽器開啟相應地址； 4、設定手機的HTTP代理，代理IP地址設定為PC端的IP地址，埠為spy-debugger的啟動埠（預設埠：9888），如下圖所示；
（1）Android設定代理步驟：
設定 -> WLAN -> 長按選中網路 -> 修改網路 -> 高階 -> 代理設定 - 手動
（2）IOS設定代理步驟：
設定 -> 無線區域網 -> 選中網路 -> HTTP代理 -> 手動
5、手機安裝證照。注：手機必須先設定完代理後再通過（非微信）手機瀏覽器訪問 http://s.xxx（可直接掃碼訪問，如圖6.2.2）安裝證照（手機首次除錯需要安裝證照，已安裝了證照的手機無需重複安裝）。問題：IOS10.3.1以上版本證照安裝問題；
6、用手機瀏覽器訪問你要除錯的頁面即可
6.3 自定義選項
（1）埠設定（預設埠為9888）：
spy-debugger -p 8888
複製程式碼（2）設定外部代理（預設使用AnyProxy）：
spy-debugger -e http://127.0.0.1:8888
複製程式碼spy-debugger內建AnyProxy提供抓包功能，但是也可通過設定外部代理和其它抓包代理工具一起使用，如：Charles、Fiddler。
（3）設定內容頁面為可編輯模式（預設false）
spy-debugger -w true
複製程式碼內部使用原理：在需要除錯的頁面內注入程式碼：document.body.contentEditable = true；暫不支援使用了iscroll框架的頁面。
（4）是否允許weinre監控iframe載入的頁面（預設false）
spy-debugger -i true
複製程式碼（5）是否只攔截瀏覽器發起的https請求（預設true）
spy-debugger -b false
複製程式碼有些瀏覽器發出的connect請求沒有正確的攜帶userAgent，這個判斷有時候會出錯，如UC瀏覽器。這個時候需要設定為false。大多數情況建議啟用預設配置：true，由於目前大量App應用自身（非WebView）發出的請求會使用到SSL pinning技術，自定義的證照將不能通過app的證照校驗。
（6）是否允許HTTP快取（預設false）
spy-debugger -c true
複製程式碼