关于chrome控制台那些事

时间:2023-01-31 08:56:00

作为一名前端,除了编写完美代码之外(个人还不具备),当然也要会调试啦,对于firebug比较而言,我还是更喜欢chrome控制台比较多(可能使用较多,更顺手的原因吧)。所以来总结下,关于chrome控制台的一些方法(真的好强大!),若有错误的地方,请指出哈~

输出信息到控制台

  对于输出信息到控制台,大部分人最常使用的就是console.log了,下面列出了与console.log类似的输出方法:

  • console.log();        普通输出                            
  • console.info();        提示类输出
  • console.error();     错误输出
  • console.warn();     警示输出

    使用不同的输出方式,可以方便我们对于输出信息进行分类,或者让它们更语义化。

    eg:

             关于chrome控制台那些事   

             关于chrome控制台那些事

             关于chrome控制台那些事  

             关于chrome控制台那些事

    对于控制台输出的信息,看着只有红黑两种颜色一种字体,是不是觉得很枯燥,尤其还是在调bug的时候,但在Chrome提供了这么一个API:第一个参数可以包含一些格式化的指令比如%c之后,console.log也可以玩出花样,带来色彩啦~

console.log

话不多说,先上代码

  • 代码:

    console.log(" %chello world","font:20px/24px '微软雅黑';color:pink;");

运行效果:

关于chrome控制台那些事

 

不仅仅只能有这种效果哦,更nice的效果等着你,只要按照css的写法,就有更多你喜欢的样式啦。

 

  • 代码:

   console.log( ' %chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

运行效果:

关于chrome控制台那些事

 

将其中第一个参数作为你想要输出的文字,第二个参数使用css来编写样式。

注意:想要自己定义样式,需要在第一个参数你想要输出文字前 添加%c的一个转义指令,%c代表输出带样式的文字。还有很多转义指令,大家可以自行查阅官网的API里的表格

不仅可以输出文字,同样可以输出图片~

 

  • 代码:(自己写的图片一直没有加载,在考虑是不是浏览器版本的问题,以下是参考别人的来的)

    console.log(" %c","padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");

运行效果:

关于chrome控制台那些事

 同时,console.log()接受不定参数,中间用 "," 隔开,最终会以空白格输出隔开显示。

 

  • 代码:

    console.log(" %c hi","font:bold  20px/25px '微软雅黑';color:blue;","world!");

运行效果:

关于chrome控制台那些事

还有更多的等着你来发现哦。

 

console.table

以表格形式输出信息,可观性真的不要太好,很方便;

  • 代码:

var  data = [ { 'name' : 'Red Joy',  'age' : 'secret' } , { 'name': 'TuanTuan' , 'age': 'unkown'}];

console.table(data);

运行效果:

 关于chrome控制台那些事

 使用console.table来显示结果对比效果不要太好。

 

console.assert

当你想要在不满足给出条件时进行输出显示,就可以使用console.assert来免去那些繁琐的 if 语句,它会对于你传入的表达式进行判断,当结果为false的时候,进行输出到控制台。

  • 代码:

   var Debuger = false;

   console.assert(Debuger,"当给出表达时返回结果为false时才输出");

运行效果:

 关于chrome控制台那些事

温馨提示:按住 Shift + Enter 键就可以在控制台进行多行编码啦。

    

 

console.count

使用count方法就可以直接对于某段代码使用的次数进行统计。

用例子说话最好:

  • 代码:

  function hi(){
    console.count("hi 函数使用的次数");
 }
  hi();
  hi();
  hi();
  hi();

 

 

运行效果:

关于chrome控制台那些事

console.dir

使用console.dif 来对于DOM节点以 JavaScript对象的形式输出到控制台。

与console.log显示不同,log 是通过DOM树的方式来进行显示的,所以大家按照各自要使用的情况来进行使用是最好的选择。

  • 代码:

   console.dir(document.body);

   console.log(document.body);

运行效果:

 关于chrome控制台那些事

关于chrome控制台那些事

可以亲自试一试,比较一下差距。

 

chrome控制台的功能真的是强大到不行,没事打个小例子就可以直接通过它。棒棒哒!

参考地址:http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html