The console command study notes

常用 console 命令

显示信息

console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');

显示信息

分组显示信息

利用 console.group() 和 console.groupEnd() 分组显示信息，支持嵌套。

console.group('Number');
console.group('Number A');
console.warn('4');
console.warn('0');
console.warn('4');
console.groupEnd();
console.group('Number A');
console.info('5');
console.info('0');
console.info('2');
console.groupEnd();
console.groupEnd();
console.group('lang');
console.log("HTML");
console.log("CSS");
console.log("Javascript");
console.groupEnd();

分组显示信息

占位符

以上 4 种显示信息的命令都可以使用占位符。支持的占位符有四种，分别是字符) %s、整数( %d 或 %i )、浮点数 %f 和对象 %o。

1	console.info('%s的%d种方法','显示信息',4);

占位符

var list = {};
list.data = [1,3,5,7,9];
list.name = 'console';
console.info('list: %o',list);

占位符
还有一种特殊的标示符 %c，对输出的文字可以附加特殊的样式

1	console.log('%cLife is short, you need Python','font-size:14px;font-weight:bold;font-style:italic;font-family:Helvetica Neue, Helvetica;color:#000;text-shadow:0 8px 9px #666,-2px -2px 2px #fff;');

占位符

console.table() 按表格显示

var lang = [
    {"Programming Language": "Python", Ratings: "4.302%" , "Sep 2016": 5},
    {"Programming Language": "JavaScript", Ratings: "2.929%" , "Sep 2016": 6},
    {"Programming Language": "R", Ratings: "1.684%" , "Sep 2016": 18}
]
console.table(lang);

按表格显示

显示对象的信息

console.dir() 可以显示一个对象所有的属性和方法，以下就是 console 对象的所有属性和方法。
显示对象的信息

显示 HTML 节点内容

<ul class="test-console-dirxml">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    var list = document.getElementsByClassName('test-console-dirxml')[0];
    console.dirxml(list);
</script>

显示 HTML 节点内容

显示代码运行时间

<ul class="test-console-time">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>
<script>
    function foo(){
        var items = document.getElementsByTagName("li");
        for(var i=0;i<items.length;i++){
            var x = Math.pow(i,10);
            (function(){
                for(var j=0;j<x;j++){}
                items[i].innerHTML = x;
            })(i);
        }
    }
    console.time('foo 计时器');
    foo();
    console.timeEnd('foo 计时器');
</script>

显示代码运行时间

console.trace() 追踪函数调用过程

性能分析

<ul class="test-console-time">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>
<script>
    function foo(){
        var items = document.getElementsByTagName("li");
        for(var i=0;i<items.length;i++){
            var x = Math.pow(i,10);
            (function(){
                for(var j=0;j<x;j++){}
                items[i].innerHTML = x;
            })(i);
        }
    }
    console.profile('foo 性能分析');
    foo();
    console.profileEnd('foo 性能分析');
</script>

性能分析

清空控制台

console.clear();

`$0~$4`

依次返回选中过的前5个元素，$0 返回当前选中元素，不足 5 个时返回 undefined。

Content

常用 console 命令