九個Console命令，讓js調試更簡單

時間 2019-11-30

原文原文鏈接

1、顯示信息的命令

<!DOCTYPE html>
 <html>
  <head>
    <title>經常使用console命令</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
    <script type="text/javascript"> console.log('hello'); console.info('信息'); console.error('錯誤'); console.warn('警告'); </script>
 </body>
 </html>

最經常使用的就是console.log了。javascript

二：佔位符

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

佔位符	做用
%s	字符串
%d or %i	整數
%f	浮點數
%o	可展開的DOM
%O	列出DOM的屬性
%c	根據提供的css樣式格式化字符串


<script type="text/javascript"> console.log("%d年%d月%d日",2011,3,26); </script>

效果：css

%o、%O都是用來輸出Object對象的，對普通的Object對象，二者沒區別，可是打印dom節點時就不同了：html

// 格式成可展開的的DOM，像在開發者工具Element面板那樣可展開 
console.log('%o',document.body.firstElementChild); // 像JS對象那樣訪問DOM元素，可查看DOM元素的屬性  // 等同於console.dir(document.body.firstElementChild) 
console.log('%O',document.body.firstElementChild);

%c佔位符是最經常使用的。使用%c佔位符時，對應的後面的參數必須是CSS語句，用來對輸出內容進行CSS渲染。常見的輸出方式有兩種：文字樣式、圖片輸出。java

文字輸出git

console.log("%cHello world,歡迎您！","color: red; font-size: 20px"); //輸出紅色的、20px大小的字符串：Hello world,歡迎您！

除了普通文本，還能輸出如知乎的console面板同樣的字符畫。這些字符畫是能夠在線生成的：github

大概方法：使用在線工具生成字符畫，而後複製到sublime中，將每行開頭的換行刪除，且替換成\n。最後只有一行代碼，即保證沒有換行，最後再丟到console.log("")代碼中便可，固然，也能夠添加結合%c作出更酷炫的效果(console輸出默認是不換行的)。dom

圖片輸出函數

因爲 console不能定義img，所以用背景圖片代替。此外，console不支持width和height，利用空格和font-size代替；還能夠使用padding和line-height代替寬高。工具

不想這麼麻煩，能夠試試console-image這個插件。

3、信息分組

<!DOCTYPE html>
    <html>
    <head>
        <title>經常使用console命令</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <script type="text/javascript"> console.group("第一組信息"); 　　　　console.log("第一組第一條:個人博客(http://www.xxx.com)"); 　　　　console.log("第一組第二條:CSDN(http://blog.com)"); 　　console.groupEnd(); 　　 console.group("第二組信息"); 　　　　console.log("第二組第一條:hellow world"); 　　　　console.log("第二組第二條:歡迎加入程序猿世界"); 　　 console.groupEnd(); </script>
   </body>
   </html>

4、查看對象的信息

console.dir()能夠顯示一個對象全部的屬性和方法。

<script type="text/javascript">
            var info = { blog:"http://www.XXX.com", parma:"Object", message:"hello world" }; console.dir(info); </script>

效果：

5、顯示某個節點的內容

<!DOCTYPE html>
    <html>
    <head>
        <title>經常使用console命令</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <div id="info">
            <h3>個人博客：www.XXX.com</h3>
           <p>hellow World</p>
       </div>
       <script type="text/javascript">
           var info = document.getElementById('info'); console.dirxml(info); </script>
   </body>
   </html>

6、判斷變量是不是真

console.assert()用來判斷一個表達式或變量是否爲真。若是結果爲否，則在控制檯輸出一條相應信息，而且拋出一個異常。

<script type="text/javascript">

        　　var result = 1; 　　console.assert( result ); 　　var year = 2014; 　　console.assert(year == 2018 ); </script>

1是非0值，是真；而第二個判斷是假，在控制檯顯示錯誤信息

7、追蹤函數的調用軌跡。

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

<script type="text/javascript">

    /*函數是如何被調用的，在其中加入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>

8、計時功能

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

<script type="text/javascript"> 　　console.time("控制檯計時器一"); 　　for(var i=0;i<1000;i++){ 　　　　for(var j=0;j<1000;j++){} 　　} 　　console.timeEnd("控制檯計時器一"); </script>

運行時間是38.84ms

9、console.profile()的性能分析

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

 <script type="text/javascript">

        　　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>