個人推薦使用：vConsole
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 檢查的按鈕，點擊就會出現你熟悉的畫面，后面就不用解釋了吧！走你🚀。
公司的小伙告訴我，這種方法他需要爬梯子才能用，爬不上去的小伙伴可以關注我，
我后面計划出一篇介紹如何自己搭梯子的博客送你一架小飛機~~。