console.log(object[, object...])
这个不用多说,这个应该是开发者最常用的吧,也不知道是谁规定的。。。
1 |
|
console.profile([profileLabel])
这是个挺高大上的东西,可用于性能分析。在 JS 开发中,我们常常要评估段代码或是某个函数的性能。在函数中手动打印时间固然可以,但显得不够灵活而且有误差。借助控制台以及console.profile()
方法我们可以很方便地监控运行性能。
例如下面这段代码:
1 2 3 4 5 6 7 8 9 |
|
然后我们可以在 Profiles 面板下看到上述代码运行过程中的消耗时间。
页面加载过程的性能优化是前端开发的一个重要部分,使用控制台的 profiles 面板可以监控所有 JS 的运行情况使用方法就像录像机一样,控制台会把运行过程录制下来。如图,工具栏上有录制和停止按钮。
录制结果:
console.time(name)
计时器,可以将成对的console.time()
和console.timeEnd()
之间代码的运行时间输出到控制台上,name
参数可作为标签名。
1 2 3 |
|
console.trace()
console.trace()
用来追踪函数的调用过程。在大型项目尤其是框架开发中,函数的调用轨迹可以十分复杂,console.trace()
方法可以将函数的被调用过程清楚地输出到控制台上。
1 2 3 4 5 |
|
输出:console.warn(object[, object...])
输出参数的内容,作为警告提示。
1 |
|
占位符
console
对象上的五个直接输出方法,console.log()
,console.warn()
,console.error()
,console.exception()
(等同于console.error()
)和console.info()
,都可以使用占位符。支持的占位符有四种,分别是字符(%s
)、整数(%d
或 %i
)、浮点数(%f
)和对象(%o
)。
1 2 3 4 |
|
还有一种特殊的标示符
%c
,对输出的文字可以附加特殊的样式,当进行大型项目开发的时候,代码中可能有很多其他开发者添加的控制台语句。开发者对自己的输出定制特别的样式就可以方便自己在眼花缭乱的输出结果中一眼看到自己需要的内容。想象力丰富的童鞋也可以做出有创意的输出信息,比如常见的招聘信息和个人介绍啥的。
输出结果:console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');
%c
标示符可以用各种 CSS 语句来为输出添加样式,再随便举个栗子,background
属性的url()
中添加图片路径就可以实现图片的输出了,各位前端童鞋快施展你们的 CSS 神技来把控制台玩坏吧~~
【推荐学习:javascript高级教程】
网友补充:
1.console.debug()
用于输出输出debug的信息。
2.console.timeStamp()
用于标记运行时的timeline信息。
3.console.memory
用于显示此刻使用的内存信息(这是一个属性而不是方法)。
4.console.clear()
清空控制台的内容(当然你可以用快捷键ctrl+L)。
5.$0
可以在控制台输出在Elements面板选中的页面元素。
6.$_
表示上一次在控制台键入的命令,你也可以用快捷键“上方向键”来达到同样的效果。
7.$x
可以用xPath的语法来获取页面上的元素。
以上就是javascript的console用法是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《javascript》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者