JavaScript 調(diào)試
JavaScript 調(diào)試
沒有調(diào)試工具是很難去編寫 JavaScript 程序的。
你的代碼可能包含語法錯誤，邏輯錯誤，如果沒有調(diào)試工具，這些錯誤比較難于發(fā)現(xiàn)。
通常，如果 JavaScript 出現(xiàn)錯誤，是不會有提示信息，這樣你就無法找到代碼錯誤的位置。
JavaScript 調(diào)試工具
在程序代碼中尋找錯誤叫做代碼調(diào)試。
調(diào)試很難，但幸運的是，很多瀏覽器都內(nèi)置了調(diào)試工具。
內(nèi)置的調(diào)試工具可以開始或關(guān)閉，嚴(yán)重的錯誤信息會發(fā)送給用戶。
有了調(diào)試工具，我們就可以設(shè)置斷點 (代碼停止執(zhí)行的位置), 且可以在代碼執(zhí)行時檢測變量。
瀏覽器啟用調(diào)試工具一般是按下 F12 鍵，并在調(diào)試菜單中選擇 "Console" 。
對于JavaScript程序的調(diào)試，相比于alert()，使用console.log()是一種更好的方式，原因在于：alert()函數(shù)會阻斷JavaScript程序的執(zhí)行，從而造成副作用；而console.log()僅在控制臺中打印相關(guān)信息，因此不會造成類似的顧慮
什么是console.log()？
除了一些很老版本的瀏覽器，現(xiàn)今大多數(shù)瀏覽器都自帶調(diào)試功能；即使沒有調(diào)試功能，也可以通過安裝插件來進(jìn)行補(bǔ)充。比如，老版本的Firefox沒有自帶調(diào)試工具，在這種情況下可以通過安裝Firebug插件來添加調(diào)試功能。在具備調(diào)試功能的瀏覽器上，window對象中會注冊一個名為console的成員變量，指代調(diào)試工具中的控制臺。通過調(diào)用該console對象的log()函數(shù)，可以在控制臺中打印信息。比如，以下代碼將在控制臺中打印”Sample log”：
?代碼如下:window.console.log("Sample log");
上述代碼可以忽略window對象而直接簡寫為：
?代碼如下:console.log("Sample log");
console.log()可以接受任何字符串、數(shù)字和JavaScript對象。與alert()函數(shù)類似，console.log()也可以接受換行符n以及制表符t。console.log()語句所打印的調(diào)試信息可以在瀏覽器的調(diào)試控制臺中看到。不同的瀏覽器中console.log()行為可能會有所不同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
//變量
var i = 'I am a string';
console.log('變量：',i);
//數(shù)組
var arr = [1,2,3,4,5];
console.log('數(shù)組：',arr);
//對象
var obj1 = {
key1 : 'value1',
key2 : 'value2',
key3 : 'value3'
};
var obj2 = {
key6 : 'value4',
key5 : 'value5',
key4 : 'value6'
};
var obj3 = {
key9 : 'value7',
key8 : 'value8',
key7 : 'value9'
};
console.log('對象：',obj1);
//對象數(shù)組
var objArr1 = [obj1,obj2,obj3];
var objArr2 = [[obj1],[obj2],[obj3]];
console.log('對象數(shù)組1：',objArr1);
console.log('對象數(shù)組1：',objArr2);
</script>
</head>
<body>
<p>
瀏覽器中(Chrome, IE, Firefox) 使用 F12 來啟用調(diào)試模式， 在調(diào)試窗口中點擊 "Console" 菜單。
</p>
</body>
</html>debugger 關(guān)鍵字
debugger?關(guān)鍵字用于停止執(zhí)行 JavaScript，并調(diào)用調(diào)試函數(shù)。
這個關(guān)鍵字與在調(diào)試工具中設(shè)置斷點的效果是一樣的。
如果沒有調(diào)試可用，debugger 語句將無法工作。
開啟 debugger ，代碼在第三行前停止執(zhí)行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<head>
</head>
<body>
<p id="demo"></p>
<script>
var x = 5 * 5 + 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>主要瀏覽器的調(diào)試工具
通常，瀏覽器啟用調(diào)試工具一般是按下 F12 鍵，并在調(diào)試菜單中選擇 "Console" 。
各瀏覽器的步驟如下:
Chrome 瀏覽器
打開瀏覽器。在菜單中選擇工具。在工具中選擇開發(fā)者工具。最后，選擇 Console。
Firefox 瀏覽器
打開瀏覽器。訪問頁面:?
http://www.getfirebug.com。按照說明 :
安裝 Firebug。
Internet Explorer 瀏覽器。
打開瀏覽器。在菜單中選擇工具。在工具中選擇開發(fā)者工具。最后，選擇 Console。
Opera
打開瀏覽器。Opera 的內(nèi)置調(diào)試工具為 Dragonfly，詳細(xì)說明可訪問頁面:
http://www.opera.com/dragonfly/。
Safari
打開瀏覽器。右擊鼠標(biāo)，選擇檢查元素。在底部彈出的窗口中選擇"控制臺"。
