一文搞懂JS调试之console.log()作用与用法

console.log()对于开发者来说一点也不陌生，尤其是前端开发、Web开发，这是我们离不开的调试工具。有点类似于alert啊，不过不会打断操作。主要是方便调式javascript用的。

相比alert他的优点是：1、他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。2、console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。3、console里面的内容非常丰富，你可以在控制台输入：console，然后就可看到：

如果想清空控制台，可以点击左上角那个
来清空，当然也可以通过在控制台输入console.clear()来实现清空控制台信息。如下图所示[sub][sup][/sup][/sub]

console.log()定义console.log()：可以将变量输出到浏览器的控制台中，方便开发者调用JS代码，它是一个使用频率很高的功能。
提示：浏览器中按 F12 可以打开浏览器的控制台(也可以叫做开发者工具)
语法：

console.log(var);

复制代码

参数：
var：变量，可以是数组类型，对象类型，或者字符串类型等
console.log()用法1、console.log()打印字符串

var str = 'hi-laoz.com';console.log(str);var str2 = '老曾的博客';console.log(str2);

复制代码

打印结果：

2、console.log()打印数组

[/code][code]var arr = new Array('beijing','shandong','hangzhou','guangdong');

复制代码

console.log(arr);

复制代码

[/code]
打印结果：
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-c7e2de0c0af51f60add296be4e574501[/img]
3、console.log打印一个对象变量
[list][*][*][*][*][/list][code]

复制代码

var obj = { Host: "http://www.hi-laoz.com", Name: "老曾的博客"};

复制代码

console.log(obj);

复制代码

[/code]打印结果：
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-c428fd40f2d5fedbf49ad5d4ac2be147[/img]
console.log()[url=http://mp.weixin.qq.com/s?__biz=MzAxODQxMDIzNA==&mid=2652381883&idx=1&sn=1bc862845c9543a7ebc3fd8d8d0535ec&chksm=803a3d2eb74db438e5d7c6a7d2709e535d7111b811d7e93ea66d39bd3395464443850a916503&scene=21#wechat_redirect]高级用法[/url]console.log()可以通过一些特有的占位符进行信息的加工输出，当然你只要粗略的了解一下即可
console.log()用到的占位符号：
[b]格式占位符[/b][b]作用[/b]%s
字符串
%d 或 %i
整数
%f
浮点数
%o
可展开的DOM
%O
列出DOM的属性
%c
根据提供的css样式格式化字符串
利用console.log()打印出对象和DOM节点1、打印一个DOM节点，区别占位符 %o 与 %O不同
[list][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码

[/code][code]

复制代码

测试console

复制代码

老曾的博客http://www.hi-laoz.com

复制代码

浏览器中按 F12 可以打开浏览器的控制台

复制代码

[/code][code]console.log(document.body);

复制代码

console.log('%o',document.body);

复制代码

console.log('%O', document.body);

复制代码

[/code][code]

复制代码

[/code]打印结果：
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-39dd84cf1c54d149fe0b3976b0e56747[/img]
2、打印一个obj对象，区别占位符 %o 与 %O不同
[list][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码

[/code][code]测试console

复制代码

老曾的博客http://www.hi-laoz.com

复制代码

浏览器中按 F12 可以打开浏览器的控制台

复制代码

[/code][code]var obj = {'name':'laoz','age':'22','page':'http://www.hi-laoz.com'};

复制代码

console.log('%o',obj);

复制代码

console.log('%O', obj);

复制代码

[/code][code]

复制代码

[/code]打印结果：
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-7d661d378b416e361901843d964b7ed7[/img]
注意：
1、%o、%O都是用来输出Obj对象的
2、%o、%O在打印普通对象时，是没有区别的
3、%o、%O在打印DOM节点时，区别是很大的
[code]// 格式成可展开的的DOM，像在开发者工具Element面板那样可展开

复制代码

console.log('%o',document.body.firstElementChild);

复制代码

// 像JS对象那样访问DOM元素，可查看DOM元素的属性// 等同于console.dir(document.body)

复制代码

console.log('%O',document.body);

复制代码

[/code]
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-926c8d41a877177225cb97e79911f771[/img]
[code]

复制代码

例：利用console.log()打印整数，1、使用%d占位符，并进行计算

[/code][code]console.log('%d + %d =' ,1,2,3);

复制代码

[/code]
打印结果：
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-30d37faafd407c5e7e48e04be605901d[/img]
2、使用%i占位符并进行计算
[list][*][*][*][/list][code]

复制代码

console.log('%i + %i =' ,1,2,3);

复制代码

[/code]
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-b4489e5595dadb8eaf9d2fcb615edf43[/img]
例：利用console.log()打印带有样式的文字[list][*][*][*][/list][code]

复制代码

console.log('老曾%c的%c博客' ,'color:red','color:blue');

复制代码

[code][/code]

打印结果：

注意：

console不能定义img，因此用背景图片代替。
console不支持width和height，利用空格和font-size代替；还可以使用padding和line-height代替宽高。
console输出url会自动变为可以点击的超链接