console控制台命令不得不说的事情

最新推荐文章于 2022-11-17 15:47:37 发布

shandian84

最新推荐文章于 2022-11-17 15:47:37 发布

阅读量619

点赞数

分类专栏： javascript工具 javascript 文章标签： javascript firebug chrome firefox

javascript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

javascript工具

3 篇文章 0 订阅

订阅专栏

说道如何测试某段js代码是否运行或者赋值是否正确，大家一致都会说alert（）、document.write。的确，alert和document.write是我们日常最常用的输出命令，后来随着firebug的出现以及js文档越来越大型后，alert和document.write已经完全不能胜任js的调试工作，于是在firebug中就配套出了一个console属性，最后所有浏览器为了争夺市场，同时开发了自己的调试模式，就这样console属性成为了目前js调试命令里最受欢迎的方法。

一、如何调出控制台
方法大家都知道，firefox需要安装强大的firebug，其他浏览器会自带。剩下的只要按f12就可以了

二、言归正传说console
首先先说一下在ie下如果控制台没有开启使用console会报错，不过没有关系，开启开发人员工具刷新就一切正常了。
1、console.log
相信大家最常用的console的一个属性就是console.log。他的作用是将一般的消息传到控制台上。例如：

var a=3;
console.log(a);

复制代码

运行后我们在控制台上就能看到打印出一个3。同时这个属性还能帮助我们打印出一个对象或者函数。比如：

function a(){
var b=3;
}
var a1=new a();
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的时候则会返回一个对象的内部情况
例如：

<spanstyle="line-height: 1.5;"="">var a={}
a.b=3
a.c=5
console.log("%o",a)</spanstyle="line-height:>

复制代码

5、分组显示
利用console.group和console.groupEnd（注意大小写）可以将返回的数据分组显示，以便我们分类进行对比。例如：

console.group('第一组')
console.log(3)
console.log(5)
console.log(7)
console.groupEnd()
console.group('第二组')
console.log(4)
console.log(6)
console.log(8)
console.groupEnd()

复制代码

在chrome中显示为：

未命名f.jpg (5.45 KB, 下载次数: 0)

下载附件保存到图库

2013-3-18 10:47 上传

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

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

下载附件保存到图库

2013-3-18 10:48 上传

6、console.dir
这个命令的作用是打印输出一个对象内的所有属性
例如：

var a={}
a.b=3;
a.c=5;
console.dir(a)

复制代码

在chrome中除了我们定义的b，c两个变量会打印出来时，一些隐藏属性也会被打印出来

在firebug中只会打印出b，c

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

7、console.dirxml
这个命令我们伟大的IE仍旧不支持，他的作用就是打印出书dom文档树，比如说：

<body>
<div id="tree">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</div>
</body>
<script>
var tree=document.getElementById("tree");
console.dirxml(tree)
</script>

复制代码

在chrome里是这样，

未命名ffa.jpg (6.93 KB, 下载次数: 0)

下载附件保存到图库

2013-3-18 10:59 上传

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

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

9、console.assert
这个命令用于判断某个表达式或变量是否为真
例如:

var a=3;
console.assert(a==5);

复制代码

在chrome中返回：

tfew.jpg (2.44 KB, 下载次数: 0)

下载附件保存到图库

2013-3-18 11:09 上传

ie返回：

未命名ffaf.jpg (1.46 KB, 下载次数: 0)

下载附件保存到图库

2013-3-18 11:10 上传

firebug返回：

未命名faea.jpg (2.49 KB, 下载次数: 0)

下载附件保存到图库

2013-3-18 11:10 上传

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

下载附件保存到图库

2013-3-18 11:09 上传

shandian84

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
console控制台命令不得不说的事情

说道如何测试某段js代码是否运行或者赋值是否正确，大家一致都会说alert（）、document.write。的确，alert和document.write是我们日常最常用的输出命令，后来随着firebug的出现以及js文档越来越大型后，alert和document.write已经完全不能胜任js的调试工作，于是在firebug中就配套出了一个console属性，最后所有浏览器为了争夺市场，同时开
复制链接

扫一扫