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

時間  2019-12-12
標籤 九個 console 命令 調試 簡單 欄目 JavaScript 简体版
原文   原文鏈接

1、顯示信息的命令javascript

?
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了。html

2、佔位符java

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

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

效果：函數

3、信息分組性能

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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("第二組第一條");
  
  　　　　console.log("第二組第二條:歡迎你加入");
  
  　　 console.groupEnd();  </ script >
  </ body >
  </ html >

效果：ui

4、查看對象的信息spa

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

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

效果：code

5、顯示某個節點的內容

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 >

效果：

6、判斷變量是不是真

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值，是真;而第二個判斷是假，在控制檯顯示錯誤信息

7、追蹤函數的調用軌跡

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>

控制檯輸出信息：

8、計時功能

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

9、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>

輸出如圖：

http://www.jb51.net/article/97242.htm

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程