[譯]如何停止使用 console.log() 並開始使用瀏覽器除錯程式碼

• 原文地址：How to stop using console.log() and start using your browser's debugger
• 原文作者：Parag Zaveri
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：Augustwuli
• 校對者：Raoul1996, Marszht

在我開始軟體開發者之旅時，我在這條路上遇到了很多顛簸。大多數新人要面對的最常見的困難之一就是除錯程式碼。 起初，當我意識到我可以開啟 Chrome 瀏覽器的控制檯，並且通過使用 console.log() 輸出變數值去找到 bug 在哪的時候，我覺得我發現了聖盃。但是使用這個方法除錯程式碼非常的低效。出於幽默, 這裡列舉了一些我喜歡使用的例子：

console.log(‘Total Price:’, total) //為了看值是否已經被變數儲存了

console.log(‘Here’) //判斷程式是否執行到某一個確切的函式

我認為大多數開發者開始意識到用這個辦法去除錯你的程式是不大行得通。這兒有更好的方法去除錯你的程式！

令人萬分感謝的是使用你的瀏覽器除錯工具。我將會在下文單獨詳細介紹 Chrome 的開發者工具。

在本篇文章中，我會提到以下內容：在 Chrome 開發者工具中使用斷點、跟蹤程式碼、設定監測表示式和應用修復程式。

為了能夠跟上我的對 Chrome 開發者工具的介紹，你需要使用我寫的一個簡單的例子。 點選連結（可能會花一點時間載入它）

Step 1：重現 Bug

我們通過執行一系列的操作開始重現 bug。

1. 在這個案例中，我們將使用一個輕便的小費計算器重現 bug。如果你還沒有開啟這個例子的連結。請點選這裡。
2. 在 ‘Entree 1’ 中輸入 12
3. 在 ‘Entree 2’ 中輸入 8
4. 在 ‘Entree 3’ 中輸入10
5. 在 ‘Tax’ 中輸入 10
6. ‘Tip’ 選擇 20%
7. 點選 Calculate Bill。計算得到的 Total Plus Tip 應該是 36.3（譯者注：此處我去看過作者原部落格了，這篇部落格之前計算結果有問題，後來作者修改了程式碼，真正的結果是 36.3，所以結果和圖片的結果是不一樣的），然而我們得到了一個差別很大的結果。呀！結果居然顯示的是 15500.1。

Step 2：學習使用 Sources 皮膚

要在 Chrome 瀏覽器中除錯程式碼，你得習慣使用開發者工具。你可以按快捷鍵 Command+Option+I（Mac）和 Control+Shift+I（Linux）開啟 Chrome 開發者工具。

在點選開發者工具頂部的 sources 皮膚之後，你應該使用出現的這三個皮膚來除錯程式碼：檔案導航欄、原始碼編輯器和除錯視窗。你可以在開始 Step 3 之前任意點選這些皮膚。

Step 3：設定你的第一個斷點

在向你展示如何設定你的第一個斷點之前，讓我先展示我說的使用 console.log() 函式除錯程式碼是什麼意思。很清楚的是，當我們的程式在執行的時候，在計算 subtotal 的時候做了一些事情。其中我們可以按如下操作除錯程式：

幸運的是用這個方法不再需要使用瀏覽器開發者工具。但我們能通過簡單地設定一個斷點並且跟蹤程式碼而用瀏覽器發現設定的所有值。

讓我們談論如何設定一個斷點吧！斷點是為了讓瀏覽器知道什麼時候暫停執行並且可以讓你有機會去除錯程式碼。

為了我們能夠除錯程式碼，我們在程式執行開始之前通過設定一個滑鼠事件來設定斷點。

在除錯視窗的最下面有個“Event Listener Breakpoints”。開啟它，並且在展開的列表中開啟“Mouse”列表，選擇 ‘click’。

現在當你點選 Calculate Bill 按鈕後，偵錯程式將在第一個繫結了“onClick()”的函式的第一行程式碼的位置暫停執行。如果偵錯程式在任何其他地方，點選 Calculate Bill 按鈕後偵錯程式都會跳到該位置。

Step 4：跟蹤你的程式碼

在所有的除錯工具中，使用者可以使用導航欄的兩個選項通過執行中的程式碼。使用者可以選擇“進入”或者“跳過”下一個函式回撥。

進入，意味著能夠依次進入每一行程式碼呼叫的每一個函式。

圖示為進入下一個函式回撥的按鈕。

跳過，意味著跳出已知正在執行的整個的函式。

圖示為跳過下一個函式回撥的按鈕。

這兒有一個跟蹤程式碼的例子。在除錯視窗的 Scope 標籤下，我起初設定的三個 entree 的值都被列出來了。

Step 5：設定程式碼行的斷點

哇哦！能夠跟蹤你的程式碼真是令人大吃一驚，但是有一點麻煩對吧？一般情況下，我只想知道在確切的地方的變數值是多少。解決這個問題的更好的辦法就是設定程式碼行的斷點。

作者注：設定程式碼行的斷點就是我為什麼用 Chrome 開發者工具取代使用 console.log() 函式除錯程式碼的原因。

為了設定程式碼行的斷點，只需要簡單地點選程式碼的行數，然後你就可以看到更多關於該行程式碼的資訊。之後你可以像往常一樣跑起你的程式碼，偵錯程式將會在你設定程式碼行斷點的地方停下來跟蹤或者跳過每一個函式。

標註：如果你遇到了麻煩，請確認你已經取消了在前面已經選擇的滑鼠的 click 事件

正如你看見的那樣，顯示得到 subtotal 的值是“10812”。在程式碼被執行到所有 entree 變數的時候，設定的 entree 的值也在 scope 標籤下被列了出來 。

嗯...我認為我已經向你指出了 bug。字串連線了所有的變數?

讓我們設定監測表示式來確認這個想法吧！

Step 6：建立監測表示式

到目前我們已經很明確地知道了這些 entree 變數並沒有被正確地加起來，讓我們在每一個 entree 變數上都設定監測表示式。

一個監測表示式能提供更多關於程式碼中的變數或者表示式的資訊。

為了“監測”被宣告的值，請點選在除錯視窗頂部的 watch 標籤，然後在開啟的皮膚中點選 + 號。你可以在這裡寫下變數名或者其他的表示式。

通過下面這個 demo，我將監測第一個 entree 的值並且使用 type of 來發現 entree 變數的型別。

啊哈！我覺得我已經發現了問題。問題出在了我定義的第一個 entree 變數儲存了 string 型別的值。這個問題似乎來自於我是如何得到這個值的。querySelector() 或許是罪魁禍首。其他的幾個變數值可能也收到了影響。讓我們移步到在開發者工具中修改程式碼進一步除錯吧！

Step 7：修復你的程式碼

讓我們回到程式碼中，querySelector() 一定是罪魁禍首!

所以我們應該如何修改它呢？我們可以強制將 string 轉換成 number 型別。例如，在 74 行將程式碼改成 Number(getEntree1())。

為了能夠實際編輯程式碼，你將需要到 ‘sources’ 皮膚左邊的 ‘elements’ 皮膚下。如果你不能看到 javascript 程式碼，你需要展開 script 標籤。在這裡點選滑鼠右鍵並選擇 ‘edit as html’。

你過你正在使用 workspace，可以很方便地儲存程式碼並馬上看到效果。如果不是的話，你需要使用 command+s (mac) 或者 control+s (linux) 儲存這個 web 頁面的本地副本。

至此，你可以開啟本地副本並檢視修改後的變化。

瞧！

---

這個由 Kayce Basques 在 Get Started with Debugging Javascript in Chrome DevTools 描述的除錯方法已經被收錄在 developers.google.com 了。

Demo Code: github.com/paragzaveri…

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。