Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

九个Console命令，让js调试更简单 #32

Open
dwqs opened this issue Aug 5, 2016 · 49 comments
Open

九个Console命令，让js调试更简单 #32

dwqs opened this issue Aug 5, 2016 · 49 comments

Comments

@dwqs
Copy link
Owner

dwqs commented Aug 5, 2016 •
edited
Loading

一、显示信息的命令

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <title>常用console命令</title>
   5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <script type="text/javascript">
   9:         console.log('hello');
  10:         console.info('信息');
  11:         console.error('错误');
  12:         console.warn('警告');
  13:     </script>
  14: </body>
  15: </html>

最常用的就是console.log了。

二：占位符

console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）:

占位符 作用
%s 字符串
%d or %i 整数
%f 浮点数
%o 可展开的DOM
%O 列出DOM的属性
%c 根据提供的css样式格式化字符串 
   1: <script type="text/javascript">
   2:         console.log("%d年%d月%d日",2011,3,26);
   3: </script>

效果：
image

%o、%O都是用来输出Object对象的，对普通的Object对象，两者没区别，但是打印dom节点时就不一样了：

// 格式成可展开的的DOM，像在开发者工具Element面板那样可展开 
console.log('%o',document.body.firstElementChild); 
// 像JS对象那样访问DOM元素，可查看DOM元素的属性 
// 等同于console.dir(document.body.firstElementChild) 
console.log('%O',document.body.firstElementChild);

%c占位符是最常用的。使用%c占位符时，对应的后面的参数必须是CSS语句，用来对输出内容进行CSS渲染。常见的输出方式有两种：文字样式、图片输出。

文字输出

console.log("%cHello world,欢迎您！","color: red; font-size: 20px"); 
//输出红色的、20px大小的字符串：Hello world,欢迎您！

除了普通文本，还能输出如知乎的console面板一样的字符画。这些字符画是可以在线生成的：

大概方法：使用在线工具生成字符画，然后复制到sublime中，将每行开头的换行删除，且替换成\n。最后只有一行代码，即保证没有换行，最后再丢到console.log("")代码中即可，当然，也可以添加结合%c做出更酷炫的效果(console输出默认是不换行的)。

图片输出

image

由于 console不能定义img，因此用背景图片代替。此外，console不支持width和height，利用空格和font-size代替；还可以使用padding和line-height代替宽高。

不想这么麻烦，可以试试console-image这个插件。

三、信息分组

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <title>常用console命令</title>
   5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <script type="text/javascript">
   9:         console.group("第一组信息");
  10:
  11:     　　　　console.log("第一组第一条:我的博客(http://www.ido321.com)");
  12:
  13:     　　　　console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");
  14:
  15:     　　console.groupEnd();
  16:
  17: 　　    console.group("第二组信息");
  18:
  19:     　　　　console.log("第二组第一条:程序爱好者QQ群： 259280570");
  20:
  21:     　　　　console.log("第二组第二条:欢迎你加入");
  22:
  23: 　　    console.groupEnd();
  24:     </script>
  25: </body>
  26: </html>

效果：
image

四、查看对象的信息

console.dir()可以显示一个对象所有的属性和方法。

   1: <script type="text/javascript">
   2:         var info = {
   3:             blog:"http://www.ido321.com",
   4:             QQGroup:259280570,
   5:             message:"程序爱好者欢迎你的加入"
   6:         };
   7:         console.dir(info);
   8: </script>

效果：
image

五、显示某个节点的内容

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <title>常用console命令</title>
   5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6: </head>
   7: <body>
   8:     <div id="info">
   9:         <h3>我的博客：www.ido321.com</h3>
  10:         <p>程序爱好者:259280570,欢迎你的加入</p>
  11:     </div>
  12:     <script type="text/javascript">
  13:         var info = document.getElementById('info');
  14:         console.dirxml(info);
  15:     </script>
  16: </body>
  17: </html>

效果：
image

六、判断变量是否是真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

   1: <script type="text/javascript">
   2:     　　var result = 1;
   3:     　　console.assert( result );
   4:     　　var year = 2014;
   5:     　　console.assert(year == 2018 );
   6: </script>

1是非0值，是真；而第二个判断是假，在控制台显示错误信息
image

七、追踪函数的调用轨迹。

console.trace()用来追踪函数的调用轨迹。

   1: <script type="text/javascript">
   2: /*函数是如何被调用的，在其中加入console.trace()方法就可以了*/
   3: 　　function add(a,b){
   4:         console.trace();
   5: 　　　　return a+b;
   6: 　　}
   7: 　　var x = add3(1,1);
   8: 　　function add3(a,b){return add2(a,b);}
   9: 　　function add2(a,b){return add1(a,b);}
  10: 　　function add1(a,b){return add(a,b);}
  11: </script>

控制台输出信息：
image

八、计时功能

console.time()和console.timeEnd()，用来显示代码的运行时间。

   1: <script type="text/javascript">
   2: 　　console.time("控制台计时器一");
   3: 　　for(var i=0;i<1000;i++){
   4: 　　　　for(var j=0;j<1000;j++){}
   5: 　　}
   6: 　　console.timeEnd("控制台计时器一");
   7: </script>

运行时间是38.84ms
image

九、console.profile()的性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。

   1: <script type="text/javascript">
   2:     　　function All(){
   3:             alert(11);
   4: 　　　　     for(var i=0;i<10;i++){
   5:                 funcA(1000);
   6:              }
   7: 　　　　    funcB(10000);
   8: 　　    }
   9:
  10:     　　function funcA(count){
  11:     　　　　for(var i=0;i<count;i++){}
  12:     　　}
  13:
  14:     　　function funcB(count){
  15:     　　　　for(var i=0;i<count;i++){}
  16:     　　}
  17:
  18:     　　console.profile('性能分析器');
  19:     　　All();
  20:     　　console.profileEnd();
  21:     </script>

输出如图：
image

其它

从console.log说起
@CharlesSong
Copy link

cool,这么多年了还不知道有这么多用法

@ssjssh
Copy link

ssjssh commented Aug 11, 2016

赞

@alanzyy
Copy link

alanzyy commented Aug 12, 2016

必须赞

@xianlaioy
Copy link

赞，这个也不错http://www.cnblogs.com/zhongxinWang/p/4121111.html

@SeptemberMaples
Copy link

学到了。 收藏

@ppo279
Copy link

ppo279 commented Aug 18, 2016

1024:+1:

@chenxiaoangle
Copy link

well done~

@Yeahax
Copy link

Yeahax commented Aug 18, 2016

so cool!

@WellerQu
Copy link

干得漂亮

@pramper
Copy link

pramper commented Aug 19, 2016

赞赞赞！

@caixianglin
Copy link

必须点赞！

@jianzhou520
Copy link

assert, group, trace, profile

@Snapline
Copy link

牛逼！

@Plortinus
Copy link

看到第一条就star了

@zerosrat
Copy link

学习学习

@jsoyoy
Copy link

jsoyoy commented Aug 19, 2016

就只会console.log

@scinewoo
Copy link

不能再赞b(￣▽￣)d了

@tinyzh
Copy link

tinyzh commented Aug 20, 2016

请问下 profile为什么要加上一个alert

@kimifdw
Copy link

kimifdw commented Aug 21, 2016

牛逼

@gmaso
Copy link

gmaso commented Aug 21, 2016

赞，才知道有这么多用法

@agrug
Copy link

agrug commented Aug 22, 2016

最后一条很好用，多谢分享。

@chliuqi
Copy link

chliuqi commented Aug 22, 2016

感谢分享

@pgyf
Copy link

pgyf commented Aug 22, 2016

牛逼

@zanjs
Copy link

zanjs commented Aug 22, 2016

你为何这么棒 🐶

@yonglijia
Copy link

你为何这么屌

@liansong2011
Copy link

你为何这么棒

@liqingbao
Copy link

it's so diao

@xiashulin
Copy link

good

@Jovi
Copy link

Jovi commented Aug 23, 2016

抄袭，不多说
原文地址：http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html
大部分都是原句，没什么可辨的

@wkylin
Copy link

wkylin commented Aug 23, 2016

console.info(console);

@Niefee
Copy link

Niefee commented Aug 23, 2016

console.profile()没有题主那样的效果。

@Yangfan2016
Copy link

赞

@Evansy
Copy link

Evansy commented Aug 24, 2016

不赞不行 mark

@chuanxinwong
Copy link

console.table() 漏了

@foreverzmy
Copy link

666，get

@love4cola
Copy link

What r u so diao?

@lanzhiheng
Copy link

点赞的路过

@wrj913
Copy link

wrj913 commented Aug 25, 2016

棒

@vino24
Copy link

vino24 commented Aug 27, 2016 •
edited
Loading

console.assert还可以传入一个布尔值来代替if语句

@wangruiStart
Copy link

城会玩

@jaassoon jaassoon mentioned this issue Sep 18, 2016
Open
@forget1
Copy link

forget1 commented Sep 26, 2016

赞

@sunshuyang
Copy link

学习到了

@pinkski
Copy link

pinkski commented Oct 10, 2016

nice

@bayern0815
Copy link

学习了，赞

@ghost
Copy link

ghost commented Apr 11, 2017

赞一个很不错

@stoneyong stoneyong mentioned this issue Jul 7, 2017
Closed
@liuyueershihao
Copy link

厉害了！

@Bloom2036 Bloom2036 mentioned this issue Aug 16, 2017
Open
@xiangwenhu
Copy link

https://developers.google.com/web/tools/chrome-devtools/console/ 这才是王道

@leermao leermao mentioned this issue Oct 11, 2017
Open
@kissicechu
Copy link

666，mark带走了

@running-snail-sfs
Copy link

大神就是大神啊 ，这么多年真的不太清楚

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests