譯者按： 手把手教你擺脫console.log，掌握高階的debug方法。
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。
作為一個剛入門的開發者，找到BUG的根源並修復通常要花費不少功夫。往往會嘗試在程式碼中隨機用console.log列印變數值來尋找問題。
這篇文章教會你正確的Debug姿勢。你將會學會使用谷歌開發者工具(Chrome Developer Tools)來設定斷點並單步執行程式碼。相比於列印日誌，這樣會高效得多。
本文針對一種特定型別的問題來演示如何使用谷歌開發者工具Debug，該方法同樣適用於其它通用問題。
第一步：復現BUG
Debugging的第一步往往是復現bug。“復現BUG”是指找到一個行為序列可以100%觸發bug。你需要復現bug很多遍，因此，儘量消除不必要的步驟。
參照下面的流程來複現這篇文章將要修復的一個bug：
- 這裡有一個我們要使用到的網頁。在新的標籤開啟它：開啟Demo
- 在
Number 1的輸入框輸入5 - 在
Number 2的輸入框輸入1 - 點選
Add Number 1 and Number 2按鈕 - 在下方會輸出
5 + 1 = 51
應該輸出為6, 而不是51。
Fundebug的JavaScript錯誤監控外掛能夠捕獲各種前端BUG，並且記錄使用者行為，可以幫助你及時發現和復現BUG。
第二步：使用斷點來暫停程式碼執行
谷歌開發者工具可以讓你終端程式碼執行，並檢視此時所有的變數值。用來中斷執行的工具叫做breakpoint。如下操作：
- 回到Demo頁面，開啟開發者工具(Mac: Command + Option + I, Window, Linux: Control + Shift + I)。
- 點選
Source標籤 - 點選
Event Listener Breakpoints，將裡面的內容展開。開發者工具會展開一列，其中包含Animation，Clipboard - 將滑鼠移到
Mouse前面, 點選三角展開裡面的內容 - 選中
click
- 回到demo，點選
Add Number 1 and Number 2。開發者工具會將Demo的執行暫停，並且在Source部分高亮如下程式碼：
function onClick() {
|
為什麼？
當你在Event Listener Breakpoints選擇了Mouse click, 那麼所有的點選事件都會被設定斷點。因此，任何一個節點被點選，並且該節點有定義點選事件，那麼開發者工具(DevTools)會自動在該點選事件Handler的第一行處暫停。
第三步：單步執行除錯程式碼
一個常見的bug是：指令碼的執行順序錯誤。單步除錯讓你一步一步跟著程式碼的執行邏輯走，一次移動一行程式碼，那麼你就會清楚程式碼是按照哪個的順序執行的。我們來試一下：
- 在開發者工具的
Source皮膚，點選第三個(Step into next function call)，
Step into next function call該按鈕引導你單步執行定義的點選事件，一次一行。點選後，第15行程式碼高亮：
- 現在點選第二個(Step over next function call)按鈕
Step over next function call該按鈕會跳過當前要執行的函式inutsAreEmpty，而不是進入該函式。同時直接跳到第19行，因為當前輸入框不為空。
這就是單步除錯程式碼的基本思路。如果你仔細閱讀get-started.js，會發現bug可能就隱藏在updateLabel函式的某個地方。除了使用單步除錯以外，你還可以使用另一種斷點。
第四步：設定另一個斷點
如果你想在某一行設定斷點，可以使用行斷點(line-of-code breakpoint)。
-
找到
updateLabel函式的最後一行，label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
在程式碼的左邊，你可以看到顯示的行號32。點選32，開發者工具會在行號出顯示一個藍色的標記。該標記表示行斷點設定成功。程式碼總會在執行到這一行的時候中斷。
- 點選第一個
Resume script execution按鈕
Resume script execution button程式碼會持續執行到第32行。
-
在左側，
Local部分已經將addend1，addend2和sum的值都顯示出來了。你就會發現它們都是字串，字串相加就是將它們拼接起來，然而我們想要的是數字求和。
第五步：檢查變數值
另一個常見的情況就是變數或則函式的返回值和期望值不一樣。很多開發者都使用console.log來檢視值的變化，但是使用console.log很麻煩而且非常低效。首先，你需要手動新增很多console.log，其次，在你還不清楚哪個變數會引發bug之前，你需要把很多變數值列印出來。
谷歌開發者工具一個很好的功能就是觀察表示式(Watch Expressions)，可以一直監控變數值的變化。觀察表示式不僅可以用於觀察變數值，你可以用來監控任意表示式。我們來試一試：
- 在開發者皮膚下的
Source皮膚，點選Watch,展開裡面的內容(初次展開為空)。 - 點選右側的+號(
Add Expression)
Add Expression button- 輸入
typeof sum - 敲擊Enter鍵。開發者皮膚會顯示
typeof sum: "string"。
正如我們推測：sum的型別是字串。
console.log的另一個替代品是直接使用Console。我麼可以使用Console來執行任意的JavaScript表示式。開發者通常使用Console來重寫變數值來debug。我們可以使用Console來驗證可能的解決方案。
- 如果
Console沒有顯示出來，敲擊ESC鍵來開啟。它會在開發者皮膚的最下方開啟。 - 在
Console中輸入parseInt(addend1) + parseInt(addend2) - 敲擊Enter鍵，輸出6。
第六步：修復BUG
我們已經找到了潛在的修復方案，無需離開開發者皮膚，我們可以直接在開發者皮膚編輯原始碼。
- 在開發者工具的
Source皮膚，將原始碼中var sum = addend1 + addend2替換為var sum = parseInt(addend1) + parseInt(addend2);。 - 儲存改動(Mac: Command + S, Window, Linux: Control + S)。
- 點選第五個
Deactivate breakpoints按鈕
Deactivate breakpoints button該按鈕取消所有設定的斷點。
- 點選第一個
Resume script execution按鈕
Resume script execution button輸入不同的值試一試，看看是否可以正常執行。
本文脫胎於Kayce Basques的一篇文章Get Started with Debugging JavaScript in Chrome DevTools。
https://blog.fundebug.com/2017/10/25/learn-how-to-debug-js-with-chrome-devtools/
Google優化工具Timeline的使用（Chrome 57已經改為performance（效能模板））
前期學習基本一些前端知識搭一下頁面但是現在越來越注重網頁效能的優化。
通過什麼看網頁導致了效能問題呢？ 通過介紹並使用performance進行效能的除錯。
1.首先看看一看performance能夠整理什麼網頁資料
如圖第一個模組（Control窗格）是點選開始錄製，停止，clear。
第二個模組（OverView窗格）右側提示了FPS（幀頻，流暢度），CPU的消耗，NET，HEAP（JavaScript堆記憶體）
FPS。每秒幀數。綠色豎線越高，FPS 越高。 FPS 圖表上的紅色塊表示長時間幀，很可能會出現卡頓。
2.Cpu.CPU資源
3.NET.每條彩色橫杆表示一種資源，橫杆越長，檢索資源所需要的時間越長，每個橫杆的淺色部分表示等待時間（請求資源到第一個位元組下載完成時間）、
HTML檔案是藍色。指令碼是黃色。樣式是紫色。媒體檔案是綠色。其它資源是灰色。
4.底下的summary，Details，選擇時間顯示該事件相關的資訊，未選擇事件時，此窗格會顯示選定時間範圍的相關資訊。
細節：保證錄製的檔案很純粹（簡短，沒有不必要的操作，停止瀏覽器快取，停用擴充套件程式（使用隱身登入））
第三個模組（火焰圖）（第二個模組可以控制範圍選擇讀取網頁過程中的頁碼）（藍線代表DOMContentLoaded事件，綠線首次繪製的時間，紅線代表load事件）
Network 檢視網路請求 interaction 基本的互動，mouseover,mouseon.
---------------------
作者：Hank23333
來源：CSDN
原文：https://blog.csdn.net/qq_26878975/article/details/74638018
版權宣告：本文為博主原創文章，轉載請附上博文連結！