媒介

作为前端工程师，我们天天都离不开用控制台调试代码，console.log也成了我们最经常运用的敕令，那除了用console.log，另有许多console的要领能够运用，熟练掌握它们，能够让我们在控制台看到的信息更雅观正确，也会大大提高我们的开辟效力哦，下面就跟小肆一起来看看吧.

Chrome的控制台

大部份经常运用浏览器都有各自的控制台，不太小肆用着最习气的照样Chrome的控制台，翻开chrome，win体系按F12，mac体系按command+option+J就可以够呼出控制台了，切换到Console标签就可以看到以下信息：

我们能够看到，baidu还在控制台给我们留了个小彩蛋，我想这个彩蛋也是为我们顺序员同砚留的吧。让我们先学第一个敕令消灭控制台来最先吧。

消灭控制台

在chorme下消灭控制台的要领有许多：

• 输入console.clear()敕令或clear()敕令
• 运用快捷键 Control + J 或 Command + K
• 点击控制台左上角第二个图标 🚫

显现信息的敕令

console.log('手艺豪恣聊')     // 输出一般信息
console.info('手艺豪恣聊')    // 输出提醒信息
console.warn('手艺豪恣聊')    // 输出正告信息
console.error('手艺豪恣聊')   // 输出毛病信息
console.debug('手艺豪恣聊')   // 输出调试信息

console.log、console.info、console.debug这三个敕令能够理解为一个，我们只需要用console.log就行，而且chrome还不支撑console.debug敕令。

console.warn敕令输出正告信息，信息前带有黄色正告标记。
console.error输出毛病信息，信息前带有赤色毛病标记，示意失足，同时会显现毛病发作的客栈。
上段代码在chrome控制台输出效果以下:

在safari输出效果以下:

占位符

console上述的敕令支撑printf的占位符花样，支撑的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）:

//字符(%s)
console.log("%s","手艺豪恣聊");
//整数(%d或%i)
console.log("%d年%d月%d日",2019,1,6); 
//浮点数(%f)
console.log("PI=%f",3.1415926);

显现效果以下：

%o、%O 都是用来输出 Object 对象的，对一般的 Object 对象，二者没区分，然则打印dom节点时就不一样了：

%c 占位符是最经常运用的。运用 %c 占位符时，对应的背面的参数必需是 CSS 语句，用来对输出内容举行 CSS 衬着。罕见的输出体式格局有两种：笔墨款式、图片输出。

信息分组

console.group()用于将显现的信息分组，能够把信息举行摺叠和睁开。
console.groupEnd()完毕内联分组

将对象以树状构造展示

console.dir()能够显现一个对象一切的属性和要领.

显现某个节点的内容

console.dirxml()用来显现网页的某个节点(node)所包括的html/xml代码

推断变量是不是是真

console.assert()用来推断一个表达式或变量是不是为真，
此要领接收两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，不然不会有任何效果。

计时功用

console.time()和console.timeEnd()，用来显现代码的运转时候

console.time("控制台计时器");
for(var i = 0; i < 10000; i++){
    for(var j = 0; j < 10000; j++){}       
}
console.timeEnd("控制台计时器");

机能剖析performance profile

console.profile()和console.proileEnd()用来剖析顺序各个部份的运转时候，找出瓶颈地点。

function All(){
    for(var i = 0; i < 10; i++){
        funcA(100);
    }
    funcB(1000);
}
function funcA(count){
    for(var i = 0; i < count; i++){};
}
function funcB(count){
    for(var i = 0; i < count; i++){};
}
console.profile("机能剖析器");
All();
console.profileEnd();

细致的信息在chrome控制台里的”profile”选项里检察

console.count()统计代码被执行的次数

function myFunction(){
    console.count("myFunction 被执行的次数");
}
myFunction();       //myFunction 被执行的次数: 1
myFunction();       //myFunction 被执行的次数: 2
myFunction();       //myFunction 被执行的次数: 3

console.table表格显现要领

总结

合理的应用console的种种要领，会使我们的调试历程越发愉悦，本日的分享就到这里了，记得右下角点悦目呦！

手艺豪恣聊民众号，逐日干货，最前沿的手艺知识，扫描下方二维码关注：