拋棄console.log()，擁抱瀏覽器Debugger

譯者按： 切換成本真的不高，建議使用開發者工具來Debug！

• 原文：How to stop using console.log() and start using your browser’s debugger
• 譯者: Fundebug

爲了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原做者全部，翻譯僅用於學習。

在我成爲一名開發者路上也掉進過一些坑，對於新手來講一個最大的挑戰就是debug。剛開始，我一度認爲在控制檯下使用console.log()打印變量是最棒的方法。而實際上，這樣作是至關低效的。我不怕大家嘲笑我，給大家分享一下我曾經是這麼幹的：

console.log(‘Total Price:’, total) // 查看total的值

console.log(‘Here’) // 打印Here來確認程序執行到這個地方

我想大多數開發者會意識到這不是你應該用來debug的方法，應該有更好的方案！ 幸運的是，瀏覽器的Debug工具很好用！在本文我會介紹谷歌開發者工具。

爲了更好地跟隨我理解這篇文章的內容，我建議你代開個人示例代碼跟着走。地址: 點擊這裏

第一步：復現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。正確的結果應該是39.6，可是計算器的結果倒是14105.09!

第二步：學習使用Source面板

你須要學會熟練使用開發者工具，你可使用快捷鍵Command+Option+I (Mac) 或則 Control+Shift+I (Linux)來打開。(或則右鍵，選擇檢查選項，就會彈出開發者面板)

當你點擊開發者面板最上面的source標籤，開發者面板會呈現三分的效果，分別是：文件導航器、源代碼編輯器以及最右側的Debug面板。

第三步：設置第一個斷點

在咱們設置斷點以前，我來給你演示若是使用console.log()是什麼效果：

若是你使用開發者工具，就不用寫一堆的console.log()了。咱們能夠設置斷點，經過單步調試來查看變量的值。

斷點就是一個你在代碼中添加標記，用來告訴瀏覽器執行到這個位置暫停。

咱們將會在整個程序的最開始設置一個斷點。

在最右側的Debugger面板，點擊"Event Listener Breakpoints"，展開"Mouse"，而後選中'click'。

如今若是咱們點擊Calculate Bill按鈕，程序會停在第一個函數"onClick()"。若是沒有執行到這裏，那麼點擊播放按鈕，總會跳到index的第6行。

第四步：單步調試

在整個Debug的過程當中，有兩種執行的方式：」step into"和「step over"。

「step into"會進入當前遇到的每個函數內部，而後一行一行執行； 「step over」則會跳過函數內部的細節，直接執行整個函數。

下面是一個展現例子，在右側的Scope下，全部局部變量的值都顯示出來了。

第五步：在某行設置斷點

能夠單步調試代碼是否是很棒？不過一步一步往下執行有點繁瑣。一般，我只想知道在某個位置變量的值，而不是要一步一步執行過去。咱們能夠在某一行去設置斷點。

做者備註：可以在代碼任意行設置斷點查看變量值是我中止使用console.log的主要緣由。

在文件的左側，顯示文件行數的位置點擊便可設置斷點。

注意：若是你發現沒法操做，請先清除掉以前選中的click選項。

你能夠看到，右側顯示subtotal的值爲10182，而且在代碼旁邊也顯示了變量的值。

我想已經知道BUG的緣由了：字符串拼接？

第六步：添加觀察表達式

這個一般用來觀察變量的值在程序的執行過程當中的變化，點擊右側的"watch"選項將其展開，你能夠輸入變量名或者表達式。

爲了演示起見，咱們觀察"entree 1"和"typeof entree1"。

經過查看entree1的類型，發現並非數字而是字符串。那麼問題就出在如何獲取這個值的。也許，querySelector()是問題的關鍵。

第七步：修復代碼

經過進一步檢查，肯定querySelector()就是問題所在。

如何修復呢？咱們可使用Number函數將字符串轉換爲數字，好比Number(getEntree1())。

爲了編輯代碼，你須要到「Elements"選項，它在」Sources"的左側。若是你沒有看到JavaScript代碼，你須要展開script標籤。 而後右鍵點擊選擇「edit as html"。

若是你創建了一個workspace，那麼代碼會直接保存。否則，可使用command+s (mac) 或則 control+s (linux)保存一份本地拷貝。

接下來，咱們再來試一試看看效果。

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，獲得了Google、360、金山軟件、百姓網等衆多知名用戶的承認。歡迎免費試用！

版權聲明

轉載時請註明做者Fundebug以及本文地址： https://blog.fundebug.com/2018/12/11/stop-using-console-log/