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