一、显示信息的命令

  

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

  最常用的就是console.log了。

  二:占位符

 

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

1 <font face="Tahoma, Arial, Helvetica, snas-serif"><span style="font-size: 16.3799991607666px; white-space: normal;"><b></b></span></font>   1: <script type="text/javascript">
2    2:         console.log("%d年%d月%d日",2011,3,26);
3    3: </script>

  效果:

  三、信息分组

 

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

  效果:

  四、查看对象的信息

 

  console.dir()可以显示一个对象所有的属性和方法。

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

  效果:

  五、显示某个节点的内容

 

  console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。

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

  六、判断变量是否是真

 

  console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。

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

  1是非0值,是真;而第二个判断是假,在控制台显示错误信息

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

 

  console.trace()用来追踪函数的调用轨迹。

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

  控制台输出信息:

  八、计时功能

  console.time()和console.timeEnd(),用来显示代码的运行时间。

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

  运行时间是38.84ms

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

 

  性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()。

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

  输出如图

 一、显示信息的命令

  

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

  最常用的就是console.log了。

  二:占位符

 

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

1 <font face="Tahoma, Arial, Helvetica, snas-serif"><span style="font-size: 16.3799991607666px; white-space: normal;"><b></b></span></font>   1: <script type="text/javascript">
2    2:         console.log("%d年%d月%d日",2011,3,26);
3    3: </script>

  效果:

  三、信息分组

 

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

  效果:

  四、查看对象的信息

 

  console.dir()可以显示一个对象所有的属性和方法。

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

  效果:

  五、显示某个节点的内容

 

  console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。

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

  六、判断变量是否是真

 

  console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。

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

  1是非0值,是真;而第二个判断是假,在控制台显示错误信息

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

 

  console.trace()用来追踪函数的调用轨迹。

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

  控制台输出信息:

  八、计时功能

  console.time()和console.timeEnd(),用来显示代码的运行时间。

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

  运行时间是38.84ms

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

 

  性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()。

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

  

原文链接:https://github.com/dwqs/blog/issues/32

[转]Web程序员必须知道的 Console 对象里的九个方法的更多相关文章

  1. Web程序员应该知道的Javascript prototype原理

    有同事问了我几个和Javascript的类继承的小问题,我在也不太理解的情况下,胡诌了一通. 回来以后有些内疚, 反省一下, 整理整理Javascript的prototype的原理, 自己清楚点, 也 ...

  2. PHP程序员应该知道的15个库

    最几年,PHP已经成为最受欢迎的一种有效服务器端编程语言.据2013年发布的一份调查报告显示,PHP语言已经被安装在全球超过2.4亿个网站以及210万台Web服务器之上.PHP代表超文本预处理器,它主 ...

  3. Android 程序员必须知道的 53 个知识点

    1. android 单实例运行方法 我们都知道 Android 平台没有任务管理器,而内部 App 维护者一个 Activity history stack 来实现窗口显示和销毁,对于常规从快捷方式 ...

  4. 嵌入式程序员应知道的0x10个基本问题

     来源:网络 嵌入式程序员应知道的0x10个基本问题 1 . 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题)#define SECONDS_PER_YEAR (60 ...

  5. 嵌入式程序员应知道的0x10个C语言Tips

    [1].[代码] [C/C++]代码 跳至 [1] ? 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 26 27 ...

  6. (转)程序员应该知道的10个eclipse调试技巧

    调试不仅可以查找到应用程序缺陷所在,还可以解决缺陷.对于Java程序员来说,他们不仅要学会如何在Eclipse里面开发像样的程序,更需要学会如何调试程序.本文介绍了Java程序员必知的10个调试技巧, ...

  7. Java程序员应该知道的20个有用的lib开源库

    一般一个经验丰富的开发者,一般都喜欢使用开源的第三方api库来进行开发,毕竟这样能够提高开发效率,并且能够简单快速的集成到项目中去,而不用花更多的时间去在重复造一些无用的轮子,多了解一些第三方库可以提 ...

  8. Git / 程序员需要知道的12个Git高级命令

    众所周知,Git目前已经是分布式版本控制领域的翘楚,围绕着Git形成了完整的生态圈.学习Git,首先当然是学习Git的基本工作流.相比于SVN等传统版本控制系统来说,Git是专为分布式版本控制而生的强 ...

  9. 成为嵌入式程序员应知道的0x10个基本问题

    预处理器(Preprocessor)1 . 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SECONDS_PER_YEAR (60 * 60 * 2 ...

随机推荐

  1. ubuntu下c/c++开发环境配置

    刚转好的UBUNTU14.04.01 TLS . 试了一下GCC,结果如下不能编译 gcc -o hello hello.cpp gcc: error trying to exec 'cc1plus' ...

  2. Python的安装

    篇幅主要是别人的分享,我这里主要是添加注意点.我当初就是按照下面的图片开始安装python,安装的是python3.5,pyDev也是使用的博主的(还花了1资源分下载).但是运行程序时,一直显示 Er ...

  3. Qt StyleSheet皮肤(黑色,比较好看,而且很全)

    使用方式如下 //设置皮肤样式 static void SetStyle(const QString &styleName) { QFile file(QString(":/imag ...

  4. 如何在Qt 4程序中优化布局结构(表格讲解,很清楚)

    原文地址:http://blog.csdn.net/qter_wd007/archive/2010/03/13/5377882.aspx 在迄今为止讲到每一个例子中,我们只是简单的把窗口部件放置到某个 ...

  5. SQL Server批量数据导出导入BCP使用

    BCP简介 bcp是SQL Server中负责导入导出数据的一个命令行工具,它是基于DB-Library的,并且能以并行的方式高效地导入导出大批量的数据.bcp可以将数据库的表或视图直接导出,也能通过 ...

  6. TP自带的缓存机制

    原文章出处: http://blog.163.com/liwei1987821@126/blog/static/172664928201422133218356/ 动态缓存  Cache缓存类 vie ...

  7. 安装PHPStudy2014,打开端口出现80端口 PID4 进程:System-windows服务器应用

    原文:安装PHPStudy2014,打开端口出现80端口 PID4 进程:System-windows服务器应用-黑吧安全网 安装PHPStudy2014,打开端口出现80端口 PID4 进程:Sys ...

  8. self.nsme 和 _name 的问题

    .h文件 @interface myclass:NSObject @property(nonatomic,retain)NSArray*MyArray; @end .m文件 @implementati ...

  9. sublime text主要快捷键列表

    Ctrl+L 选择整行(按住-继续选择下行)Ctrl+KK 从光标处删除至行尾Ctrl+Shift+K 删除整行Ctrl+Shift+D 复制光标所在整行,插入在该行之前Ctrl+J 合并行(已选择需 ...

  10. 控制台打印出event对象时,对象里面的currentTarget为null

    但是MouseEvent对象展开时 附上老外的解释~~~: http://stackoverflow.com/questions/26496176/when-loggin-an-event-objec ...