【譯】如何停止使用console.log()轉而使用瀏覽器debugger
如何停止使用 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 ，持續輸出，共同進步。:bike: