博客首页前端开发分类

Console调试命令工具详解

发布时间:2016-06-28 19:00:59编辑:Mr.Co阅读(383)

前端开发


做为一枚合格的前端攻城狮,那么你必须要熟练使用Console来调试你的Javascript代码,如果你连Console都不会,我只能说你不是一枚合格的前端攻城狮!如果你还只会Console.log(),那么你就Out了,其实它还有这么多个鬼可以帮助你调试!接下来我们就来说说这些鬼的用处。


一、打印信息的命令


1、console.log('') 控制台输出

2、console.info('') 信息提示

3、console.error('') 错误提示

4、console.warn('') 警告提示


二、参数占位符


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

console.log("%d年%d月%d日",2011,3,26);

打印出来的结果就是 2011年3月26日


三、输出信息分组显示


console.group("第一组信息");
console.log("第一组第一条:我的博客(http://www.mrco.cn)");
console.log("第一组第二条:我的博客(http://mrco.cn)");
console.groupEnd();
      
console.group("第二组信息");
console.log("第二组第一条:我的名字:Mr.Co");
console.log("第二组第二条:欢迎光临我的博客");
console.groupEnd();

输出结果:

console


四、对象信息查看


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

var info = {
blog:"http://www.mrco.cn",
author:'mr.co',
message:"Welcome to blog"
};
console.dir(info);

输出结果:


五、显示某个节点的内容


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

<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="info">
<h3>我的博客:www.mrco.cn</h3>
<p>欢迎光临我的博客</p>
</div>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</body>
</html>

输出结果:


六、其它几个方法


1.console.assert() 判断变量是否是真

var result = 1;
console.assert( result );
var year = 2014;
console.assert(year == 2018 );

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

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

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

4.console.profile()的性能分析

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


转载请注明出自:http://www.mrco.cn/article/577258eb6248a4cd5b5deff8.html

最新评论(0)

    我要评论

    *
    *
    *
    *
    *
    验证码