一文讲明白:前端调试函数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>

结果展示:

相关推荐
mCell10 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip10 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping16 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风17 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780017 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端17 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧17 小时前
Promise 的使用
前端·javascript
前端康师傅19 小时前
JavaScript 作用域
前端·javascript
云枫晖19 小时前
JS核心知识-事件循环
前端·javascript
eason_fan20 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript