前言

　　之前除錯前端bug都是在開發環境中做完並多次測試沒有問題之後釋出測試環境，驗收合格之後釋出生產。但生產環境偏偏會有和開發和測試環境不一致的情況，例如測試環境需要加密，而開發環境先不加密，測試環境傳給我們的時間格式和生產環境時間格式不一致，陣列物件不一致等導致線上生產報錯的bug。

　　為了更好的在線上環境檢測到具體的bug，節省我們在本地把地址改為生產的地址並走多一遍流程測試的麻煩，Chrome瀏覽器dbug測試就顯得尤為重要了。

一、定位js程式碼並標記dbug

　　首先F12開啟控制檯，然後選擇"Sources"選項卡，在Sources面板中選擇要除錯的檔案，在右側會開啟該檔案，瀏覽找到要除錯的JavaScript程式碼，點選程式碼行號，設定dbug；

　　像上面的兩個console,第一個列印的是'aaa'，第二個列印的是'bbb'，此時在第二個console左側點選一下，就會出現dbug的紅點，重新整理網頁時，執行到第二個console就會停止，也就是隻會列印aaa。

二、格式化顯示的JS程式碼

　　現在很多公司都要求前端程式碼打包並加密，因此我們看到的程式碼可能幾乎沒有可讀性可言，此時我們只需要點選下面的格式化按鈕，瀏覽器就會自動幫我們整理好程式碼的格式，真心大愛Chrome。

三、跳轉到下一個dbug/單步執行/步入行數內部

　　我們的程式大多數情況不可能只定位一個dbug，但定位太多個又會導致控制檯顯得很亂，並且無法直接在函式內部定位。

　　但幸運的是Chrome都有快捷鍵幫助我們解決上述問題。

　　按下F8就可以執行完成就執行到下一個斷點處，按F10就可以單步除錯，就是指程式碼執行到下一行而不是下一個斷點，按F11再點選程式碼的行號就可以在方法體的函式內部標記dbug。

四、檢視變數的值

　　滑鼠移到變數上面，就會顯示變數的內容，右側除錯面板中的Scope中也可以看到區域性變數的內容。

　　注意，如果在賦值前dbug沒有執行到這個位置，那麼顯示的變數值為undefined。

五、利用Watch監視變數的值

　　在Source中選擇變數，然後點選右鍵，在右鍵選單中選擇"Add selected text in watches"，就會將當前選擇的文字內容加到Watch中了，這裡的內容會隨著程式碼的執行而動態變化。

六、利用Call Stack檢視程式碼的層次關係以及Breakpoints檢視所有斷點

　　也是在Sources頁下方就可以看到。

七、最重要的一點--在Console中顯示和改變變數值

　　在Console中直接輸入變數，或是在Source中選擇變數，然後點選右鍵，在右鍵選單中選擇"Evaluate in console"，就可以在Console中顯示變數的值了。也可以直接在Console中輸入變數名=變數值，就可以修改變數的值了，相當於我們無需藉助編輯器就可以除錯線上的資料，而一旦報錯瀏覽器也會定位到錯誤的行，可以說非常讚了。

　　這種方式可以在變數賦新值之前配合dbug使用，或者直接console出該變數的值，來確定是否和其他環境的值一樣被自己解密或轉變格式。

總結

　　以上方式足夠在線上環境找出大多數bug，最後在本地把介面地址換成開發環境的地址，程式碼改完後生產環境測試一遍，基本一步到位。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。