前言

之前調試前端bug都是在開發(fā)環(huán)境中做完并多次測試沒有問題之后發(fā)布測試環(huán)境，驗收合格之后發(fā)布生產。但生產環(huán)境偏偏會有和開發(fā)和測試環(huán)境不一致的情況，例如測試環(huán)境需要加密，而開發(fā)環(huán)境先不加密，測試環(huán)境傳給我們的時間格式和生產環(huán)境時間格式不一致，數(shù)組對象不一致等導致線上生產報錯的bug。

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

一、定位js代碼并標記dbug

首先F12打開控制臺，然后選擇'Sources'選項卡，在Sources面板中選擇要調試的文件，在右側會打開該文件，瀏覽找到要調試的JavaScript代碼，點擊代碼行號，設置dbug；

像上面的兩個console,第一個打印的是’aaa’，第二個打印的是’bbb’，此時在第二個console左側點擊一下，就會出現(xiàn)dbug的紅點，刷新網(wǎng)頁時，運行到第二個console就會停止，也就是只會打印aaa。

二、格式化顯示的JS代碼

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

三、跳轉到下一個dbug/單步運行/步入行數(shù)內部

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

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

按下F8就可以運行完成就運行到下一個斷點處，按F10就可以單步調試，就是指代碼運行到下一行而不是下一個斷點，按F11再點擊代碼的行號就可以在方法體的函數(shù)內部標記dbug。

四、查看變量的值

鼠標移到變量上面，就會顯示變量的內容，右側調試面板中的Scope中也可以看到局部變量的內容。

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

五、利用Watch監(jiān)視變量的值

在Source中選擇變量，然后點擊右鍵，在右鍵菜單中選擇'Add selected text in watches'，就會將當前選擇的文本內容加到Watch中了，這里的內容會隨著代碼的執(zhí)行而動態(tài)變化。

六、利用Call Stack查看代碼的層次關系以及Breakpoints查看所有斷點

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

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

在Console中直接輸入變量，或是在Source中選擇變量，然后點擊右鍵，在右鍵菜單中選擇'Evaluate in console'，就可以在Console中顯示變量的值了。也可以直接在Console中輸入變量名=變量值，就可以修改變量的值了，相當于我們無需借助編輯器就可以調試線上的數(shù)據(jù)，而一旦報錯瀏覽器也會定位到錯誤的行，可以說非常贊了。

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

總結

以上方式足夠在線上環(huán)境找出大多數(shù)bug，最后在本地把接口地址換成開發(fā)環(huán)境的地址，代碼改完后生產環(huán)境測試一遍，基本一步到位。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。