文编|JavaBuild
大家好呀，我是JavaBuild，以后可以喊我鸟哥，嘿嘿！俺滴座右铭是不在沉默中爆发，就在沉默中灭亡，一起加油学习，厚积薄发！
场景介绍：
在日常的前端后端开发中，总避免不了会用到JS语法，在JS中我们常常会使用console.log()函数进行代码的调试，但类似的调试函数有很多，常常会使用混淆，或者在不恰当的场景使用不恰当的函数，达不到想要的调试结果，最近就有一个网友问了我关于console.log()相关的函数以及区别。
这里做一下统一的整理，供自己和同学们记忆哈（其实这是非常基础的知识点啦）
console.log()、console.info()、console.debug()之间的区别？
这三个函数均可以在浏览器端控制台打印信息，本质上没有明细区别，在展示上有细微差别：其中，console.info()打印出的信息，在控制显示的时候信息前面会出现一个小图标，而且谷歌浏览器和微软Edge不支持console.debug()。因此，三者之中推荐使用console.log()最安全。
案例代码：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>测试</title>
</head>
<body>
<script type="text/javascript">
console.info("我是info");
console.debug("我是debug");
console.log("我是log");
</script>
</body>
</html>
结果展示：
console.log()与console.dir()的区别？
在打印普通字符串数据时，两者没有区别，当打印对象时，log直接打印对象的结果信息，而dir则打印的是对象的属性和方法。
案例代码：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>测试</title>
</head>
<body>
<script type="text/javascript">
//cosole.log和dir区别
/**var obj = {
name: "javabuild",
desc: "I love codding !!!"
};
console.log(obj);
console.dir(obj);*/
function obj1() {
this.name = "test";
}
obj1.prototype.sayHi = function () {
console.log("Hello");
}
console.log(obj1);
console.dir(obj1);
</script>
</body>
</html>
结果展示：
console.log()与alert()函数的区别？
console.log()信息打印在控制台，可以打印任何信息；而alert()函数则是把信息通过弹窗展示，只能打印string数据，如果alert输出的是对象会自动调用toString()方法。
案例代码：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>测试</title>
</head>
<body>
<script type="text/javascript">
//cosole.log和dir区别
var obj = {
name: "javabuild",
desc: "I love codding !!!"
};
console.log(obj.name);
alert(obj.name);
</script>
</body>
</html>
结果展示：
浙公网安备 33010602011771号