js基础-引用类型-console对象 ★☆

最新推荐文章于 2024-09-10 08:35:25 发布

front_end_fan

最新推荐文章于 2024-09-10 08:35:25 发布

阅读量542

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript console

本文链接：https://blog.youkuaiyun.com/qq_39198420/article/details/78047793

javascript 专栏收录该内容

74 篇文章

订阅专栏

本文介绍了JavaScript的console对象及其多种方法的使用，包括日志记录、性能监控、代码调试等功能，并展示了如何自定义console方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

console对象

console 对象是JavaScript的原生对象，可以将信息输出在控制台。

1、打开控制台

不同系统平台打开浏览器的控制台可能有些不一样，下面以chrome浏览器为例，可以使用下列方式打开：

按F12
鼠标右键里选择“检查”
在右上角的菜单中点击“更多工具/开发者工具”

打开控制台以后，你可以看到下列不同的面板：

Elements：查看网页的HTML源码和CSS代码。 

Resources：查看网页加载的各种资源文件（比如代码文件、字体文件、css文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。 

Network：查看网页的HTTP通信情况。 

Sources：查看网页加载的所有源码。 

Timeline：查看各种网页行为随时间变化的情况。 

Profiles：查看网页的性能情况，比如CPU和内存消耗。 

Console：用来运行JavaScript命令。

2、console对象的方法

2.1 log()、warn()、info()、error()、debug()

console.log() ，在控制台中打印信息，它会自动在每次输出的结尾，添加换行符，它可以接受任何字符串、数字和JavaScript对象，也可以接受换行符n以及制表符t。

console.log(1);  // 1 

console.log('hello');  // "hello"

它可以接受多个参数，将它们的结果连接起来输出。

console.log('a', 'b', 1);  // a b 1

当然 console 可不止这一个方法，它还有：

console.info 用于输出提示性信息，会带上一个蓝色图标
console.error用于输出错误信息，会在最前面带上红色的叉，表示出错
console.warn用于输出警示信息，会在最前面带上黄色三角
console.debug用于输出调试信息

console.info(“提醒”);  

console.error(“报错了”);  

console.warn(“警告”);  

console.debug(“调试信息”);

console对象的上面5种方法，如果第一个参数是格式字符串（使用了格式占位符），将依次用后面的参数替换占位符，然后再进行输出。

不过，占位符的种类比较少，只支持下列五种：

字符（%s） 

整数（%d或%i） 

浮点数（%f） 

对象（%o） 

CSS格式字符串（%c）

例子：

console.log('%s%s',1,2);  // 12

console.log("%c自定义样式","font-size:20px;color:green"); 

console.log("%c我是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red");

2.2 trace()、clear()

console.trace() 方法显示当前执行的代码在堆栈中的调用路径。

用 console.clear() 清空控制台。

2.3 dir()、dirxml()

console.dir 直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等等

console.log({name: 'tg', age: 12}); 

// Object {name: "tg", age: 12}

console.dir({name: 'tg', age: 12}); 

// Object 

     name: "tg", 

     age: 12, 

     proto: Object

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

<table> 

    <thead> 

        <tr> 

            <th></th> 

            <th></th> 

            <th></th> 

            <th></th> 

            <th></th> 

        </tr> 

    </thead> 

</table> 

<script> 

    var table=document.querySelector("table"); 

    console.dirxml(table); 

</script>

//输出： 

<table> 

    <thead> 

        <tr> 

            <th></th> 

            <th></th> 

            <th></th> 

            <th></th> 

            <th></th> 

        </tr> 

    </thead> 

</table>

2.4 group()、groupEnd()、groupCollapsed()

console.group 和 console.groupend 这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。
console.group 输出一组信息的开头
console.groupEnd 结束一组输出信息

console.groupCollapsed 方法与 console.group 方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。

2.5 assert()

console.assert 对输入的表达式进行断言，接受两个参数，第一个参数是表达式，第二个参数是字符串。只有表达式为false时，才输出相应的信息到控制台，否则不输出。

var isTrue=true; 

console.assert(isTrue,"我是错误"); 

isTrue=false; 

console.assert(isTrue,"我是错误2");  // "我是错误2"

2.6 count()

console.count 当你想统计代码被执行的次数，这个方法很有用

function play(){ 

    console.count("执行次数："); 

} 

play();  // 执行次数：1 

play();  // 执行次数：2 

play();  // 执行次数：3

2.7 time()、timeEnd()

这两个方法用于计时，可以算出一个操作所花费的准确时间。

console.time 计时开始
console.timeEnd 计时结束

console.time("array"); 

var a=0; 

for(var i=0;i<100000;i++){ 

  a += i; 

} 

console.timeEnd("array");  // array : 6.063ms

2.8 profile()、profileEnd()

console.profile 和 console.profileEnd 配合一起使用来查看CPU使用相关信息

打开浏览器的开发者工具，在profile面板中，可以看到这个性能调试器的运行结果。

2.9 timeLine()、timeLineEnd()

console.timeLine 和 console.timeLineEnd 配合一起记录一段时间轴

3、自定义console对象的方法

console对象的所有方法都可以被覆盖，也就是说，我们可以自定义方法。

console['log'] = console['log'].bind(console, '温馨提示');

console.log('自定义方法');  // 温馨提示 自定义方法