在前端调试js代码的时候,很多人都喜欢用 alert() 来进行调试,但是 alert() 会阻断JS的运行,而且对一些类型的变量无法输出,这就造成了不少的麻烦。针对这个问题,这篇文章就说一说js中的别一种调试方法 console.log()
console.log():可以将变量输出到浏览器的控制台中,方便开发者调用JS代码,它是一个使用频率很高的功能。
提示:浏览器中按 F12 可以打开浏览器的控制台(也可以叫做开发者工具)
语法:
console.log(var);
复制
参数:
var:变量,可以是数组类型,对象类型,或者字符串类型等
1、console.log()打印字符串
<script>
var str = 'feiniaomy.com';
console.log(str);
var str2 = '飞鸟慕鱼博客';
console.log(str2);
</script>
复制
打印结果:
2、console.log()打印数组
<script>
var arr = new Array('beijing','shandong','hangzhou','guangdong');
console.log(arr);
</script>
复制
打印结果:
3、console.log打印一个对象变量
<script>
var obj = { Host: "http://www.feiniaomy.com", Name: "飞鸟慕鱼博客"};
console.log(obj);
</script>
复制
打印结果:
console.log()可以通过一些特有的占位符进行信息的加工输出,当然你只要粗略的了解一下即可
console.log()用到的占位符号
%s:字符串
%d:整数
%i:整数
%f:浮点数
%o:obj对象
%O:obj对象
%c:CSS样式
1、打印一个DOM节点,区别占位符 %o 与 %O不同
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div>
<script>
console.log(document.body);
console.log('%o',document.body);
console.log('%O', document.body);
</script>
</body>
</html>
复制
打印结果:
2、打印一个obj对象,区别占位符 %o 与 %O不同
<script>
var obj = {'name':'MOCHU','age':'22','page':'http://www.feiniaomy.com'};
console.log(obj);
console.log(obj);
console.log(obj);
</script>
复制
打印结果:
注意:
1、%o、%O都是用来输出Obj对象的
2、%o、%O在打印普通对象时,是没有区别的
3、%o、%O在打印DOM节点时,区别是很大的
1、使用%d占位符,并进行计算
<script>
console.log('%d + %d =' ,1,2,3);
</script>
复制
打印结果:
2、使用%i占位符并进行计算
<script>
console.log('%i + %i =' ,1,2,3);
</script>
复制
打印结果:
<script>
console.log('飞鸟%c慕鱼%c博客' ,'color:red','color:blue');
</script>
复制
打印结果:
联系客服