美文网首页闲言碎语Web 前端开发 Web
干货:你真的会用console命令吗?

干货:你真的会用console命令吗?

作者: 柯琦 | 来源:发表于2016-09-21 16:27 被阅读110次
image.jpg

前言

个人而言,在前端开发中调试用的最多命令就是console了;哪里有问题了,我都会console.log下;相比debug调试来说,我还是喜欢这个!console.log()这个命令只要是前端coder都会知道,不过console命令只要这几个吗?你真的会用console.log()吗!

干货

下面就具体安利下console命令具体的命令:

1.console.log()

console.log('hello');
console.log('hello word!')

这个很常用,日志查看,这个不多说了

2 .占位符

console.log("%d+%d=%d",1,2,1+2)
console.log("%s+%s=%d",'a','b','a+b')

结果:


图片1.png

这个很好理解,就想c语言入门的时候,print打印一样。%d占位符表示number类型,%s占位符表示字符串类型;前端这里也这两种占位符用的多

3.分组-console.group()

console.group('第一组');
console.log('姓名:张飞');
console.log('性别:女');
console.groupEnd();
console.group('第二组');
console.log('姓名:Joy');
console.log('性别:男');
console.groupEnd();

结果:


图片2.png

4.查看对象信息-console.dir(obj)

var obj={
  name:'Marry',
  sex:'man',
  age:24,
  fun:function(){
    console.log(123);
}
console.dir(obj);

结果:


图片3.png

和console.log(obj)打印对象一样

5.性能分析-console.profile()

function doTask(){
    doSubTaskA(1000);
    doSubTaskA(100000);
    doSubTaskB(10000);
    doSubTaskC(1000,10000);
}
function doSubTaskA(count){
    for(var i=0;i<count;i++){}
}
 
function doSubTaskB(count){
    for(var i=0;i<count;i++){}
}
 
function doSubTaskC(countX,countY){
    for(var i=0;i<countX;i++){
        for(var j=0;j<countY;j++){} 
    }
}
console.profile('性能分析开始');
doTask();
console.profileEnd();

结果:

图片4.png
这里说明的是,有些文章查看方式是在console下显示的,而这里是在图片红箭头出查看,我看了下应该是浏览器做出的调整,这里放得是chrome浏览器查看方式,其余浏览器读者可自行查看下profile栏目

6.计时功能-console.time()

console.time("控制台计时器一");
  for(var i=0;i<1000;i++){
    for(var j=0;j<1000;j++){}
  }
console.timeEnd("控制台计时器一");

结果:


图片5.png

7.其他

除这些外还有其他的命令,输入下面代码可以查看,读者自己可以尝试尝试!

for(var i in console){
  console.log(i)
}
图片6.png

关注公众号:闲言碎语而已
个人网站:百咧个度,欢迎访问!
微博:柯琦-闲言碎语欢迎关注!

相关文章

  • 干货:你真的会用console命令吗?

    前言 个人而言,在前端开发中调试用的最多命令就是console了;哪里有问题了,我都会console.log下;相...

  • Node.js Console

    Console 稳定性:2-Stable 0x01 你真的了解Node.js的console吗 Console模块...

  • 什么是ISSUE

    你真的会用issue吗?

  • Gson使用指南 2017-08-15

    Gson使用指南系列其它文章你真的会用Gson吗?Gson使用指南(一)你真的会用Gson吗?Gson使用指南(二...

  • Block使用注意

    在项目中,我们经常会用到block,但是说起block你真的会用吗?你真的全都了解吗?如果心里犯嘀咕的话,那么就往...

  • 你真的会用HttpMessageConverter吗?

    前言 最近看了Spring MVC源码,感觉特别有趣,像发现了新大陆一般,不能自拔。图片来自互联网.png图片来自...

  • 你真的会用babel吗

    https://segmentfault.com/a/1190000011155061

  • 淘宝,你真的会用吗?

    淘宝有很多隐藏功能,使用好了就可以让淘宝成为自己的专属App,像你的闺蜜一样懂你,我搜集了一些淘宝的功能,下面分享...

  • 粘贴—你真的会用吗

    今天是参加E站到底特训营【第二期】Day6,学习主题“选择性粘贴”,内容大纲如下: 一、基本用法:Ctrl+Al...

  • 鼓励,你真的会用吗?

    带着娃出去买菜,顺便拿个包裹,这时候娃懒癌发作,非得要抱抱,无奈,一手抱娃,一手拎菜,还得在我和娃之间夹一个包裹,...

网友评论

    本文标题:干货:你真的会用console命令吗?

    本文链接:https://www.haomeiwen.com/subject/gwjaettx.html