前言

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

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

一、定位js代碼并標(biāo)記dbug

首先F12打開控制臺，然后選擇'Sources'選項(xiàng)卡，在Sources面板中選擇要調(diào)試的文件，在右側(cè)會打開該文件，瀏覽找到要調(diào)試的JavaScript代碼，點(diǎn)擊代碼行號，設(shè)置dbug；

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

二、格式化顯示的JS代碼

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

三、跳轉(zhuǎn)到下一個dbug/單步運(yùn)行/步入行數(shù)內(nèi)部

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

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

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

四、查看變量的值

鼠標(biāo)移到變量上面，就會顯示變量的內(nèi)容，右側(cè)調(diào)試面板中的Scope中也可以看到局部變量的內(nèi)容。

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

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

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

六、利用Call Stack查看代碼的層次關(guān)系以及Breakpoints查看所有斷點(diǎn)

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

七、最重要的一點(diǎn)--在Console中顯示和改變變量值

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

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

總結(jié)

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

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