谷歌调试器——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选项卡

1. 是该页面产生的所有消息，展开如下

   • 

   • user messages 是指你主动使用console相关的函数输出的信息

   • errors 和 warnings 分别对应console的error和warn方法输出的信息

   • info 就是指除了使用debug,error,warn 方法外 输出的信息

   • verbose 使用console.debug打印的信息会归类到这

     • 

     • 显示了一些性能相关的信息

2. console选项卡清屏

3. 当前console选项卡所处的上下文，默认是顶级，当然还有其它的上下文，比如说插件，那有什么用呢？当你页面有iframe时，你想调试iframe下面方法，这时候就切换到iframe上下文即可

   • 

4. 用来快捷控制选项卡展示的类别信息，默认不展示verbose类型的消息

   • 

5. issues 是指浏览器的相关策略

   • 

6. 用来调整console选项卡的相关设则

   • 

   • 如果preserve log选项勾选上的话，浏览器刷新将保留上次的console信息

这篇好文章是转载于：学新通技术网