精品无码一区二区三区亚洲,国产激情综合精品久久,亚洲欧洲日产国码无码动漫

技術頻道 - 網站運營

如何用firefox或chrome瀏覽器調試js和jquery程序

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

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

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

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

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

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

我們首先看一段代碼：

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

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

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

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

完整HTML代碼如下：

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

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

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

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

});

});
</script>

</body>
</html>