如何停止使用console.log並開始用瀏覽器的debugger
ping-using-console-log-and-start-using-your-browsers-debugger-62bc893d93ff" rel="nofollow,noindex">原文
當我開始我的軟體開發工程師之旅時，發現在這個過程中經歷了許多困難。其中一個最常見的困難就是每個新手都會遇到的-除錯。起初，當我發現可以開啟控制檯檢視console.log()輸出的值以定位bug，我像是發現聖地一樣哈皮。但是這種方法是低效的。來幾個我喜歡並且比較幽默的例子：
console.log(‘Total Price:’, total) //In an effort to see if the value was stored console.log(‘Here’) //If my program execution reached a certain function 複製程式碼
我想大多數開發者開始意識到這並不是除錯你程式的好方法。還有更好的方式。
這個好方法就是瀏覽器的除錯工具。在本文中，我使用chrome開發者工具。
在這篇文章中，我將介紹如何使用斷點，單步執行程式碼，設定監視表示式以及在Chrome開發者工具中應用修復程式。
為了更好地完成本教程，你需要使用我的例項程式碼。點選這裡(需要翻牆)
第一步：重現bug
我們首先執行一系列會出bug的操作。
1、在本例中，我們使用有bug的小費計算器。
2、在‘Entree1’輸入12
3、在‘Entree2’輸入8
4、在‘Entree3’輸入10
5、在‘Tax’輸入10
6、在‘Tip’處選擇20%
7、點選計算賬單按鈕，一共應該是39.6，然而，我們得到不同的答案，結果是14105.09。。。yikes！
第二步：學習使用資源面版
在chrome中除錯，你需要開啟開發者工具。按下Command+Option+I (Mac) 或者 Control+Shift+I (Linux)就可以打開了.
開啟資源面版，如上圖。檔案導航欄、原始碼編輯器、除錯欄。在第三步之前熟悉熟悉吧。
第三步：設定你的斷點
在使用斷點之前，讓我先用console來除錯。很明顯，可以通過以下操作來除錯：
幸運的事，在瀏覽器上不需要再像這樣開發了。相反，我們可以設定斷點一步一步地看我們程式碼的執行情況。
來看看如何設定斷點，斷點是瀏覽器查詢的內容，以便知道何時暫停程式碼的執行並允許您有機會對其進行除錯。
出於教學目的，我們使用設定滑鼠事件在程式的最開始設定斷點。
在偵錯程式那一欄上，展開“事件偵聽器斷點”的檢視。 從那裡，展開“滑鼠”。 然後勾選“點選”按鈕。
現在，當你單擊Calculate Bill按鈕時，偵錯程式將在第一個函式“onClick（）”的第一行暫停執行。 如果偵錯程式位於其他任何位置，請按下播放按鈕，偵錯程式將跳過它。
第四步：開始除錯
在所有除錯工具中，都有兩個執行程式碼的按鈕。開發者可以進入函式裡面或者跳過函式。
不遺漏每一個方法的每一行程式碼。
跳過方法
這是我單步執行程式碼的示例。 在範圍選項卡下，前三個輸入框的值顯示在右側。
第五步：在行數那裡設定斷點
真是太好用了，但是有個問題。這樣設定斷點有點太笨了，通常我們只需要在某個地方檢視。有個好的方法，可以在某一行的行數那裡設定斷點
作者的畫外音：這個功能讓我徹底拋棄console方法並愛上了除錯工具。
只要點選程式碼行號就可以設定程式碼行斷點了。然後執行你的程式碼，偵錯程式就會停在你設定斷點的地方。
提示：如果遇到問題，請確保取消選中滑鼠下的單擊複選框。
如你所見，我的subtotal值顯示為“10812”。我的entree值在面板顯示了出來並且也計算出來了。
emmm。。。似乎是進行了字串拼接。
讓我們再看幾個表示式搞清楚整個流程。
第六步：建立監視表示式
現在我們知道我們的entree值並沒有正確加在一起，讓我們在每一個值上設定監視表示式。
監視表示式將提供有關程式碼中任何給定變數或表示式的更多資訊。
要將值定義為“監視”，請單擊最頂部的監視窗格，並在開啟後單擊+符號。 在這裡，你可以鍵入變數名稱或其他表示式。
在這個例子中，我將設定在我第一個entree值上監視值和型別。
Aha！我想我找到bug了。我的第一個值儲存為字串！似乎是querySelector方法搞的鬼。也可以搞搞其他的值。讓我們更進一步除錯然後在DevTools中改我們的程式碼。
第七步：修復
經過進一步的審查，querySelector方法絕對是罪魁禍首。
那麼我們如何解決這個問題呢？ 好吧，我們可以簡單地使用例如Number（getEntree1（））將字串強制轉換為數字值，如第74行所示。
為了實際編輯程式碼，您需要轉到'sources'左側的'elements'面板。 如果您看不到javascript程式碼，則需要擴充套件指令碼標記。 從那裡，右鍵單擊程式碼並選擇“編輯為html”。
如果你使用的是工作區，則可以輕鬆儲存程式碼並立即檢視。如果不是，則需要使用名令command+s (mac) or control+s (linux)來儲存。
然後你可以看你的原生代碼的變化。
小老弟你康康～～
本文的除錯方法受到Kayce Basques這篇文章的啟示.
Demo: github.com/paragzaveri…