Chrome搜前端的接口代碼： 
譯者按： 手把手教你擺脫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 - 敲擊回車鍵。開發者面板會顯示
typeof sum: "string"。
正如我們推測：sum的類型是字符串。
console.log的另一個替代品是直接使用Console。我么可以使用Console來執行任意的JavaScript表達式。開發者通常使用Console來重寫變量值來debug。我們可以使用Console來驗證可能的解決方案。
- 如果
Console沒有顯示出來，敲擊ESC鍵來打開。它會在開發者面板的最下方打開。 - 在
Console中輸入parseInt(addend1) + parseInt(addend2) - 敲擊回車鍵，輸出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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！