丁香五月深爱激情亚洲一区,超碰caoporen国产最新地址

技術(shù)頻道 - 網(wǎng)站運營

如何用firefox或chrome瀏覽器調(diào)試js和jquery程序

作者:admin 時間:2019-3-22 7:13:3 瀏覽:

調(diào)試js和jquery程序時，我們可以通過網(wǎng)頁執(zhí)行其代碼看輸出到網(wǎng)頁的結(jié)果是否與預(yù)期一致，不過在調(diào)試過程中如何能更快地追蹤代碼的執(zhí)行過程和錯誤？這就是本文的重點，如何用firefox或chrome瀏覽器調(diào)試js和jquery程序。

firefox和chrome瀏覽器都有一個開發(fā)者工具，里面包含各種網(wǎng)頁開發(fā)上的功能，如網(wǎng)絡(luò)監(jiān)視，控制臺，樣式編輯器等等，非常強大。而我們今天要介紹的，用來調(diào)試js和jquery程序的，正是“控制臺(console)”這一工具。

如何打開開發(fā)者工具進入“控制臺(console)”？

打開一張網(wǎng)頁后，按F12鍵，即可打開開發(fā)者工具并進入“控制臺(console)”。

使用“控制臺(console)”調(diào)試js和jquery程序

我們首先看一段代碼：

//遍歷一維數(shù)組
var arr1 = ["aaa", "bbb", "ccc"];
$.each(arr1, function(i, val) {
//在控制臺輸出執(zhí)行日志
console.log(i + ". " + val);
});

關(guān)鍵代碼console.log()是Jquery調(diào)試代碼，即是要在“控制臺(console)”里輸出Jquery代碼執(zhí)行過程記錄。

上述代碼，是遍歷一個一維數(shù)組，在“控制臺(console)”輸出的結(jié)果如下圖所示：

“控制臺(console)”輸出的結(jié)果

完整HTML代碼如下：

<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button id="btnClick">點擊我看輸出結(jié)果</button><br/>

<script type="text/javascript">
$(document).ready(function(){

$("#btnClick").on('click',function(e){

    //遍歷一維數(shù)組
    var arr1 = ["aaa", "bbb", "ccc"];
    $.each(arr1, function(i, val) {
      //在控制臺輸出執(zhí)行日志
      console.log(i + ". " + val);
    });

});

});
</script>

</body>
</html>