如何停止使用console.log()轉(zhuǎn)而使用瀏覽器debugger

原文地址：How to stop using console.log() and start using your browser’s debugger 原文作者：Parag Zaveri 譯者：noobakong

當(dāng)我開始成為一名軟件開發(fā)者的過程中，我確實遇到了很多困難。大多數(shù)新開發(fā)者面臨的最常見的問題就是調(diào)試(debugging)。起初，當(dāng)我意識到我可以打開瀏覽器的控制臺(console)然后console.log()出來值去尋找bug在哪的時候，我認(rèn)為我發(fā)現(xiàn)了圣杯。事實證明這是非常低效的。

為了幽默起見，舉幾個我最喜歡的例子：

console.log(‘Total Price:’, total) // 查看值是否已經(jīng)儲存console.log(‘Here’) // 判斷程序是否執(zhí)行某一個函數(shù) 復(fù)制代碼

我認(rèn)為大多數(shù)開發(fā)人員開始意識到這確實并不是實際中調(diào)試程序的方法。必須要有一個更好的辦法。

慶幸的是還真有，你的瀏覽器的調(diào)試工具。確切的說，我下面會詳Chrome開發(fā)者工具。

在本文中，在Chrome開發(fā)者工具里，我將介紹使用breakpoints（斷點），單步執(zhí)行代碼，設(shè)置監(jiān)聽表達(dá)式，以及專注于定位。

為了繼續(xù)學(xué)習(xí)本教程，您需要使用我創(chuàng)建的儲庫代碼示例（在線demo），點擊這里 (可能需要一點時間加載)

步驟1：重現(xiàn)Bug

我們首先執(zhí)行一系列的操作使其能一直重現(xiàn)Bug

在我們的例子中，我們將使用一個車載計費(fèi)器，如果你還沒有打開案例，請點擊這里

在Entree1處輸入12

在Entree2處輸入8

在Entree3處輸入10

在Tax處輸入10

在Tip處選擇20%

點擊Calculate Bill, 共計應(yīng)該是39.6，然而我們得到的是一個不同的結(jié)果，出現(xiàn)了14105.09… ！！！

注釋：這里不必糾結(jié)數(shù)字到底是多少的問題，就是和預(yù)期的不同就行了。

步驟2：學(xué)習(xí)使用Sources面板

為了在瀏覽器中調(diào)試，你需要習(xí)慣使用開發(fā)者工具(DevTools)，打開瀏覽器開發(fā)者工具，Mac 按 Command+Option+I，Linux 按 Control+Shift+I

為什么不用F12，啊哈哈。。

點擊面板上面的sources面板選項，你應(yīng)該可以訪問三個面板進(jìn)行調(diào)試。分別是文件導(dǎo)航，源代碼編輯器，調(diào)試面板。在進(jìn)行步驟3之前，點擊熟悉一下，享受一下樂趣。

步驟3：設(shè)置你的第一個斷點

在演示如何設(shè)置你的第一個斷點前，讓我先演示一下使用console.log()的用法。顯而易見的，在我們的程序只執(zhí)行的過程中，部分的計算是有問題的。可以這樣做來調(diào)試程序：

幸運(yùn)的是，在我們的瀏覽器開發(fā)工具里，這不再是必需的，相反，我們可以簡單地設(shè)置一個斷點并單步執(zhí)行代碼，在查看瀏覽器的時候找到值。

我們來談?wù)勅绾紊O(shè)置一個斷點。斷點是為了讓你的瀏覽器去尋找什么時候暫停你的代碼以允許你有調(diào)試它的機(jī)會的東西。

出于我們的目的，我們將通過設(shè)置鼠標(biāo)事件，以在我們程序執(zhí)行的第一步設(shè)置一個斷點。

在調(diào)試面板中展開Event Listener Breakpoints選項的視圖。再展開Mouse,選擇click按鈕。

現(xiàn)在當(dāng)你點擊頁面的Calculate Bill按鈕的時候，調(diào)試器將會在第一個onClick()方法的第一行暫停執(zhí)行，如果調(diào)試器在其他位置也有，點擊播放按鈕，調(diào)試器就會跳轉(zhuǎn)到它。

步驟4：單步執(zhí)行你的代碼

在所有的調(diào)試工具中，代碼執(zhí)行的過程中，導(dǎo)航中都會有兩個選項。用戶可以選擇step into 和 step over 中的一個去進(jìn)行操作函數(shù)運(yùn)行的下一步。

step into 是規(guī)定每個函數(shù)內(nèi)部逐個執(zhí)行每行代碼

step over 是規(guī)定跳過正在工作運(yùn)行的整個函數(shù)

注釋：這兩者的區(qū)別就是 step into: 遇到子函數(shù)就進(jìn)入并且繼續(xù)單步執(zhí)行 step over:在函數(shù)內(nèi)遇到子函數(shù)時不會進(jìn)入子函數(shù)內(nèi)單步執(zhí)行，而是將子函數(shù)整個執(zhí)行完在停止，也就是把子函數(shù)整個作為一步

下面是一個單步執(zhí)行我的代碼的例子，在Scope選項卡下，前三個entree的值展現(xiàn)在右邊

步驟5：設(shè)置第一行代碼斷點

真的~能夠一步一步的執(zhí)行你的代碼是不可思議的，但是有點龐大和累贅的，對吧？通常，我僅僅是只想知道某一區(qū)域的值。行代碼斷點，就是解決這一問題的方案。

代碼行斷點是我停止使用console.log()而選擇chrome開發(fā)工具的原因。簡單的點擊你想要看到更多信息的代碼的行數(shù)，就可以為其設(shè)置行代碼斷點。像往常一樣運(yùn)行代碼，程序就會在你設(shè)置行代碼斷點的位置停止而不是去單步執(zhí)行每個函數(shù)的每一行。

如果你遇到問題，請確保你已取消選中Mouse下的click選項

正如你看到的，我的subtotal值按照我的要求顯示為10812，我的幾個entree值也在Scope面板和代碼自身上的懸浮塊上展示了出來。

嗯emm。。 我想我也許找出來這個bug原因了，字符串拼接相關(guān)？？

讓我們設(shè)置一些監(jiān)聽表達(dá)式來確認(rèn)它。

步驟6：創(chuàng)建監(jiān)聽表達(dá)式

現(xiàn)在我們知道我們的entree值沒有正確的想加，讓我們?yōu)槊恳粋€值設(shè)置一個監(jiān)聽表達(dá)式。一個監(jiān)聽表達(dá)式能夠讓我們從代碼的任何表達(dá)式或者變量中獲取更多信息。

要確定監(jiān)聽的值，請單擊右邊面板的最上面的watch窗口，并且點擊+按鈕就可以輸入變量名或者其他表達(dá)式。

對于這個例子，我將會給我第一個entree和它的類型值設(shè)置watch

嗚呼，我想我找到問題所在了，看來我的第一個entree值是一個字符串形式存儲的。可能是我獲取它的時候有問題。也許，querySelector()是罪魁禍?zhǔn)住Ｆ渌膸讉€值也可能受到影響，讓我們在開發(fā)者工具中進(jìn)一步調(diào)試我們的代碼。

步驟7：修復(fù)代碼

從下面展示來看，querySelector()一定是罪魁禍?zhǔn)?#xff01;

那我們怎么來修復(fù)它呢？ 我們可以簡單使用Number(getEntree1())將字符串強(qiáng)制轉(zhuǎn)換成數(shù)字，如第74行所示。

為了實際編寫代碼，你需要到轉(zhuǎn)到sources面板左邊的elements面板。如果你看不見JavaScript代碼，請展開Script標(biāo)簽，在那里，右鍵點擊并選擇edit as HTML

如果你在工作環(huán)境下，那么保存代碼非常容易。如果你不是的，需要用Command+S或者control+S來保存網(wǎng)頁的本地副本，你可以打開它查看編輯更改。

好嘍~

Demo Code: github.com/paragzaveri…

其實作為一個前端開發(fā)人員，只會用console.log來調(diào)試代碼是非常低級的，雖然我也經(jīng)常用啊哈哈哈，這里翻譯一篇關(guān)于debugger入門級的文章，瀏覽器的debugger和編輯器(VSCODE等)的debugger完全一樣，可以嘗試著在開發(fā)中打一打斷點，體驗一下調(diào)試的樂趣。 附上我的個人博客和github，持續(xù)輸出，共同進(jìn)步。?

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的【译】如何停止使用console.log()转而使用浏览器debugger的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。