javascript的console用法是什么


当前第2页 返回上一页

console.log(object[, object...])

这个不用多说,这个应该是开发者最常用的吧,也不知道是谁规定的。。。

1

console.log('log'); // 输出 log

console.profile([profileLabel])

这是个挺高大上的东西,可用于性能分析。在 JS 开发中,我们常常要评估段代码或是某个函数的性能。在函数中手动打印时间固然可以,但显得不够灵活而且有误差。借助控制台以及console.profile()方法我们可以很方便地监控运行性能。

例如下面这段代码:

1

2

3

4

5

6

7

8

9

function parent() {  for (var i = 0; i < 10000; i++) {

    childA()

  }

}function childA(j) {  for (var i = 0; i < j; i++) {}

}

 

console.profile('性能分析');

parent();

console.profileEnd();

然后我们可以在 Profiles 面板下看到上述代码运行过程中的消耗时间。

页面加载过程的性能优化是前端开发的一个重要部分,使用控制台的 profiles 面板可以监控所有 JS 的运行情况使用方法就像录像机一样,控制台会把运行过程录制下来。如图,工具栏上有录制和停止按钮。

录制结果:

console.time(name)
计时器,可以将成对的console.time()console.timeEnd()之间代码的运行时间输出到控制台上,name参数可作为标签名。

1

2

3

console.time('计时器');for (var i = 0; i < 1000; i++) {  for (var j = 0; j < 1000; j++) {}

}

console.timeEnd('计时器');

console.trace()

console.trace()用来追踪函数的调用过程。在大型项目尤其是框架开发中,函数的调用轨迹可以十分复杂,console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。

1

2

3

4

5

function tracer(a) {

  console.trace();  return a;

}function foo(a) {  return bar(a);

}function bar(a) {  return tracer(a);

}var a = foo('tracer');

输出:
console.warn(object[, object...])

输出参数的内容,作为警告提示。

1

console.warn('warn'); // 输出 warn

占位符

console对象上的五个直接输出方法,console.log(),console.warn(),console.error(),console.exception()(等同于console.error())和console.info(),都可以使用占位符。支持的占位符有四种,分别是字符(%s)、整数(%d%i)、浮点数(%f)和对象(%o)。

1

2

3

4

console.log('%s是%d年%d月%d日', '今天', 2014, 4, 15);

console.log('圆周率是%f', 3.14159);var obj = {

  name: 'classicemi'}

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

还有一种特殊的标示符%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如何修改html

使用h5实现react拖拽排序组件的方法(附代码)

javascript中var有啥缺陷

javascript如何修改文件内容

javascript怎么比较大小

javascript怎么判断值是否是数字

javascript $用法有哪些

javascript怎么删除dom

深入浅出了解javascript的node中间件原理

为什么电脑没有javascript

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...