前言
平時工作量大並且很忙，也就意味着難免會在寫代碼的時候一不小心寫出BUG。如果測試一旦沒有測到，代碼上到現網往往就是事故，很多同學在這種時候手忙腳亂，不知道怎麼調試解決。本文就這點主要講一下平時前端調試用的那些方法，希望能夠給到大家幫助。
遇到了BUG怎麼辦？
比較有經驗的同學都清楚，平時比較好用的方法有這些：
- 打斷點
-
charles抓包
看不出來問題，我們來打個斷點吧~
遇到 BUG，通常我們第一直覺是打開控制檯，點開看一下 Console
通常，如果存在報錯，我們可以直接點進去到源碼處直接打斷點
當然，這裏只是做簡單的示例，實際情況更加複雜的時候，右邊的堆棧可以讓你看到調用順序，沿着調用堆棧一般也能找到問題所在。
如果打斷點還是找不到問題，我們可以 review 代碼並思考以下問題：
- 接口數據是否存在異常
- 代碼是否已提交到現網環境
如果是接口數據異常返回了，那當然沒我們什麼事情了，但是代碼如果沒有提交或者打錯tag引起的事故，那麼事故覆盤會就尷尬了...
charles 怎麼解決我們的問題呢？
通常碰到 BUG，我們會先從 master 拉一個 fix-bug 的分支。我們復現、解決 BUG 的前提是調試環境需要跟現網保持一致，具體如下：
- 代碼跟現網保持一致
- 接口能力跟現網保持一致
非常理想化的情況下，我們拉下來的 fix-bug 分支可以直接代理到現網，這樣一來可以極大提高復現 BUG 的可能性，從而解決它。
...
devServer: {
proxy: {
'/api': {
target: 'https://你的現網域名',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}然而，現實情況往往不會這麼理想。我們有時候會被“安排”維護一些老項目，由於歷史原因這些老項目往往不能用本地開發代理來進行調試，這時候就可以用到一個神器 ———— charles
charles的作用
- 抓取目標的
javascript文件，用本地打包後的javascript文件替換它 - 每次更改
javascript文件後，只要手動刷新頁面即可生效
比較麻煩的就是，每次更改需要刷新頁面才能看到效果
移動端的調試
移動端的問題處理起來有時候真的很心累，尤其是ios上safari的兼容性問題，當然這裏不會展開講
-
charles抓包調試
charles 抓包調試還是很常見的方法，但是現在在安卓7.0及以上已經抓不到了，不過使用 ios 系統的小夥伴依然可以抓到包。需要注意的是，如果遇到小程序上的支付問題，由於 ios 在小程序上存在支付限制，用起來反而會顯得掣肘。
對於喜歡折騰的同學，安卓上的抓包問題已經有解決方案了
- 真機調試
工具：
- Google 瀏覽器
Google 瀏覽器是具有真機調試功能的，這裏有詳細的教程，本文就不展開講了。
- TBS
騰訊出的一款基於 X5 內核的真機調試工具，只要連上數據線就完事了。可以調試微信H5，但是由於現在小程序上的內核已經改變了，用TBS已經不能調試。點擊查看官方文檔。
- 微信開發者工具
微信開發者工具具有真機調試的功能，然而，在實際環境中，首先你要有開發者權限才行。
- 在PC端瀏覽器上調試（前提：不是微信H5或者小程序）
- vconsole
總結
前端的調試方法有很多，知道有哪些方法很重要，但是最重要的還是能在不同的場景下采用最好的方案。
交流
大家如果覺得覺得寫的不錯，可以點贊評論。掃描下方的二維碼或搜索「tony老師的前端補習班」關注我的微信公衆號，那麼就可以第一時間收到我的最新文章。
