【F12】九個Console命令,讓js調試更簡單


一、顯示信息的命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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了。

二:占位符

console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整數(%d或%i)、浮點數(%f)和對象(%o):

占位符 作用
%s 字符串
%d or %i 整數
%f 浮點數
%o 可展開的DOM
%O 列出DOM的屬性
%c 根據提供的css樣式格式化字符串
1
2
3
<script type= "text/javascript" >
         console.log( "%d年%d月%d日" ,2011,3,26);
</script>

效果:

%o、%O都是用來輸出Object對象的,對普通的Object對象,兩者沒區別,但是打印dom節點時就不一樣了:

1
2
3
4
5
// 格式成可展開的的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渲染。常見的輸出方式有兩種:文字樣式、圖片輸出。

文字輸出

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

除了普通文本,還能輸出如知乎的console面板一樣的字符畫。這些字符畫是可以在線生成的:

大概方法:使用在線工具生成字符畫,然后復制到sublime中,將每行開頭的換行刪除,且替換成\n。最后只有一行代碼,即保證沒有換行,最后再丟到console.log("")代碼中即可,當然,也可以添加結合%c做出更酷炫的效果(console輸出默認是不換行的)。

圖片輸出

由於 console不能定義img,因此用背景圖片代替。此外,console不支持width和height,利用空格和font-size代替;還可以使用padding和line-height代替寬高。

不想這么麻煩,可以試試console-image這個插件。

三、信息分組

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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.ido321.com)" );
         console.log( "第一組第二條:CSDN(http://blog.csdn.net/u011043843)" );
       console.groupEnd();
      console.group( "第二組信息" );
         console.log( "第二組第一條:程序愛好者QQ群: 259280570" );
         console.log( "第二組第二條:歡迎你加入" );
      console.groupEnd();
     </script>
</body>
</html>

效果:

四、查看對象的信息

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

1
2
3
4
5
6
7
8
<script type= "text/javascript" >
         var  info = {
             blog: "http://www.ido321.com" ,
             QQGroup:259280570,
             message: "程序愛好者歡迎你的加入"
         };
         console.dir(info);
</script>

效果:

五、顯示某個節點的內容

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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.ido321.com</h3>
         <p>程序愛好者:259280570,歡迎你的加入</p>
     </div>
     <script type= "text/javascript" >
         var  info = document.getElementById('info');
         console.dirxml(info);
     </script>
</body>
</html>

效果:

六、判斷變量是否是真

console.assert()用來判斷一個表達式或變量是否為真。如果結果為否,則在控制台輸出一條相應信息,並且拋出一個異常。

1
2
3
4
5
6
<script type= "text/javascript" >
        var  result = 1;
       console.assert( result );
        var  year = 2014;
       console.assert(year == 2018 );
</script>

1是非0值,是真;而第二個判斷是假,在控制台顯示錯誤信息

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

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

1
2
3
4
5
6
7
8
9
10
11
<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>

控制台輸出信息:

八、計時功能

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

1
2
3
4
5
6
7
<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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>

輸出如圖:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM