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

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

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

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

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

我認為大多數開發人員開始意識到這確實并不是實際中調試程序的方法。必須要有一個更好的辦法。

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

在本文中，在Chrome開發者工具里，我將介紹使用breakpoints（斷點），單步執行代碼，設置監聽表達式，以及專注于定位。

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

步驟1：重現Bug

我們首先執行一系列的操作使其能一直重現Bug

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

在Entree1處輸入12

在Entree2處輸入8

在Entree3處輸入10

在Tax處輸入10

在Tip處選擇20%

點擊Calculate Bill, 共計應該是39.6，然而我們得到的是一個不同的結果，出現了14105.09… ！！！

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

步驟2：學習使用Sources面板

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

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

點擊面板上面的sources面板選項，你應該可以訪問三個面板進行調試。分別是文件導航，源代碼編輯器，調試面板。在進行步驟3之前，點擊熟悉一下，享受一下樂趣。

步驟3：設置你的第一個斷點

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

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

我們來談談如何生設置一個斷點。斷點是為了讓你的瀏覽器去尋找什么時候暫停你的代碼以允許你有調試它的機會的東西。

出于我們的目的，我們將通過設置鼠標事件，以在我們程序執行的第一步設置一個斷點。

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

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

步驟4：單步執行你的代碼

在所有的調試工具中，代碼執行的過程中，導航中都會有兩個選項。用戶可以選擇step into 和 step over 中的一個去進行操作函數運行的下一步。

step into 是規定每個函數內部逐個執行每行代碼

step over 是規定跳過正在工作運行的整個函數

注釋：這兩者的區別就是 step into: 遇到子函數就進入并且繼續單步執行 step over:在函數內遇到子函數時不會進入子函數內單步執行，而是將子函數整個執行完在停止，也就是把子函數整個作為一步

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

步驟5：設置第一行代碼斷點

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

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

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

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

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

讓我們設置一些監聽表達式來確認它。

步驟6：創建監聽表達式

現在我們知道我們的entree值沒有正確的想加，讓我們為每一個值設置一個監聽表達式。一個監聽表達式能夠讓我們從代碼的任何表達式或者變量中獲取更多信息。

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

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

嗚呼，我想我找到問題所在了，看來我的第一個entree值是一個字符串形式存儲的。可能是我獲取它的時候有問題。也許，querySelector()是罪魁禍首。其他的幾個值也可能受到影響，讓我們在開發者工具中進一步調試我們的代碼。

步驟7：修復代碼

從下面展示來看，querySelector()一定是罪魁禍首！

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

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

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

好嘍~

Demo Code: github.com/paragzaveri…

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。