谷歌调试器——Console

最新推荐文章于 2025-08-27 16:21:04 发布

原创最新推荐文章于 2025-08-27 16:21:04 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #safari #chrome

chrome 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Chrome开发者工具中的Console选项卡，包括console对象的各种方法如log、debug、info、table、dir、time/timeEnd、group、count、trace、warn和error等，以及如何使用它们进行调试和性能分析。此外，还讲解了Console选项卡的其他功能，如清屏、切换上下文、过滤类别和设置选项，帮助前端开发者更有效地进行代码调试和问题排查。

谷歌调试器

2. Console选项卡

再聊这个选项卡之前咱们先说说console这个对象

相信前端程序员肯定经常使用console.log 这个方法进行控制台输出吧，事实上，console对象上还有很多很多方法

debug
- 打印调试信息
- 默认浏览器是不展示调试信息，浏览器将其归类到Verbose中,本质上与console.log 并没什么区别
- ```
console.debug('debug')
```
log
info
- 在谷歌浏览器中与log并无区别，在safari浏览器中会带有一个图标
- ```
console.log('log:hello world')
console.info('info:hello world')
```

table

将数据以表格的形式显示。
这个方法需要一个必须参数 data，data 必须是一个数组或者是一个对象；还可以使用一个可选参数 columns,该参数为显示的列，默认显示全部。

const list = [
    {name:'小红',age:18,score:90},
    {name:'小蓝',age:19,score:88},
    {name:'小绿',age:20,score:79},
    {name:'小黄',age:21,score:92},
]
const obj = {
    a:1,
    b:2,
    c:3,
    school:'清华'
}
console.table(list);
console.table(list,['score']);
console.table(obj);

点击某一列还可以进行排序

dir

打印对象结构

// 当我们想要查看一个元素的的属性有哪些时，使用log对象只能打印其元素结构 
console.log(document.body)
console.dir(document.body)

time | timeEnd

计时,开始计时标签与结束计时标签必须一致
当我们想看不同代码所执行的时间时

const fun2 = function(){
    console.time('start');
    let i = 0;
    while(i<10000){
        i++;
    }
    console.timeEnd('start');
}
fun2();

group

开启分组，将分组结束前的输出都放在同一组里

console.group('分组1') // 默认打开
// console.groupCollapsed('分组1')// 默认关闭
console.log('xxxxxxxxx')
console.log('ssssssss');
console.groupEnd('分组1')

count

输出 count() 被调用的次数。此函数接受一个可选参数 label。
如果有 label，此函数输出为那个指定的 label 和 count() 被调用的次数。

如果 label 被忽略，此函数输出 count() 在其所处位置上被调用的次数。

const fun1 = function(){
    for(let i=0;i<1000;i++){
        if(i%2===0&&i%3===0){
            console.count('计数')
        }
    }
    console.countReset('计数') // 清除计数
    console.count('计数')
}
fun1();

trace
- 输出该行代码所在的堆栈信息，通俗的来讲就是该行代码到底是怎么调用的。当我们在项目中相知道某一个函数的调用情况时便可以使用这个函数。
- ```
const a = function(){
    console.trace();
}
const b = function(){
    a();
}
const c = function(){
    b();
}
c();
```
warn 和 error
- 这两个方法主要是写库或者框架的开发人员用的比较多
- ```
console.warn('警告信息');
console.error('错误信息')
```

给消息添加样式

// 定义一个样式字符串 就跟写style一样
const styles = `
padding:5px;
background-color:#90442E;
color:white;
font-style:italic;
border:5px solid #E06E3C;
font-size:34px;
`
// 在需要样式的信息前添加%c 在该后面的字符串内容会应用写的样式
console.log('%c我是有样式的消息',styles);

接下来咱们开始正式说一下这个console选项卡
请添加图片描述

是该页面产生的所有消息，展开如下
- user messages 是指你主动使用console相关的函数输出的信息
- errors 和 warnings 分别对应console的error和warn方法输出的信息
- info 就是指除了使用debug,error,warn 方法外输出的信息
- verbose 使用console.debug打印的信息会归类到这
  - 显示了一些性能相关的信息
console选项卡清屏
当前console选项卡所处的上下文，默认是顶级，当然还有其它的上下文，比如说插件，那有什么用呢？当你页面有iframe时，你想调试iframe下面方法，这时候就切换到iframe上下文即可
用来快捷控制选项卡展示的类别信息，默认不展示verbose类型的消息
issues 是指浏览器的相关策略
用来调整console选项卡的相关设则
- 如果preserve log选项勾选上的话，浏览器刷新将保留上次的console信息