写在前面
做前端开发已经有一两年了吧,对于console对象你应该不陌生吧,那我猜你经常用的是console.log()方法,对于console其它的方法你还了解多少呢?这篇文章我们一起来看看console这个对象的另外一些方法,增加你的一些小技能。
console介绍
console对象其实并不是我们JS内置的对象,而是宿主对象,也就是浏览器对象提供给我们的内置对象,我们可以拿这个对象来调试我们的程序,console对象最大的用处就是这个了。但是除了调试程序之外,它还提供了一个命令行接口,用来和网页代码进行互动,但这个用途貌似被我们忽略很久了。
console对象方法汇总
方法 | 描述 | 实例 |
---|---|---|
assert() | ssert方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。 | // 实例 console.assert(true === false, "判断条件不成立") // Assertion failed: 判断条件不成立 |
clear() | 清除当前控制台的所有输出,将光标回置到第一行。 | console.clear() |
count() | 用于计数,输出它被调用了多少次。 | (function() { for (var i = 0; i < 5; i++) { console.count('count'); } })(); |
error() | 输出信息时,在最前面加一个红色的叉,表示出错,同时会显示错误发生的堆栈。 | console.error("Error: %s (%i)", "Server is not responding",500) |
group() | 用于将显示的信息分组,可以把信息进行折叠和展开。 | console.group('第一层'); console.group('第二层'); console.log('error'); console.error('error'); console.warn('error'); console.groupEnd(); console.groupEnd(); |
groupCollapsed() | 与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。 | console.groupCollapsed('第一层'); console.groupCollapsed('第二层'); console.log('error'); console.error('error'); console.warn('error'); console.groupEnd(); console.groupEnd(); |
groupEnd() | 结束内联分组 | console.group('Group One'); console.group('Group Two'); // some code console.groupEnd(); // Group Two 结束 console.groupEnd(); // Group One 结束 |
info() | console.log 别名,输出信息 | console.info("runoob") |
log() | 输出信息 | console.log("runoob") |
table() | 将复合类型的数据转为表格显示。 | var arr= [ { num: "1"}, { num: "2"}, { num: "3" } ]; console.table(arr); var obj= { a:{ num: "1"}, b:{ num: "2"}, c:{ num: "3" } }; console.table(obj); |
time() | 计时开始 | console.time('计时器1'); for (var i = 0; i < 100; i++) { for (var j = 0; j < 100; j++) {} } console.timeEnd('计时器1'); console.time('计时器2'); for (var i = 0; i < 1000; i++) { for (var j = 0; j < 1000; j++) {} } console.timeEnd('计时器2'); |
timeEnd() | 计时结束 | console.time('计时器1'); for (var i = 0; i < 100; i++) { for (var j = 0; j < 100; j++) {} } console.timeEnd('计时器1'); console.time('计时器2'); for (var i = 0; i < 1000; i++) { for (var j = 0; j < 1000; j++) {} } console.timeEnd('计时器2'); |
trace() | 追踪函数的调用过程 | function d(a) { console.trace(); return a; } function b(a) { return c(a); } function c(a) { return d(a); } var a = b('123'); |
warn() | 输出警告信息 | console.warn("警告") |
console常用方法
1、常见的几种方法
console.log('输出调试信息');
console.info('输出一般信息');
console.error('输出错误信息');
console.warn('输出警告信息');
2、信息分组
console.group('第一组');
console.log('第一组信息');
console.log('第一组信息');
console.log('第一组信息');
console.groupEnd();
console.group('第二组');
console.log('第二组信息');
console.log('第二组信息');
console.log('第二组信息');
console.groupEnd();
3、查看对象信息
var myself = {
name: 'X北辰北',
url: 'www.xbeichen.cn',
age: 25
};
console.dir(myself);
4、显示某个节点的内容
<div id="xbeichen">
<h1>Hello World</h1>
<span>用来测试显示节点内容的console对象方法</span>
</div>
<script>
var dom = document.getElementById("xbeichen");
console.dirxml(dom);
</script>
5、判断变量是否为真
var data = 1;
console.assert(data);
var year = 2020;
console.assert(year == 2019);
第一段代码中结果为真,所以没有输出任何信息,第二段由于结果为假,所以输出了异常信息。
6、追踪函数的调用轨迹
function addNumber(a, b) {
console.trace();
return a + b;
}
var result = addNumber3(22, 22);
function addNumber3(a, b) {
return addNumber2(a, b);
}
function addNumber2(a, b) {
return addNumber1(a, b);
}
function addNumber1(a, b) {
return addNumber(a, b);
}
7、计时功能
console.time('计时器');
for(var i = 0; i < 99; i++) {
for(var m = 0; m < 1000; m++) {
//空循环
}
}
console.timeEnd('计时器');
8、性能分析
function All() {
console.log('这部分可以是你的逻辑操作');
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();
9、表格显示复合型数据
var data = [{
name: 'xbeichen',
url: 'www.xbeichen.cn'
}, {
name: 'Geov',
url: 'www.geov.online'
}];
console.table(data);
总结
以上就是关于console对象中我们常用的几个方法了,除了这些之外还有很多,希望大家自己去学习总结了。