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

结果展示:

相关推荐
程序猿阿伟9 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
尘觉10 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
chxii12 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够12 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
咖啡の猫14 小时前
Vue初始化脚手架
前端·javascript·vue.js
拉不动的猪16 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛16 小时前
next.js项目部署流程
开发语言·前端·javascript
非凡ghost16 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
神膘护体小月半16 小时前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue
岁月宁静16 小时前
Vue 3.5 + WangEditor 打造智能笔记编辑器:语音识别功能深度实现
前端·javascript·vue.js