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

结果展示:

相关推荐
demi_meng2 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君20163 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
EndingCoder5 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
我胡为喜呀5 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
liangshanbo12157 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
Never_Satisfied8 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果8 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
rechol9 小时前
类与对象(中)笔记整理
java·javascript·笔记
Luffe船长9 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
仲夏幻境9 小时前
js利用ajax同步调用如何
开发语言·javascript·ajax