程序猿節日：分享幾個日常調試方法讓js調試更簡單

EspTrott 9年前發布 | 9K 次閱讀 HTML JavaScript開發 JavaScript

又是一年1024了，去年那些單身的程序猿今年還單身嗎？

1024是個美好的日子~程序員節，圈外并沒有多少人知道，在班群里默默的討紅包求人介紹女朋友。

當然要舉一反三~

下面分享幾個日常調試代碼的時候在Console命令行顯示你的操作，讓你的js調試更簡單。

console顯示信息的命令

在瀏覽器按f12在console上顯示你的文本。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
    <div id="example">10.24程序猿節日</div>

 <script>
  console.log('hello000');
  console.info('信息111');
  console.error('錯誤222');
  console.warn('警告333');
 </script>
</body>
</html>

console信息分組

在console上區分開小組信息。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
    <div id="example">10.24程序猿節日</div>
 <script>
    console.group("第一組信息");                    
    console.log("第一組第一條:今天是");
    console.log("第一組第二條:10.24");
    console.groupEnd();
    console.group("第二組信息");
    console.log("第二組第一條:程序猿節日");
    console.log("第二組第二條:節日快樂");
    console.groupEnd();
 </script>
</body>
</html>

console占位符

console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
    <div id="example">10.24程序猿節日</div>
 <script>
    console.log("%d年%d月%d日",2016,10,24);
 </script>
</body>
</html>

console查看對象的信息

console.dir()可以顯示一個對象所有的屬性和方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
    <div id="example">10.24程序猿節日</div>
 <script>
    var info = {
        boom: "10.24程序猿節日",
        message: "不加班"
    };
    console.dir(info);
 </script>
</body>
</html>

console顯示某個節點的內容

用 console.dirxml() 用來顯示網頁的某個節點（node）所包含的html/xml代碼。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
    <div id="example">10.24程序猿節日</div>
 <script>
    var info = document.getElementById('example');
    console.dirxml(info);
 </script>
</body>
</html>

判斷變量是否是真

console.assert() 用來判斷一個表達式或變量是否為真。如果結果為否，則在控制臺輸出一條相應信息，并且拋出一個異常。（這里代碼中，console.assert()語句保證cat對象的score變量值長度為3，不過我為了顯示錯誤把3改成4。）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
    <div id="example">10.24程序猿節日</div>
 <script>
    function cat(name, age, score){
        this.name = name;
        this.age = age;
        this.score = score;
    }
    var c = new cat("miao", 2, [6,8,7]);
    console.assert(c.score.length==4, "Assertion of score length failed123456");
 </script>
</body>
</html>

追蹤函數的調用軌跡

console.trace()用來追蹤函數的調用軌跡。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
    <div id="example">10.24程序猿節日</div>
 <script>
    /*函數是如何被調用的，在其中加入console.trace()方法就可以了*/         
    function add(a, b) {
        console.trace();                
        return a + b;        
    }        
    var x = add3(1, 1);        
    function add3(a, b) {
        return add2(a, b);
    }        
    function add2(a, b) {
        return add1(a, b);
    }        
    function add1(a, b) {
        return add(a, b);
    }
 </script>
</body>
</html>

計時功能

console.time()和console.timeEnd()，用來顯示代碼的運行時間。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
    <div id="example">10.24程序猿節日</div>
 <script>
    console.time("控制臺計時器一");        
    for (var i = 0; i < 1000; i++) {                
        for (var j = 0; j < 1000; j++) {}        
    }        
    console.timeEnd("控制臺計時器一");
 </script>
</body>
</html>

console.profile()的性能分析

性能分析（Profiler）就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是console.profile()。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<title>熱點電視</title>
<meta name="keywords" content="熱點電視的關鍵詞">
<meta name="description" content="熱點電視的網站描述">
</head>
<body>
    <div id="example">10.24程序猿節日</div>
 <script>
    function All() {
        alert(11);                
        for (var i = 0; i < 10; i++) {
            funcA(1000);
        }                
        funcB(10000);        
    }

            
    function funcA(count) {                
        for (var i = 0; i < count; i++) {}        
    }

            
    function funcB(count) {                
        for (var i = 0; i < count; i++) {}        
    }

            
    console.profile('性能分析器');        
    All();        
    console.profileEnd();
 </script>
</body>
</html>