//打开控制台查看结果 
    console.info('info')
    console.log('log')
    console.error('error')
    console.warn('warn')

    // 分组,默认展开
    console.group()
    console.log(1)
    console.log(12)
    console.log(123)
    console.groupEnd()

    // 分组,默认折叠
    console.groupCollapsed()
    console.log(1)
    console.log(12)
    console.log(123)
    console.groupEnd()

    // 将数组或者对象以table的形式打印出来
    console.table([1, 2, 3])

    // log计时器
    console.time('log计时器')
    for(let i = 0; i < 1000; i++){}
    console.timeEnd('log计时器')

    // 显示当前执行的代码在堆栈中的调用路径。
    //打印 调用链 fn2()调用fn1(),fn1()调用fn() trace: 追踪,追溯
    function fn() { console.trace(); }
    function fn1() { fn(); }
    function fn2() { fn1(); }
    fn2()



    //格式化输出
    /*
    console.log支持的格式标志有:
      %s 占位符
      %d 或 %i 整数
      %f 浮点数
      %o%O object对象
      %c css样式
    */
    console.log('%d + %d = %d', 1, 2, 3);
    //%o%O打印dom节点时就不一样
    console.log('%o', document.body);
    console.log('%O', document.body);
    // %c 后面的内容,增加css样式
    //附:console.log输出的超链接会被自动识别并加上灰色字体颜色和下划线的样式,而这个无法用%c覆盖
    console.log('123 %c 456', 'font-size:36px;color:red;');
    console.log('123 %c 4 http://www.google.com 56 %c 789', 'font-size:20px;color:#ff8400;', 'font-size:12px;color:#000');
    //利用css样式加载图片
    //没法直接设置width和height样式,line-height图片高度,再调padding
    console.log('%c ', 'background-image:url("http://iyeslogo.orbrand.com/150902Google/005.gif");background-size:120% 120%;background-repeat:no-repeat;background-position:center center;line-height:60px;padding:30px 120px;');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.