一文讲明白:前端调试函数console.log()与info,debug,dir,alert()之间的区别

文编|JavaBuild

大家好呀，我是JavaBuild，以后可以喊我鸟哥，嘿嘿！俺滴座右铭是不在沉默中爆发，就在沉默中灭亡，一起加油学习，厚积薄发！

场景介绍：

在日常的前端后端开发中，总避免不了会用到JS语法，在JS中我们常常会使用console.log()函数进行代码的调试，但类似的调试函数有很多，常常会使用混淆，或者在不恰当的场景使用不恰当的函数，达不到想要的调试结果，最近就有一个网友问了我关于console.log()相关的函数以及区别。

这里做一下统一的整理，供自己和同学们记忆哈（其实这是非常基础的知识点啦）

console.log()、console.info()、console.debug()之间的区别？

这三个函数均可以在浏览器端控制台打印信息，本质上没有明细区别，在展示上有细微差别：其中，console.info()打印出的信息，在控制显示的时候信息前面会出现一个小图标，而且谷歌浏览器和微软Edge不支持console.debug()。因此，三者之中推荐使用console.log()最安全。

案例代码：

xml 复制代码

<!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则打印的是对象的属性和方法。

案例代码：

xml 复制代码

<!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()方法。

案例代码：

xml 复制代码

<!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>