[譯]如何中止使用 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。