JavaScript代碼調試方法總結

沒有調試工具是很難去編寫 JavaScript 程式的;你的代碼可能包含文法錯誤，邏輯錯誤，如果沒有調試工具，這些錯誤比較難于發現;通常，如果 JavaScript 出現錯誤，是不會有提示資訊，這樣你就無法找到代碼錯誤的位置

在程式代碼中尋找錯誤叫做代碼調試。調試很難，但幸運的是，很多浏覽器都内置了調試工具;内置的調試工具可以開始或關閉，嚴重的錯誤資訊會發送給使用者

浏覽器啟用調試工具一般是按下 F12 鍵，然後通過console調試

Console 是用于顯示 JS和 DOM 對象資訊的單獨視窗。并且向 JS 中注入1個 console 對象，使用該對象 可以輸出資訊到 Console 視窗中

有了調試工具，我們就可以設定斷點 (代碼停止執行的位置), 且可以在代碼執行時檢測變量

console對象的方法，都可以使用printf風格的占位符。不過，占位符的種類比較少，隻支援字元（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種

%o占位符，可以用來檢視一個對象内部情況

還有一種特殊的标示符%c，對輸出的文字可以附加特殊的樣式，當進行大型項目開發的時候，代碼中可能有很多其他開發者添加的控制台語句

使用頻率最高的一條語句：向控制台輸出一條消息。支援 C 語言 printf 式的格式化輸出。當然，也可以不使用格式化輸出來達到同樣的目的：

向控制台輸出一條資訊，它包括一個指向該行代碼位置的超連結。

向控制台輸出一條資訊，該資訊包含一個表示“資訊”的圖示，和指向該行代碼位置的超連結。

在控制台輸出一條消息，包含一個指向代碼調用位置的超連結。假如是直接在控制台輸入該指令，就不會出現超連結（和console.log()一樣）

在控制台輸出一條帶有“警告”圖示的消息和一個指向代碼調用位置的超連結

在控制台輸出一條帶有“錯誤”圖示的消息和一個指向代碼調用位置的超連結。error 實際上和 throw new Error() 産生的效果相同，使用該語句時會向浏覽器抛出一個 js 異常。

接收至少兩個參數，第一個參數的值或傳回值為false的時候，将會在控制台上輸出後續參數的值

輸出一個對象的全部屬性（輸出結果類似于 DOM 面闆中的樣式）。直接将該DOM結點以DOM樹的結構進行輸出，可以詳細查對象的方法發展等等

用來顯示網頁的某個節點（node）所包含的html/xml代碼，輸出一個 HTML 或者 XML 元素的結構樹，點選結構樹上面的節點進入到 HTML 面闆

console.trace()用來追蹤函數的調用過程。在大型項目尤其是架構開發中，函數的調用軌迹可以十分複雜，console.trace()方法可以将函數的被調用過程清楚地輸出到控制台上

這是個有趣的方法，它能夠讓控制台輸出的語句産生不同的層級嵌套關系，每一個console.group()會增加一層嵌套，相反要減少一層嵌套可以使用console.groupEnd()方法

和console.group()相似的方法是console.groupCollapsed()作用相同，不同點是嵌套的輸出内容是折疊狀态，在有大段内容輸出的時候使用這個方法可以使輸出版面不至于太長

關閉最近一個由console.group打開的塊

同 console.group(); 差別在于嵌套塊預設是收起的。

建立一個名字為name的計時器，當調用 console.timeEnd(name);并傳遞相同的 name 為參數時，計時停止，并輸出執行兩條語句之間代碼所消耗的時間（毫秒）。

停止同名的計時器并輸出所耗時間（毫秒）

這是個挺高大上的東西，可用于性能分析。在 JS 開發中，我們常常要評估段代碼或是某個函數的性能。在函數中手動列印時間固然可以，但顯得不夠靈活而且有誤差。借助控制台以及console.profile()方法我們可以很友善地監控運作性能；與 profileEnd() 結合使用，用來做性能測試，與 console 面闆上 profile 按鈕的功能完全相同。

頁面加載過程的性能優化是前端開發的一個重要部分，使用控制台的 profiles 面闆可以監控所有 JS 的運作情況使用方法就像錄像機一樣，控制台會把運作過程錄制下來

關閉Javascript性能測試開關并輸出報告

在Profiles面闆裡面檢視就可以看到cpu相關使用資訊

當你想統計代碼被執行的次數時，輸出該行代碼被執行的次數，參數 title 将在輸出時作為輸出結果的字首使用。

可将傳入的對象，或數組以表格形式輸出，相比傳統樹形輸出，這種輸出方案更适合内部元素排列整齊的對象或數組，不然可能會出現很多的 undefined

清空控制台

大家一用就知曉。比如用上鍵就相當于使用上次在控制台的輸入符号

指令傳回最近一次表達式執行的結果，功能跟按向上的方向鍵再回車是一樣的

在頁面右擊選擇審查元素，然後在彈出來的DOM結點樹上面随便點選，這些被點過的節點會被記錄下來，而$0會傳回最近一次點選的DOM結點，以此類推，$1傳回的是上上次點選的DOM節點，最多儲存了5個，如果不夠5個，則傳回undefined

也就是說你可以用$加上熟悉的css選擇器來選擇DOM節點

通過此指令可以将在控制台擷取到的内容複制到剪貼闆

前者傳回傳入對象所有屬性名組成的資料，後者傳回所有屬性值組成的數組

monitor & unmonitor

monitor(function)，它接收一個函數名作為參數，比如function a,每次a被執行了，都會在控制台輸出一條資訊，裡面包含了函數的名稱a及執行時所傳入的參數。而unmonitor(function)便是用來停止這一監聽

也就是說在monitor和unmonitor中間的代碼，執行的時候會在控制台輸出一條資訊，裡面包含了函數的名稱a及執行時所傳入的參數。當解除監視（也就是執行unmonitor時）就不再在控制台輸出資訊了

控制台的輸出面闆右邊，是控制台的輸入面闆（Chrome 調試工具對應為下方），在這裡除了可以運作正常的 javascript 代碼，還内置了相當數量的指令行可以輔助我們的調試工作，下面是一些常用指令行的簡單介紹。

傳回一個給定 id 的元素。

傳回給定的 css 選擇器比對到的一組元素。

傳回給定的 XPath 表達式比對到的一組元素。

在 HTML 面闆中選中的元素。

上一次在 HTML 面闆中選中的元素。

通路最近 5 個被選中過的元素，index 的範圍： 0 – 4。

同 console.dir(object)。

同 console.dirxml(node)。

同 console.clear()。

在合适的（或一個指定的） tab 中檢視一個對象。

傳回一個對象的所有屬性的鍵。

傳回一個對象的所有屬性的值。

在函數第一行添加一個斷點，使用 undebug(fn) 移除斷點。

開啟一個函數的調用日志，使用 unmonitor(fn) 關閉該功能。非常有用的一個指令，但是它似乎并沒有很好地工作。

開啟一個元素的某個事件（或所有事件）被觸發時的日志記錄。用例如下：

上面的指令行被執行後，将開啟目前在 HTML 面闆中被選中元素的 click 事件監控，一旦這個元素的 click 事件被觸發，事件對象将會在控制台輸出。如果不指定第二個參數，将對所有事件進行記錄。

同 console.profile([title])

在這裡，我們可以使用快捷鍵進行操作，常用的快捷鍵如下：

F9：添加/移除 斷點

F10：逐過程，即跳過該語句中的方法、表達式等

F11：逐語句調試，即單步調試，會跳入方法、表達式，進行逐語句的跟蹤調試

斷點調試其實并不是多麼複雜的一件事，簡單的了解無外呼就是打開浏覽器，打開sources找到js檔案，在行号上點一下罷了

假設我們現在正在實作一個加載更多的功能出現了問題，點選以後資料沒有加載出來，這時候我們第一時間想到的應該是什麼？

我最先想到的是，我點選到底有沒有成功？點選事件裡的方法有沒有運作？好，要想知道這個問題的答案，我們當然是在代碼中的點選事件處添加一個斷點，然後做什麼呢？然後我們當然是回去點選加載更多按鈕來确定是否有問題啦

這種方法很簡單，我們隻需要在進行調試的地方加入debugger關鍵字，然後當浏覽器運作到這個關鍵字的時候，就會提示是否打開調試，我們選擇是就可以了。這種調試可以選擇調試工具，是新打開vs還是在現有的VS中調試，都可以選擇

debugger 關鍵字用于停止執行 JavaScript，并調用調試函數;這個關鍵字與在調試工具中設定斷點的效果是一樣的;如果沒有調試可用，debugger 語句将無法工作;下面例子開啟 debugger ，代碼在第三行前停止執行

通常，浏覽器啟用調試工具一般是按下 F12 鍵，并在調試菜單中選擇 "Console"

各浏覽器的步驟如下:

打開浏覽器 - 在菜單中選擇工具 - 在工具中選擇開發者工具 - 最後，選擇 Console