脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js调试工具Console命令详解

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=utf-8" />
</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=utf-8" />
</head>
<body>
<script type="text/javascript">
console.group("第一组信息");

　　　　console.log("第一组第一条:我的XX(https://www.jb51.net)");

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

　　console.groupEnd();

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

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

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

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

效果：


四、查看对象的信息
 
console.dir()可以显示一个对象所有的属性和方法。
 

复制代码 代码如下:

<script type="text/javascript">
var info = {
blog:"https://www.jb51.net",
QQGroup:80535344,
message:"程序爱好者欢迎你的加入"
};
console.dir(info);
</script>

效果：

五、显示某个节点的内容
 
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.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()。
 

复制代码 代码如下:

<script type="text/javascript">
　　function All(){
alert(11);
　　　　     for(var i=0;i<10;i++){
funcA(1000);
}
　　　　    funcB(10000);
　　    }

　　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,控制条没有输出，加上了之后，就有了一张性能分析表，暂时不清楚原因，若你知道，可以评论。

您可能感兴趣的文章:

相关文章

  • 基于ajax和jsonp的原生封装(实例)

    基于ajax和jsonp的原生封装(实例)

    下面小编就为大家带来一篇基于ajax和jsonp的原生封装(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JS实现点击Radio动态更新table数据

    JS实现点击Radio动态更新table数据

    这篇文章主要介绍了JS实现点击Radio动态更新table数据的相关资料,需要的朋友可以参考下
    2017-07-07
  • uni-app使用uni-download和uni.saveFile下载保存文件遇到的问题及解决方法

    uni-app使用uni-download和uni.saveFile下载保存文件遇到的问题及解决方法

    这篇文章主要给大家介绍了关于uni-app使用uni-download和uni.saveFile下载保存文件遇到的问题及解决方法的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
    2024-01-01
  • 学习JavaScript设计模式(策略模式)

    学习JavaScript设计模式(策略模式)

    这篇文章主要带领大家学习JavaScript设计模式，其中重点介绍策略模式，以年终奖为实例对策略模式进行分析，对策略模式进行详细剖析，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript 私有成员分析

    JavaScript 私有成员分析

    JavaScript是世界上最受误解的语言。有人认为它缺少信息隐藏的属性（封装），因为JavaScript对象不能拥有私有变量和函数。但这是误解。JavaScript对象可以有私有成员。下面进行说明。
    2009-01-01
  • js getElementsByTagName的简写方式

    js getElementsByTagName的简写方式

    用最少的代码,做最多的事情. getElementsByTagName的简写方法.
    2010-06-06
  • JS判断数组那点事

    JS判断数组那点事

    在面试过程中经常被面试官问到这样的题目：如何判断数组？下面小编就针对这个问题给大家收集整理了份资料，感兴趣的朋友一起看看吧
    2017-10-10
  • three.js实现3D影院的原理的代码分析

    three.js实现3D影院的原理的代码分析

    本篇文章主要给大家讲解了如何通过three.js实现3D影院的功能以及原理分析，需要的朋友参考一下吧。
    2017-12-12
  • 一文带你掌握JavaScript中的EventLoop机制

    一文带你掌握JavaScript中的EventLoop机制

    JavaScript是 单线程、非阻塞 的,它通过事件队列 (Event Loop) 的方式来实现异步回调,所以本文小编就带大家来深入了解一下JavaScript中的EventLoop机制,需要的可以了解下
    2024-02-02
  • js实现可以点击收缩或张开的悬浮窗

    js实现可以点击收缩或张开的悬浮窗

    这篇文章主要介绍了js实现可以点击收缩或张开的悬浮窗效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论