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

小編推薦: Fundebug提供JS、微信小程序、微信小游戲,Node.js和Java錯誤監控。真的是一個很好用的錯誤監控服務,眾多大佬公司都在使用。

為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用于學習。

在我成為一名開發者路上也掉進過一些坑,對于新手來說一個最大的挑戰就是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累計處理了10億+錯誤事件,付費客戶有Google、360、金山軟件、百姓網等眾多品牌企業。歡迎大家免費試用

您可能感興趣的

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。