【譯】如何中止使用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

1. 在咱們的例子中，咱們將使用一個車載計費器，若是你尚未打開案例，請點擊這裏
2. 在Entree1處輸入12
3. 在Entree2處輸入8
4. 在Entree3處輸入10
5. 在Tax處輸入10
6. 在Tip處選擇20%
7. 點擊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，持續輸出，共同進步。🚲