码迷，mamicode.com
首页 > Web开发 > 详细

js调试工具Console命令详解

时间：2015-06-15 18:10:32      阅读：166      评论：0      收藏：0      [点我收藏+]

标签：

console:控制台 log：n记录，航行日志v伐木航行

一、显示信息的命令

复制代码 代码如下:

<!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）
 

复制代码 代码如下:

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

效果：

技术分享

三、信息分组
 

复制代码 代码如下:

<!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("第一组第一条:我的XX(http://www.jb51.net)");

　　　　console.log("第一组第二条:xxx(http://jb51.net)");

　　console.groupEnd();

     console.group("第二组信息");

　　　　console.log("第二组第一条:程序爱好者QQ群： 80535344");

　　　　console.log("第二组第二条:欢迎你加入");

     console.groupEnd();
</script>
</body>
</html>

效果：

技术分享

四、查看对象的信息
 
console.dir()可以显示一个对象所有的属性和方法。
 

复制代码 代码如下:

<script type="text/javascript">
var info = {
blog:"http://www.jb51.net",
QQGroup:80535344,
message:"程序爱好者欢迎你的加入"
};
console.dir(info);
</script>

效果：

技术分享

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

复制代码 代码如下:

<!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()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。
 

复制代码 代码如下:

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

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

技术分享

七、追踪函数的调用轨迹。
 
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>

控制台输出信息：

技术分享

八、计时功能
 
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

技术分享
 

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

说明一下，LZ测试时，在All()中未加alert,控制条没有输出，加上了之后，就有了一张性能分析表，暂时不清楚原因，若你知道，可以评论。

技术分享

     console命令行详解

首先先说一下在ie下如果控制台没有开启使用console会报错，不过没有关系，开启开发人员工具刷新就一切正常了。
1、console.log
相信大家最常用的console的一个属性就是console.log。他的作用是将一般的消息传到控制台上。例如：
  1. var a=3;
  2. console.log(a);
复制代码
运行后我们在控制台上就能看到打印出一个3。同时这个属性还能帮助我们打印出一个对象或者函数。比如：
  1. function a(){
  2.    var b=3;
  3. }
  4. var a1=new a();
  5. console.log(a1);
复制代码
这时控制台会将a对象的实例打印出来，对于chrome中，我们可以很完整的看到a对象的实例的整个结构包括继承情况，对于firebug，我们只能看到他的某些属性，不过对于ie来说，如果打印的是一个实例的话，只会返回[object,object]

2、console.info
该命令的作用是返回信息性消息，这个命令与console.log差别并不大，除了在chrome中只会输出文字外，其余的会显示一个蓝色的惊叹号。

3.console.warn和console.error
这两个命令的作用就是帮助我们输出警告消息和错误消息的。当警告时，控制台除了出现输出信息外，还会出现有黄色的惊叹号，当错误时则是红色的叉子

以上就是console的显示信息命令。不过有人会问，这些命令只是输出，具体有什么用处呢？这主要是分门别类的处理消息，例如我们只是为了测试某个函数是否运行，则用console.log就完全足够了，但是当我们希望抛出某些不知名的错误时，就可以使用console.error返回我们自己设定的错误。

4、占位符显示
console显示输出最大的优点就是支持占位符。不过支持的相对较少，目前支持字符（%s），整数（%d），浮点（%f）以及对象（%o）

这个用起来很像java和c中的printf，用法也是一样的
例如console.log(%d,3)，console.log(%f,4.2323),
当我们使用%o的时候则会返回一个对象的内部情况
例如：
  1. <spanstyle="line-height: 1.5;"="">var a={}

  3. a.b=3
  4. a.c=5
  5. console.log("%o",a)</spanstyle="line-height:>
复制代码
5、分组显示
利用console.group和console.groupEnd（注意大小写）可以将返回的数据分组显示，以便我们分类进行对比。例如：
  1. console.group(‘第一组‘)
  2.         console.log(3)
  3.         console.log(5)
  4.         console.log(7)
  5. console.groupEnd()

  7. console.group(‘第二组‘)
  8.         console.log(4)
  9.         console.log(6)
  10.         console.log(8)
  11. console.groupEnd()
复制代码
在chrome中显示为：
技术分享

不过这个命令我们伟大的IE浏览器并不支持
技术分享


6、console.dir
这个命令的作用是打印输出一个对象内的所有属性
例如：
  1. var a={}
  2. a.b=3;
  3. a.c=5;

  5. console.dir(a)
复制代码
在chrome中 除了我们定义的b，c两个变量会打印出来时，一些隐藏属性也会被打印出来

在firebug中只会打印出b，c

在IE中 只会打印出[object,object]

7、console.dirxml
这个命令我们伟大的IE仍旧不支持，他的作用就是打印出书dom文档树，比如说：
  1. <body>
  2.         <div id="tree">
  3.             <ul>
  4.                 <li>aaa</li>
  5.             <li>bbb</li>
  6.             <li>ccc</li>
  7.             <li>ddd</li>
  8.         </ul>
  9.       
  10.     </div>
  11.    
  12. </body>

  14. <script>
  15. var tree=document.getElementById("tree");

  17. console.dirxml(tree)
  18. </script>
复制代码
在chrome里是这样，
技术分享

在firebug中样子基本相同就不发了

8、console.trace
该命令用于跟踪一个函数的调用轨迹，这个测试函数运行很有帮助，只要给想测试的函数里面加入console.trace就行了，当然，我们伟大的IE仍旧不支持。

9、console.assert
这个命令用于判断某个表达式或变量是否为真
例如:
  1. var a=3;
  2. console.assert(a==5);
复制代码
在chrome中返回：
技术分享

ie返回：
技术分享

firebug返回：
技术分享


未命名ff.jpg (6.93 KB, 下载次数: 15)

技术分享

  console命令行详解




1、console.log
相信大家最常用的console的一个属性就是console.log。他的作用是将一般的消息传到控制台上。例如：
  1. var a=3;
  2. console.log(a);
复制代码
运行后我们在控制台上就能看到打印出一个3。同时这个属性还能帮助我们打印出一个对象或者函数。比如：
  1. function a(){
  2.    var b=3;
  3. }
  4. var a1=new a();
  5. console.log(a1);
复制代码
这时控制台会将a对象的实例打印出来，对于chrome中，我们可以很完整的看到a对象的实例的整个结构包括继承情况，对于firebug，我们只能看到他的某些属性，不过对于ie来说，如果打印的是一个实例的话，只会返回[object,object]

2、console.info
该命令的作用是返回信息性消息，这个命令与console.log差别并不大，除了在chrome中只会输出文字外，其余的会显示一个蓝色的惊叹号。

3.console.warn和console.error
这两个命令的作用就是帮助我们输出警告消息和错误消息的。当警告时，控制台除了出现输出信息外，还会出现有黄色的惊叹号，当错误时则是红色的叉子

以上就是console的显示信息命令。不过有人会问，这些命令只是输出，具体有什么用处呢？这主要是分门别类的处理消息，例如我们只是为了测试某个函数是否运行，则用console.log就完全足够了，但是当我们希望抛出某些不知名的错误时，就可以使用console.error返回我们自己设定的错误。

4、占位符显示
console显示输出最大的优点就是支持占位符。不过支持的相对较少，目前支持字符（%s），整数（%d），浮点（%f）以及对象（%o）

这个用起来很像java和c中的printf，用法也是一样的
例如console.log(%d,3)，console.log(%f,4.2323),
当我们使用%o的时候则会返回一个对象的内部情况
例如：
  1. <spanstyle="line-height: 1.5;"="">var a={}

  3. a.b=3
  4. a.c=5
  5. console.log("%o",a)</spanstyle="line-height:>
复制代码
5、分组显示
利用console.group和console.groupEnd（注意大小写）可以将返回的数据分组显示，以便我们分类进行对比。例如：
  1. console.group(‘第一组‘)
  2.         console.log(3)
  3.         console.log(5)
  4.         console.log(7)
  5. console.groupEnd()

  7. console.group(‘第二组‘)
  8.         console.log(4)
  9.         console.log(6)
  10.         console.log(8)
  11. console.groupEnd()
复制代码
在chrome中显示为：
技术分享

不过这个命令我们伟大的IE浏览器并不支持
技术分享


6、console.dir
这个命令的作用是打印输出一个对象内的所有属性
例如：
  1. var a={}
  2. a.b=3;
  3. a.c=5;

  5. console.dir(a)
复制代码
在chrome中 除了我们定义的b，c两个变量会打印出来时，一些隐藏属性也会被打印出来

在firebug中只会打印出b，c

在IE中 只会打印出[object,object]

7、console.dirxml
这个命令我们伟大的IE仍旧不支持，他的作用就是打印出书dom文档树，比如说：
  1. <body>
  2.         <div id="tree">
  3.             <ul>
  4.                 <li>aaa</li>
  5.             <li>bbb</li>
  6.             <li>ccc</li>
  7.             <li>ddd</li>
  8.         </ul>
  9.       
  10.     </div>
  11.    
  12. </body>

  14. <script>
  15. var tree=document.getElementById("tree");

  17. console.dirxml(tree)
  18. </script>
复制代码
在chrome里是这样，
技术分享

在firebug中样子基本相同就不发了

8、console.trace
该命令用于跟踪一个函数的调用轨迹，这个测试函数运行很有帮助，只要给想测试的函数里面加入console.trace就行了，当然，我们伟大的IE仍旧不支持。

9、console.assert
这个命令用于判断某个表达式或变量是否为真
例如:
  1. var a=3;
  2. console.assert(a==5);
复制代码
在chrome中返回：
技术分享

ie返回：
技术分享

firebug返回：
技术分享


未命名ff.jpg (6.93 KB, 下载次数: 15)

技术分享

 

 

js调试工具Console命令详解

标签：

原文地址：http://www.cnblogs.com/zhrn/p/4578775.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！