本文永久連結：github.com/HaoChuan942…
之所以寫這個總結，還要從上週的一次移動端專案的 debug 說起。那天，測試小姐姐拿著自己的 iphone6s 過來找我，說頁面打不開。我想：這怎麼可能，我手機裡挺好的呀，Chrome除錯工具也沒報錯呀！就把她手機拿過來看了看，發現一進去還真就是一片空白。WTF（手動黑人問號）！！！那問題就來了，開發環境下沒報錯，可真機又出現了意料之外的情況，而且沒法像 PC端 那樣祭出 F12 大法，怎麼定位問題並解決呢？最後憑藉著我（谷歌）的聰明才智，找到了媲美 PC端 除錯體驗的方式。在此總結一波，獻給各位被移動端真機除錯折磨，而又無從下手的前端er們，話休煩絮，直接奉上：
1. vConsole 推薦指數：★★★☆☆
騰訊出品的 Web 除錯皮膚，相信不少前端小夥伴都用過。vConsole 會在你網頁中加一個懸浮的小按鈕，可以點選它來開啟關閉除錯皮膚，並檢視 DOM、Console、Network和 本地儲存 等資訊。基本可以滿足普通前端開發的需求。使用方法也很簡單，通過npm安裝或者直接在需要的頁面引入 js檔案 ，然後 new VConsole() 就可以了。不熟悉的小夥伴可以直接去官方的 GitHub 看 README。但是它並沒有解決我的問題，因為我的 bug 嚴重到一進頁面就報錯，脆弱的 javascript 直接原地爆炸?，頁面一片空白?。
同類產品 eruda
2. Charles 推薦指數：★★☆☆☆
Charles 是一款強大的抓包工具，可以擷取包括 https 在內的各種網路請求並方便的檢視具體資訊。有 Mac、Windows 和 Linux多版本，通過配置 WIFI 代理，也可以攔截手機發出的請求。畢竟前端相當一部分報錯是網路錯誤或資料不符合預期導致的（甩鍋後端?）。所以通過攔截 http 請求,檢視具體的請求資訊和資料，能獲取很多有用的資訊，可以在一定程度上幫助 debug。但是該軟體是付費的（希望大家支援正版，要記住你也是一位開發），而且它定位不了 js 的報錯，所以只能作為一個輔助工具。至於使用方法，網上很多介紹—— 此處一枚。
3. weinre 推薦指數：★★★☆☆
weinre是一款很不錯的網頁檢查工具，可以通過在本地啟動一個 weinre 服務，並向手機網頁嵌入一段 js 指令碼來實現和電腦的通訊，已達到類似瀏覽器開發工具那樣的的除錯效果，它的操作介面和 vConsole 差不多，主要包括檢視 DOM、Console、Network 等，只不過這一切是在電腦上操作，而不是在手機上。微信web開發者工具的移動除錯也是藉助於此。附上一篇簡單的使用介紹。因為我的 js 早就原地爆炸?，它和 vConsole 一樣，並沒有幫到我什麼。
4. Mac + IOS + Safari 推薦指數：★★★★☆
如果你手上有一臺 Mac 電腦和一部蘋果手機，那麼恭喜你，你離解決 bug 只差我這一篇部落格了。（手動滑稽）
第一步：開啟蘋果手機 設定 > Safari瀏覽器 > 高階 > Web檢查器
第二步： 開啟 Mac 上的 Safari瀏覽器 > 偏好設定 > 高階 > 在選單欄中顯示“開發”選單
第三步： 用資料線連線你的 Mac 電腦和蘋果手機，並選擇信任裝置。然後在手機的 Safari瀏覽器 中開啟你需要除錯的頁面，並在電腦上點選下圖紅框的位置。
第四步：點選之後就會出現如下圖所示的，幾乎和電腦一樣的除錯介面，怎麼操作，我想各位大佬也不用我多囉嗦了吧！我就是通過這種方式發現 js 的報錯，併成功解決問題，贏得小姐姐認可的?。
5. Chrome瀏覽器 + Android 推薦指數：★★★★★
很多小夥伴可能不使用 Mac 或者不習慣 Safari瀏覽器 的開發者工具，沒關係，谷歌也有類似的工具，而且更符合大家的使用習慣。有梯子的小夥伴，可以直接看谷歌官方文件。
第一步：開啟 Android 手機 設定 > 開發者選項 > USB除錯。設定裡面沒有 開發者選項 的，自行百度。
第二步：通過資料線連線你的電腦和 Android 手機，會彈出如下介面，點選 確定。
第三步：給你的 Android 手機下載一個手機版的 Chrome瀏覽器 (各大應用商店自行搜尋)，並在手機上的 Chrome瀏覽器 中開啟你需要除錯的頁面。
第四步：開啟你電腦上的 Chrome瀏覽器 ，按下圖示註順序，依次點開。我使用的是 小米5，你可以看到左側有 MI 5 已連線的字樣。劃線的地方分別是手機上 Chrome瀏覽器 和自帶瀏覽器 WebView 下開啟的頁面。
第五步： 每個頁面右側都有一個 Inspect 檢查的按鈕，點選就會出現你熟悉的畫面，後面就不用解釋了吧！走你?。
公司的小夥告訴我，這種方法他需要爬梯子才能用，爬不上去的小夥伴可以關注我，
我後面計劃出一篇介紹如何自己搭梯子的部落格送你一架小飛機~~。
總結
工欲善其事必先利其器，沒有好的除錯工具或方法，移動端真機下的 debug 簡直是前端的噩夢。但是有了這些好用的方法，我想各位優秀的前端大佬，幫妹子修復個小 bug 還是 so easy 的。如果各位大佬有好的意見或者有其他的解決方案，也歡迎評論區交流。