js调试工具Console命令详解

更新时间：2014年10月21日 12:08:36 投稿：hebedich

这篇文章主要介绍了js调试工具Console命令详解,需要的朋友可以参考下

一、显示信息的命令

<!DOCTYPE html>

<html>

<head>

<title>常用console命令</title>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

</head>

<body>

<script type="text/javascript">

console.log('hello');

console.info('信息');

console.error('错误');

console.warn('警告');

</script>

</body>

</html>

最常用的就是console.log了。

二：占位符

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

复制代码代码如下:

<script type="text/javascript">

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

</script>

效果：

三、信息分组

复制代码代码如下:

<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
</head>
<body>
<script type="text/javascript">
console.group("第一组信息");

　　　　console.log("第一组第一条:我的XX()");

　　　　console.log("第一组第二条:xxx(http://jb51.net)");

　　console.groupEnd();

　　 console.group("第二组信息");

　　　　console.log("第二组第一条:程序爱好者QQ群： 80535344");

　　　　console.log("第二组第二条:欢迎你加入");

　　 console.groupEnd();
</script>
</body>
</html>

效果：

四、查看对象的信息

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

复制代码代码如下:

效果：

五、显示某个节点的内容

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

复制代码代码如下:

<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
</head>
<body>
<div id="info">
<h3>我的博客：www.ido321.com</h3>
<p>程序爱好者:259280570,欢迎你的加入</p>
</div>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</body>
</html>

效果：

六、判断变量是否是真

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

复制代码代码如下:

<script type="text/javascript">

　　var result = 1;

　　console.assert( result );

　　var year = 2014;

　　console.assert(year == 2018 );

</script>

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

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

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

复制代码代码如下:

<script type="text/javascript">

/*函数是如何被调用的，在其中加入console.trace()方法就可以了*/

　　function add(a,b){

console.trace();

　　　　return a+b;

　　}

　　var x = add3(1,1);

　　function add3(a,b){return add2(a,b);}

　　function add2(a,b){return add1(a,b);}

　　function add1(a,b){return add(a,b);}

</script>

控制台输出信息：

八、计时功能

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

复制代码代码如下:

<script type="text/javascript">

　　console.time("控制台计时器一");

　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd("控制台计时器一");

</script>

运行时间是38.84ms

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

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

复制代码代码如下:

　　function funcA(count){
　　　　for(var i=0;i<count;i++){}
　　}

　　function funcB(count){
　　　　for(var i=0;i<count;i++){}
　　}

　　console.profile('性能分析器');
　　All();
　　console.profileEnd();
</script>

说明一下，LZ测试时，在All()中未加alert,控制条没有输出，加上了之后，就有了一张性能分析表，暂时不清楚原因，若你知道，可以评论。

您可能感兴趣的文章:

JS回调函数简单易懂的入门实例分析
这篇文章主要介绍了JS回调函数,结合简单实例形式分析了javascript回调函数的概念、原理、相关操作技巧与使用注意事项,需要的朋友可以参考下
2019-09-09
JS原型继承四步曲及原型继承图一览
下面小编就为大家分享一篇JS原型继承四步曲及原型继承图一览，具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
2017-11-11
JS闭包原理与应用经典示例
这篇文章主要介绍了JS闭包原理与应用,结合实例形式较为详细的分析了javascript闭包的原理、应用及相关操作注意事项,需要的朋友可以参考下
2018-12-12
详解JavaScript设计模式中的享元模式
享元模式是一种用于性能优化的模式。享元模式的核心是运用共享技术来有效支持大量细粒度的对象.如果系统中创建了大量类似的对象而导致内存占用过高，本文通过介绍书中文件上传的优化案例来说明享元模式的使用方式和作用,需要的朋友可以参考下
2023-06-06
微信小程序实现页面浮动导航
这篇文章主要为大家详细介绍了微信小程序实现页面浮动导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
JS实现图片剪裁并预览效果
这篇文章主要为大家详细介绍了JS实现图片剪裁并预览效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
javascript实现控制文字大中小显示
网页上可以自由改变字体大小是个非常有助于用户体验的小功能，现在许多网站上都有此功能，今天我们来简单实现下。
2015-04-04
下拉菜单点击实现连接跳转功能的js代码
下拉菜单点击实现连接跳转效果想必不是很常见吧，下面与大家分享下具体的实现另有实例，感兴趣的朋友可以参考下哈
2013-05-05
js 获取范围内的随机数实例代码
下面小编就为大家带来一篇js 获取范围内的随机数实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
超链接的禁用属性Disabled使用示例
可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击，下面有个示例，大家不妨参考下
2014-07-07