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