姓名：田皓明
學號：14310116025
轉載自公眾號CSDN技術頭條
【嵌牛導讀】：本文介紹了如何Debug JavaScript代碼的方法和技巧
【嵌牛鼻子】：JavaScript,Debug
【嵌牛提問】：作為Java初學者，如何Debug JavaScript代碼，需要注意什么？
譯者按：從alert到debugger;看看你屬于哪個段位。為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用于學習。
作者 |?Julie Pagano
翻譯 |?Fundebug
我常常看到不少開發者不懂如何Debug JavaScript代碼，因此決定寫一篇博客為初學者介紹如何Debug。我希望這篇文章可以提供一些有用的信息。我嘗試在本文講述很多內容，所以有些部分并沒有講得很細。
在開始之前，做一些基本的準備：
這是針對瀏覽器運行的JavaScript，而不是Node.js；
你需要有一定的編寫JavaScript的基礎；
你需要在概念上知道Debug是什么；
你最好動起手來，邊看邊操作。
注意：1. 你最好打開兩個窗口，一邊看一邊操作來學習；2. 本文的主要目的是教會你debug，文中的JavaScript代碼并不規范，不要學壞啦。
警告(alert)
使用警告(alert)會彈出一個對話框顯示特定的警告信息，并且有一個OK按鈕。如果你點擊OK，該對話框消失。
alert("Hello! I am an alert.");
這一招蠻有用的，你可以將想要查看的值通過alert顯示出來。
// 通過alert來確認代碼執行的位置
alert("I am here!");
// 顯示foo的值
alert("Foo: " + foo);
但如果你不小心將alert放在了for循環中，那就慘了。我曾經就遇到過，不得不強行將瀏覽器關閉。
// 除非你喜歡alert, 不要這樣做！
for (i = 0; i < 100; i++) {
? alert(i);
}
好在，如今的谷歌瀏覽器已經幫你考慮到這一點。如果你不小心弄出了很多alert，谷歌瀏覽器會識別出來并建議你將它們都阻止。
曾經，alert是大家非常常用的debug工具。不過，使用alert局限性太大，它只能顯示字符串。
// 顯示所有的h2標簽內容
alert($('h2'));
然而，并不會顯示出來：
既然這么不好用，為什么你還要講呢？因為我們可能有時候不得不使用這樣舊式的技巧。我最近一次使用alert是我在debug一個移動設備的時候現有的技巧無法正常工作，我只好用alert。
開發者工具
歡迎來到未來！哈哈，并不是這樣。開發者工具已經使用了好些年了。不過呢，很多新的特性被加進去，相信不少人都不知道或則不清楚怎么使用。對于JavaScript debug來說，開發者工具真的非常有用。接下來我來介紹如何使用它。
首先，你需要知道如何打開它。你可以使用快捷鍵：
Window/Linux: ctrl + shift + I;
OSX: cmd + opt + I
你也可以從谷歌瀏覽器的菜單欄選擇開發者工具選項來打開：
你還可以直接右鍵，選擇檢查來打開：
打開后，如下所示：
控制臺（Console）
在使用JavaScript做開發的時候，控制臺非常有用。當使用C, C++, Java開發的時候，我們可以使用終端(terminal)來debug，控制臺擁有和終端相似的功能。
錯誤
控制臺顯示JavaScript錯誤。
同時，也顯示了錯誤在源代碼中的位置。點擊(index):150就可以跳轉到源代碼去。
<input type="button"onclick="alert(THE SPICE MUST FLOW);"value"="click to creat an error">
這行代碼有錯誤，你知道哪里出問題了嗎？
命令行
控制臺擁有的交互式命令行可以用來debug。下面是一些例子：
你可以做一些基礎的JavaScript編程
// 數學加法
2 + 2
// 字符串拼接
"the golden " + "path"
// 調用alert
alert("Muad'Dib!");
你也可以執行復雜的JavaScript代碼
// 創建變量
var arr = [1, 2, 3];
// 使用shitf+enter鍵來換行
for (var i = 0; i < arr.length; i++) {
? arr[i] = arr[i] * 2;
}
arr;
控制臺本身也提供了很多有用的函數，詳情參考api文檔（https://developer.chrome.com/devtools/docs/commandline-api）。
// 通過css選擇器獲取元素
$$('h2');
// 甚至XPath
$x('//h2');
你可以訪問本頁面加載的所有庫。比如，jQuery：
// 頁面背景色變紅
$('body').css('background-color', 'red');
// 改回去
$('body').css('background-color', '');
你可以獲取當前環境下的變量。
// 當前的this
this;
console.log
console.log在控制臺打印信息。
console.log("I am logging to the console.");
我們可以使用它做到之前alert可以實現的功能：
// 確認代碼當前執行位置
console.log("I am here!");
// 打印變量值
console.log("Foo: " + foo);
而且，我們可以用for循環將所有的值打印出來：
for (i = 0; i < 100; i++) {
? console.log(i);
}
alert只能顯示字符串，console.log就強大多了：
// 可以輸出DOM元素
console.log($('h2'));
// 可以顯示對象
console.log({
? book: "Dune",
? characters: ["Paul", "Leto", "Jessica", "Chani", "sandworms"]
});
這僅僅是個開始。使用console.log你可以做很多事情，請參考api文檔（https://developer.chrome.com/devtools/docs/console-api）。
控制臺打印日志已經基本上可以應付日常debug需求了，所以很多開發者止步于此。其實，我們還有更加高級、更加方便的方法。
交互式Debugger
谷歌開發者工具提供了一個交互式debugger。我發現對于復雜的JavaScript代碼，特別是自己編寫的代碼和其它庫有交互的時候，特別有用。
你可以再代碼中通過調用debugger來開啟debug。
// 從這里開始debug
debugger;
只有在打開開發者工具的時候，debugger才會起作用。如果你將開發者工具面板關閉，將不會收到任何影響。
如果你點擊繼續按鈕(右側藍色的類似于播放的按鈕)，代碼會繼續執行直到下一個斷點。
如果你點擊跳過按鈕(繼續按鈕的右側，第二個)，它會直接執行當前函數，而不是進入函數內部。
如果你想知道makeItColor函數具體如何執行，點擊進入按鈕(第三個)，就會跳入函數內部。如果你想跳出來，那么點擊第跳出按鈕(第四個)。
如果想查看變量的值，可以選中并把鼠標放在上面：
你可以敲擊ESC鍵來快速打開控制臺，再次敲擊ESC，控制臺消失。
你可以手動在代碼的某一行添加斷點來暫停執行。在第31行的左側鼠標單擊，會出現一個斷點符號。
庫和壓縮代碼
有時候，為了debug，你可能需要查看庫函數的源代碼。但是，一般線上的代碼都是經過壓縮的，很難看懂。比如jQuery：
如果你點擊下方的{}按鈕，可以將代碼適當格式化，但是依然很難看懂。
壓縮代碼在生產環境十分有必要，但是卻十分為難debug。好在，大多數庫都提供非壓縮版本的代碼。所以，你可以在開發中引用非壓縮版，線上引用壓縮版。
<!--線上-->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"type="text/javascript"></script>
<!--開發-->
<script
src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"type="text/javascript"></script>
在線上環境中，如果用戶遇到bug如何才能知道呢？推薦你使用fundebug監控服務（https://fundebug.com/）。
Ajax請求
開發者工具的網絡部分對于解決網絡請求相關問題非常有用。
我用Twitter來舉例。
到@horse_js(或則其它頁面)
打開開發者工具
點擊Network標簽
點擊filter圖標
選中XHR(XMLHttpRequest), 將所有網絡請求篩選出來
往下滑動觸發網絡請求。Headers標簽顯示該請求的一些基本信息：
Preview顯示的是經過瀏覽器格式化的返回結果(Response)。
Response是原始的返回數據。
Cookies顯示請求相關的cookies信息。
Timing顯示請求的時間信息。
性能
Debug JavaScript的性能需要很多篇幅去介紹。在這里，給出一些參考資料：
jsPerf（http://jsperf.com/）
Evaluating network performance（https://developer.chrome.com/devtools/docs/network）
Performance profiling with the Timeline（https://developer.chrome.com/devtools/docs/timeline）
Profiling JavaScript Performance（https://developer.chrome.com/devtools/docs/cpu-profiling）
JavaScript Memory Profiling（https://developer.chrome.com/devtools/docs/javascript-memory-profiling）
移動端
你可以使用開發者工具來模擬移動交互，這樣就可以直接在桌面瀏覽器debug。如果想了解更多，查看文檔（https://developer.chrome.com/devtools/docs/mobile-emulation）。
當然，你很可能需要真機調試，可以參考下面的文章：
Remote Debugging Chrome on Android（https://developer.chrome.com/devtools/docs/remote-debugging）
Quick Tip: Using Web Inspector to Debug Mobile Safari（http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787）
來源：https://blog.fundebug.com/2017/12/04/javascript-debugging-for-beginners/
