【乾貨】前端進階應該知道的這些調試方法

前言

平時工做量大而且很忙，也就意味着不免會在寫代碼的時候一不當心寫出BUG。若是測試一旦沒有測到，代碼上到現網每每就是事故，不少同窗在這種時候手忙腳亂，不知道怎麼調試解決。本文就這點主要講一下平時前端調試用的那些方法，但願可以給到你們幫助。

遇到了BUG怎麼辦？

若是你仍是個前端小白，你最經常使用的調試方法應該是直接在代碼中寫下一個 log，例如：

console.log('調試信息，輸出：', test)

方法雖然簡單粗暴，可是它是實用且簡單的。然而，若是 BUG 十分複雜，涉及到跨組件甚至是源碼，採用打 log 的方式就變得十分麻煩了；
而比較有經驗的同窗在遇到複雜問題的時候可能會採起如下方法來定位、調試：

• 打斷點
• charles 抓包

看不出來問題，咱們來打個斷點吧~

遇到 BUG，一般咱們第一直覺是打開控制檯，點開看一下 Console

一般，若是存在報錯，咱們能夠直接點進去到源碼處直接打斷點

若是控制檯沒有報錯，只是代碼邏輯出現了問題那咋辦呢？咱們只要在代碼中加個 debugger 就好了，舉個例子：

...
created () {
   debugger
   this.init()
   this.doSomething()
}
...

F12 打開調試工具以後刷新頁面，斷點就會停在 created 裏了。
固然，這裏只是作簡單的示例，實際狀況更加複雜的時候，右邊的堆棧可讓你看到調用順序，沿着調用堆棧通常也能找到問題所在。

若是打斷點仍是找不到問題，咱們能夠 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 文件後，只要手動刷新頁面便可生效

怎麼抓包？

步驟：

1. 下載charles
2. 安裝證書
3. 刷新頁面並讓它顯示須要抓取頁面的域名/ip，找到須要替換的js
4. 選中須要替換的 js，右鍵Map Local跟本地相應的 js 對應

固然了，網上關於 charles 抓包的教程已經不少了，這裏只是簡單寫下步驟。你們自行到 google 或者百度上搜索如下關鍵詞便可：

• charles 抓包
• charles 安裝證書

比較麻煩的就是，每次更改須要刷新頁面才能看到效果。

移動端的調試

移動端的問題處理起來有時候真的很心累，尤爲是 ios 上 safari 的兼容性問題，固然這裏不會展開講

1. charles 抓包調試

charles 抓包調試仍是很常見的方法，可是如今在安卓7.0及以上已經抓不到了，不過使用 ios 系統的小夥伴依然能夠抓到包。須要注意的是，若是遇到小程序上的支付問題，因爲 ios 在小程序上存在支付限制，用起來反而會顯得掣肘。
對於喜歡折騰的同窗，安卓上的抓包問題已經有解決方案了。

1. 真機調試

工具：

• Google 瀏覽器

Google 瀏覽器是具備真機調試功能的，這裏有詳細的教程，本文就不展開講了。

• TBS

騰訊出的一款基於 X5 內核的真機調試工具，只要連上數據線就完事了，也能夠調試微信H5。
然而以前在這裏查看到相關問答和說明 ，如今的小程序上的內核已經改變，使用TBS已不能調試。

• 微信開發者工具

微信開發者工具具備真機調試的功能，然而，在實際環境中，首先你要有開發者權限才行。

小結：可以直接用真機調試的儘可能用真機調試，不論是樣式仍是代碼邏輯都能快速定位並解決。

1. 微信開放社區

微信小程序上有時候會出現一些奇特的 BUG，每每跟咱們的代碼邏輯徹底沒有關係，這種時候應該到微信的開放社區上及時反饋BUG。點擊這裏查看微信開放社區。

1. 在PC端瀏覽器上調試（前提：不是微信H5或者小程序）

直接打 log 或者斷點就好了，通常不用特地去抓包。

1. vconsole

咱們在前端項目中安裝 vcosole 插件（開發/測試環境下），那麼就能夠
能夠在移動端中（小程序除外）查看 log 或者接口請求狀況，通常用來快速定位問題，不建議用來調試很複雜的 BUG

【番外】實在定位不到問題怎麼辦？

可以用調試工具定位出來的問題都不算問題，相信不少前端的同窗都有這種感受。有這麼一些疑難雜症，咱們很難去定位、解決，何況通常給到咱們的時間很是緊，這種時候應該怎麼辦呢？我總結了以下方法：

• 到社區上尋求幫助
• 向你身邊的同事求助

經常使用到的網站：

• 百度
• google
• stackoverflow
• segmentfault

固然，不管是跟同事求助，仍是到社區上尋找解決方案，你都要事先整理好這些：

1. 清晰的描述問題所在
2. 提供可復現的環境
3. 提供核心代碼

萬一問題最後仍是沒有解決，你得想一個折中的解決方案。

資料

如下資料可供參考：

• TBS官方文檔
• charles官網
• google調試文檔

總結

前端的調試方法有不少，知道有哪些方法很重要，可是最重要的仍是能在不一樣的場景下采用最合適的方案。

交流

你們若是以爲以爲寫的不錯，能夠點贊評論。掃描下方的二維碼或搜索「tony老師的前端補習班」關注個人微信公衆號，那麼就能夠第一時間收到個人最新文章。