js console打印对象_Javascript调试console的一些小技巧

作者:亚搏app官网    发布时间:2020-02-09 19:41    浏览:106 次

[返回]

时间: 2018-01-24阅读: 3781标签: 调试

八个Console命令,让js调节和测量试验更轻便

By.cllgeek 

黄金年代、彰显消息的吩咐

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <title>常用console命令</title>
   5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <script type="text/javascript">
   9:         console.log('hello');
  10:         console.info('信息');
  11:         console.error('错误');
  12:         console.warn('警告');
  13:     </script>
  14: </body>
  15: </html>

最常用的正是console.log了。

二:占位符

console上述的集低度扶植printf的占位符格式,帮衬的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)

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

效果:图片 1

三、音信分组

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <title>常用console命令</title>
   5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <script type="text/javascript">
   9:         console.group("第一组信息");
  10:
  11:         console.log("第一组第一条:我的博客(http://cllgeek.github.io)");
  12:
  13:         console.log("第一组第二条:blog(http://www.cllgeek.com)");
  14:
  15:       console.groupEnd();
  16:
  17:       console.group("第二组信息");
  18:
  19:         console.log("第二组第一条:程序爱好者: 495489065");
  20:
  21:         console.log("第二组第二条:欢迎你加入");
  22:
  23:       console.groupEnd();
  24:     </script>
  25: </body>
  26: </html>

效果:图片 2

四、查看对象的新闻

console.dir(卡塔尔国能够显得一个指标具有的质量和章程。

   1: <script type="text/javascript">
   2:         var info = {
   3:             blog:"http://cllgeek.github.io",
   4:             :495489065,
   5:             message:"程序爱好者欢迎你的加入"
   6:         };
   7:         console.dir(info);
   8: </script>

效果:图片 3

五、突显有些节点的源委

console.dirxml(卡塔尔国用来呈现网页的某些节点(node)所含有的html/xml代码。

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <title>常用console命令</title>
   5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <div id="info">
   9:         <h3>我的博客:cllgeek.github.io</h3>
  10:         <p>程序爱好者:495489065,欢迎你的加入</p>
  11:     </div>
  12:     <script type="text/javascript">
  13:         var info = document.getElementById('info');
  14:         console.dirxml(info);
  15:     </script>
  16: </body>
  17: </html>

效果:图片 4

六、判断变量是还是不是是真

console.assert(卡塔尔用来推断多少个表明式或变量是或不是为真。假设结果为否,则在决定台出口一条相应音信,并且抛出贰个非常。

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

1是非0值,是真;而第二个判别是假,在调控台展现错误新闻
图片 5

七、追踪函数的调用轨迹。

console.trace(卡塔尔(قطر‎用来追踪函数的调用轨迹。

   1: <script type="text/javascript">
   2: /*函数是如何被调用的,在其中加入console.trace()方法就可以了*/
   3:   function add(a,b){
   4:         console.trace();
   5:     return a+b;
   6:   }
   7:   var x = add3(1,1);
   8:   function add3(a,b){return add2(a,b);}
   9:   function add2(a,b){return add1(a,b);}
  10:   function add1(a,b){return add(a,b);}
  11: </script>

调节台出口音信:
图片 6

八、计时功效

console.time(卡塔尔国和console.timeEnd(卡塔尔国,用来呈现代码的运转时刻。

   1: <script type="text/javascript">
   2:   console.time("控制台计时器一");
   3:   for(var i=0;i<1000;i++){
   4:     for(var j=0;j<1000;j++){}
   5:   }
   6:   console.timeEnd("控制台计时器一");
   7: </script>

运维时刻是5.794ms
图片 7

九、console.profile(State of Qatar的习性解析

品质分析(Profiler)正是深入分析程序各种部分的运行时刻,寻找瓶颈所在,使用的办法是console.profile(卡塔尔。

   1: <script type="text/javascript">
   2:       function All(){
   3:             alert(11);
   4:          for(var i=0;i<10;i++){
   5:                 funcA(1000);
   6:              }
   7:         funcB(10000);
   8:       }
   9:
  10:       function funcA(count){
  11:         for(var i=0;i<count;i++){}
  12:       }
  13:
  14:       function funcB(count){
  15:         for(var i=0;i<count;i++){}
  16:       }
  17:
  18:       console.profile('性能分析器');
  19:       All();
  20:       console.profileEnd();
  21:     </script>

输出如图:
图片 8

聊到底附上本身的:cllgeek.github.io

js的console对象首要用来在浏览器调整高雄输出一些常量或变量,除了大家常用的console.log(卡塔尔方法外,那篇小说在照管总括一些有关console调节和测量试验的豆蔻年华部分小技巧。

七个Console命令,让js调节和测量检验更轻巧

2016-08-19 10:02:15 2056浏览 3评论

大器晚成、展现音信的吩咐

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <title>常用console命令</title>
   5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <script type="text/javascript">
   9:         console.log('hello');
  10:         console.info('信息');
  11:         console.error('错误');
  12:         console.warn('警告');
  13:     </script>
  14: </body>
  15: </html>

最常用的正是console.log了。

二:占位符

console上述的集高度援助printf的占位符格式,补助的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)

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

效果:图片 9

三、消息分组

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <title>常用console命令</title>
   5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <script type="text/javascript">
   9:         console.group("第一组信息");
  10:
  11:         console.log("第一组第一条:我的博客(http://cllgeek.github.io)");
  12:
  13:         console.log("第一组第二条:blog(http://www.cllgeek.com)");
  14:
  15:       console.groupEnd();
  16:
  17:       console.group("第二组信息");
  18:
  19:         console.log("第二组第一条:程序爱好者: 495489065");
  20:
  21:         console.log("第二组第二条:欢迎你加入");
  22:
  23:       console.groupEnd();
  24:     </script>
  25: </body>
  26: </html>

效果:图片 10

四、查看对象的新闻

console.dir(卡塔尔能够显示叁个对象具备的习性和办法。

   1: <script type="text/javascript">
   2:         var info = {
   3:             blog:"http://cllgeek.github.io",
   4:             :495489065,
   5:             message:"程序爱好者欢迎你的加入"
   6:         };
   7:         console.dir(info);
   8: </script>

效果:图片 11

五、突显有些节点的内容

console.dirxml(卡塔尔国用来呈现网页的某部节点(node)所包括的html/xml代码。

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <title>常用console命令</title>
   5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <div id="info">
   9:         <h3>我的博客:cllgeek.github.io</h3>
  10:         <p>程序爱好者:495489065,欢迎你的加入</p>
  11:     </div>
  12:     <script type="text/javascript">
  13:         var info = document.getElementById('info');
  14:         console.dirxml(info);
  15:     </script>
  16: </body>
  17: </html>

效果:图片 12

六、决断变量是或不是是真

console.assert(State of Qatar用来剖断二个表明式或变量是或不是为真。假诺结果为否,则在支配台出口一条相应音讯,况兼抛出二个不胜。

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

1是非0值,是真;而第3个推断是假,在调整台呈现错误新闻
图片 13

七、追踪函数的调用轨迹。

console.trace(卡塔尔国用来追踪函数的调用轨迹。

   1: <script type="text/javascript">
   2: /*函数是如何被调用的,在其中加入console.trace()方法就可以了*/
   3:   function add(a,b){
   4:         console.trace();
   5:     return a+b;
   6:   }
   7:   var x = add3(1,1);
   8:   function add3(a,b){return add2(a,b);}
   9:   function add2(a,b){return add1(a,b);}
  10:   function add1(a,b){return add(a,b);}
  11: </script>

支配台出口消息:
图片 14

八、计时功效

console.time(卡塔尔(قطر‎和console.timeEnd(卡塔尔(قطر‎,用来突显代码的周转时刻。

   1: <script type="text/javascript">
   2:   console.time("控制台计时器一");
   3:   for(var i=0;i<1000;i++){
   4:     for(var j=0;j<1000;j++){}
   5:   }
   6:   console.timeEnd("控制台计时器一");
   7: </script>

运营时刻是5.794ms
图片 15

九、console.profile(State of Qatar的习性解析

属性解析(Profiler)就是分析程序种种部分的运行时刻,找寻瓶颈所在,使用的秘诀是console.profile(卡塔尔(قطر‎。

   1: <script type="text/javascript">
   2:       function All(){
   3:             alert(11);
   4:          for(var i=0;i<10;i++){
   5:                 funcA(1000);
   6:              }
   7:         funcB(10000);
   8:       }
   9:
  10:       function funcA(count){
  11:         for(var i=0;i<count;i++){}
  12:       }
  13:
  14:       function funcB(count){
  15:         for(var i=0;i<count;i++){}
  16:       }
  17:
  18:       console.profile('性能分析器');
  19:       All();
  20:       console.profileEnd();
  21:     </script>

出口如图:
图片 16

不等系列日志输出:

By.cllgeek

console在调控台上得以出口分化门类的小日子音讯,会使用差别的标识来显示 :

console.log('文字信息');console.info('提示信息');console.warn('警告信息');console.error('错误信息');

职能如下:

包蕴占位符:

在输出音讯时得以通过%占位符来钦命相应的值,而不用一连选用拼接字符串的主意。扶持的占位符富含以下二种。

%s - 字符%d - 整数%f - 浮点数%o - 对象%c- 定义css样式

console.log("%c%s吃了%d斤肉,花了%f元!","color: red; font-style: italic",'我',2,30.5);

效果如下:

分组输出:

因此console.group(State of Qatar方法可以以分组的花样体现出消息,相通于列表构造。group(卡塔尔国要求接受groupEnd(State of Qatar来最后包裹分组内容; groupCollapsed(卡塔尔(قطر‎能够用于替代group(卡塔尔生成折叠的分组。

console.group('第一个组'); console.group("1-1"); console.group("1-1-1"); console.log('内容'); console.groupEnd(); console.groupEnd(); console.group("1-2"); console.log('内容'); console.log('内容'); console.groupEnd();console.groupEnd();console.groupCollapsed('第二个组'); console.group("2-1"); console.groupEnd(); console.group("2-2"); console.groupEnd();console.groupEnd();

效益如下:

表明式判定:

采纳console.assert(卡塔尔国方法来决断第三个参数是或不是为真,false的话抛出特别况且在调节台出口相应音信。

console.assert(true);console.assert(1,false);console.assert(1===2);//报错VM525:1 Assertion failed: console.assert

前两条语句推断结果都为true,所以未有出口任何音信,第三条语句剖断结果为false,所以会直接抛出特别。

报表输出:

应用console.table()能够将盛传的对象,或数组以表格情势出口,符合排列有条理的成分;

var Arr = [ [1,2,3], [4,5,6], [7,8,9],]console.table(Arr);

打印效果如下:

计时总结:相像计算风华正茂段代码试行耗费时间,方法会是通过Date对象获得飞秒数,然后将四个飞秒数进行相减。 除了Date以外在调整新北大家得以由此选取console.time(State of Qatar和console.timeEnd(卡塔尔(قطر‎方法来计算代码段的推行耗。

console.time("这段代码");var arr=[];for(var i = 0; i  1000; i++){arr.push(i);}console.timeEnd("这段代码");//这段代码: 0.275146484375ms

瞩目:使用Console.time(卡塔尔(قطر‎和Console.timeEnd(卡塔尔(قطر‎包裹需求计时的代码片段,当中time(State of Qatar和timeEnd(卡塔尔国中的参数必需是同样(即黄金时代律字符串),不然会现身0ms的图景。

函数调用栈音讯console.trace(卡塔尔方法能够浮现出函数调用栈的新闻,来查阅函数调用进程,经常会选用将以此格局放在最终推行的函数的方法体中。

function add(a, b) { console.trace("Add"); return a + b;}function f1(a, b) { return add(a, b);}function f2(a, b) { return f1(a, b);}var x =f2(1, 1);

打字与印刷效果如下:

VM218:2 Addadd @ VM218:2f1 @ VM218:6f2 @ VM218:9(anonymous) @ VM218:11

质量剖析:通过console.profile(卡塔尔(قطر‎和console.profileEnd(卡塔尔国方法,能够呈现出代码中逐风流罗曼蒂克函数试行所花费的日子,能够用来评估代码质量。

function f1(){for(var j=0;j100;j++){}}function fn(){for(var i=0;i1000;i++){f1();}}console.profile('profile1');fn()console.profileEnd();

张开chrome浏览器的主宰台会有叁个Javascript Profile菜单栏,即便默许情状下没有的话,能够依照以下办法张开。

张开这一个菜单选项后,我们得以见见各样方法奉行消耗的光阴。 如下:

对象和节点的查看:

采取Console.dir(卡塔尔国呈现多个对象的享有属性和方式,在Chrome中Console.dir(卡塔尔(قطر‎和Console.log(State of Qatar效果相仿。

应用Console.dirxml(卡塔尔显示八个对象的装有属性和艺术,在Chrome中Console.dirxml(卡塔尔(قطر‎和Console.log(卡塔尔国效果等同。

搜索