Console命令详解,让调试js代码变得更简单

刚刚在浏览关于js方面的博客时发现这个方法挺好玩的,自己爽了一把。

1 <script>
2 console.time('/X(.+)+X/ test');
3 "==XX=============================".match(/X(.+)+X/);
4 console.timeEnd('/X(.+)+X/ test');
5 </script> 

然后恶补了一下关于Firebug控制台的知识。熟练地使用Firebug,能够极大地提升工作效率。

===============

Firebug控制台详解

作者:阮一峰
出处:http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

 

控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。

 

一、显示信息的命令

  Firebug内置一个console对象,提供5种方法,用来显示信息。

  最简单的方法是console.log(),可以用来取代alert()或document.write()。比如,在网页脚本中使用console.log("Hello World"),加载时控制台就会自动显示如下内容。

  

  另外,根据信息的不同性质,console对象还有4种显示信息的方法,分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。

  比如,在网页脚本中插入下面四行:

1 <script>
2 console.info('这是info');
3 console.debug('这是debug');
4 console.warn('这是warn'); 5 console.error('这是error'); 6 </script>

  加载时,控制台会显示如下内容: 

   

  可以看到,不同性质的信息前面有不同的图标,并且每条信息后面都有超级链接,点击后跳转到网页源码的相应行。

二、占位符

  console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。

  比如,

<script>console.log('%d年%d月%d日',2014,06,30);console.log('圆周率是%f',3.1415926);
</script>

 

%o占位符,可以用来查看一个对象内部情况。比如,有这样一个对象:

var dog = {};
dog.name='大毛';
dog.color='黄色';

然后,对它使用o%占位符。

console.log('%o',dog);

三、分组显示  如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()。

 1     console.group("第一组信息");
 2 
 3     console.log("第一组第一条");
 4 
 5     console.log("第一组第二条");
 6 
 7   console.groupEnd();
 8 
 9   console.group("第二组信息");
10 
11     console.log("第二组第一条");
12 
13     console.log("第二组第二条");
14 
15   console.groupEnd();

  

四、console.dir()

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

  比如,现在为第二节的dog对象,添加一个bark()方法。

   1 dog.bark = function(){alert("汪汪汪");}; 

  然后,显示该对象的内容,

   1 console.dir(dog); 

  

五、console.dirxml()

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

  比如,先获取一个表格节点,

window.onload = function(){console.dirxml(document.getElementById("table"));
}

  

六、console.assert()

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

  比如,下面两个判断的结果都为否。

1 <script>
2   var result = 0;
3   console.assert( result );
4   var year = 2000;
5   console.assert(year == 2011 );
6 </script>

  

七、console.trace()

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

  比如,有一个加法器函数。 

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

   我想知道这个函数是如何被调用的,在其中加入console.trace()方法就可以了。

function add(a,b){console.trace();return a+b;}

  假定这个函数的调用代码如下:

1 var x = add3(1,1);
2  function add3(a,b){return add2(a,b);}
3  function add2(a,b){return add1(a,b);}
4  function add1(a,b){return add(a,b);}

  运行后,会显示add()的调用轨迹,从上到下依次为add()、add1()、add2()、add3()。

  

 八、计时功能

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

1     console.time("计时器一");
2   for(var i=0;i<1000;i++){
3     for(var j=0;j<1000;j++){}
4   }
5   console.timeEnd("计时器一");

   

 九、性能分析

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

  假定有一个函数Foo(),里面调用了另外两个函数funcA()和funcB(),其中funcA()调用10次,funcB()调用1次.

 1   function Foo(){
 2    for(var i=0;i<10;i++){funcA(1000);}
 3     funcB(10000);
 4  }
 5  function funcA(count){
 6   for(var i=0;i<count;i++){}
 7  }
 8  function funcB(count){
 9   for(var i=0;i<count;i++){}
10  }

然后,就可以分析Foo()的运行性能了。

console.profile('性能分析器');Foo();alert(';');
console.profileEnd();

 控制台会显示一张性能分析表,如下图。

 

   除了使用console.profile()方法,firebug还提供了一个"概况"(Profiler)按钮。第一次点击该按钮,"性能分析" 开始,你可以对网页进行某种操作(比如ajax操作),然后第二次点击该按钮,"性能分析"结束,该操作引发的所有运算就会进行性能分析。

  

十、属性菜单

  控制台面板的名称后面,有一个倒三角,点击后会显示属性菜单。

  

  默认情况下,控制台只显示Javascript错误。如果选中Javascript警告、CSS错误、XML错误都送上,则相关的提示信息都会显示。

  这里比较有用的是"显示XMLHttpRequests",也就是显示ajax请求。选中以后,网页的所有ajax请求,都会在控制台面板显示出来。

  比如下图,控制台就会告诉我们,它用ajax方式发出了一个GET请求,http请求和响应的头信息和内容主体,也都可以看到。

  

 

 

转载于:https://www.cnblogs.com/zmh7057/p/3816335.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/359768.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP求体重成绩函数,PHP数组

数组提出一个问题&#xff1a;一个养鸡场有6只鸡&#xff0c;他们的体重分别为3kg&#xff0c;5kg&#xff0c;1k个&#xff0c;3.4kg&#xff0c;2kg&#xff0c;6.kg请问这六只鸡的总体重是多少平均体重是多少请你用现在掌握的技术编一个程序现在我们使用现有的技术来解决问题…

k8s secret使用_Java Secret:使用枚举构建状态机

k8s secret使用总览 Java中的枚举比许多其他语言更强大&#xff0c;可以导致令人惊讶的用途。 在本文中&#xff0c;我概述了Java 枚举的一些单独功能&#xff0c;并将它们放在一起形成一个状态机。 单例和实用程序类的枚举 您可以非常简单地将枚举用作Singleton或Utility。…

mydumper备份原理和使用方法

mydumper介绍 MySQL自身的mysqldump工具支持单线程工作&#xff0c;依次一个个导出多个表&#xff0c;没有一个并行的机&#xff0c;这就使得它无法迅速的备份数据。 mydumper作为一个实用工具&#xff0c;能够良好支持多线程工作&#xff0c;可以并行的多线程的从表中读入数据…

matlab pca可视化,利用Matlab实现PCA demo展示

input_data rand(1000,3);%随机生成1000个样本&#xff0c;每个样本有x,y,z三个属性 figure(1);%控制画图的窗口为1hold off;%使当前轴和图形不再具备被刷新的性质&#xff0c;关闭在此基础上再画图plot3(input_data(:,1), input_data(:,2), input_data(:,3), ‘ro‘);%% Func…

matlab短均线滞后项,均线理论的滞后性问题

对移动平均线有一定了解的人都会发现移动平均线理论存在一个缺点&#xff0c;那就是移动平均线的信号具有一定的滞后性&#xff0c;这是制约移动平均线运用的最大因素。介绍了均线的计算方法.从它的计算方法中也能看出目前均线的数值要受到前一阶段股价的影响&#xff0c;而且均…

python捕获摄像头帧_Xuggler教程:帧捕获和视频创建

python捕获摄像头帧注意&#xff1a;这是我们的“ Xuggler开发教程 ”系列的一部分。 到目前为止&#xff0c;在我们的Xuggler教程系列中&#xff0c;我们已经对视频处理的Xuggler进行了介绍&#xff0c;并讨论了转码和媒体修改 。 在本教程中&#xff0c;我们将看到如何解码视…

MyEclipse 编写 ExtJS 卡死问题解决方法

MyEclipse 8.6 在 jsp 中编写 ExtJS时&#xff0c;会出现卡死现象&#xff0c;让人甚是头疼。网上找了很多方法&#xff0c;折腾半天&#xff0c;还是不管用。 什么MyEclipse 优化&#xff0c;Validation 取消&#xff0c;MyEclipse 在 JSP 中打 "点" 时&#xff0…

java的aqs是什么,AQS在Java中的应用

上篇文章我们详细分析了AQS的底层实现原理,这节就来探索jdk中使用AQS实现的工具类ReentrantLock一, 是什么?怎么用?是什么?是一个独占锁,也就是在并发环境下同一时刻只能有一个线程获得资源,也是一个可重入锁.可重入锁: 一个线程已经获取到了该资源,下次再次获取资源时不会出…

php怎么把字符转成大写,php怎么把字符串转换为大写

php把字符串转换为大写的方法&#xff1a;可以利用内置函数strtoupper()来进行转换。strtoupper()函数可以把指定的字符串转换为大写&#xff0c;并返回被转换为大写的字符串。使用函数&#xff1a;(学习视频推荐&#xff1a;php视频教程)strtoupper() 函数把字符串转换为大写&…

oracle存储过程与函数的区别及作用,Oracle存储过程与存储函数-入门

文章思维导图一. 存储过程和存储函数的定义定义&#xff1a;存储在数据库中&#xff0c;供所有用户程序调用的子程序叫做存储过程/存储函数。复杂点的解释&#xff1a;存储过程(Stored Procedure)&#xff0c;就是一组用于完成特定数据库功能的SQL 语句集&#xff0c;该SQL语句…

CC++初学者编程教程(8) VS2013配置编程助手与QT

1. 2. 配置编程助手 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19&#xff0e; 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30&#xff0e; 31. 32&#xff0e; 33. 34. 35. 36. 37. 38. 39 40 41 42 43 这个时候我们就在VS2013里面集成了QT&#xff0c;编程助…

转子碰磨 matlab,航空科普:什么是航空发动机转子碰磨?

中国航空报讯&#xff1a;随着人们对航空发动机油耗、推重比等要求的逐步提高&#xff0c;提升航空发动机运行效率&#xff0c;尤其是提升民用航空发动机的经济性已经变得越来越重要。航空发动机的总体运行效率是气动效率、燃烧效率、冷却效率与机械效率等共同决定的。其中&…

Android 自定义 ListView 显示网络上 JSON 格式歌曲列表

本文内容 环境 项目结构 演示自定义 ListView 显示网络上 JSON 歌曲列表 参考资料 本文最开始看的是一个国人翻译的文章&#xff0c;没有源代码可下载&#xff0c;根据文中提供的代码片段&#xff0c;自己新建的项目&#xff08;比较可恶的是&#xff0c;没有图标图片资源&…

oracle 索引invisible,Oracle index unusable和invisible的区别

invisible index会被优化器所忽略&#xff0c;但是dml操作仍然会维护索引。在session或者system级别使用参数OPTIMIZER_USE_INVISIBLE_INDEX摘录自Oracle 11g的官方文档&#xff1a;UNUSABLE Specify UNUSABLE to mark the index or index partition(s) or index subpartition(…

php16进制密钥签名对接支付,简单理解rsa的加密和签名-PHP实现

我们先动手在linux上生成一下rsaPs&#xff1a;openssl是一堆加密算法和安全协议的开源集合,像RSA,DES,MD5,RC4等等,都能在openssl里面找到源代码.用openssl指定生成test.key文件&#xff0c;其中包含公钥私钥&#xff0c;1024为生成密钥长度tbtb:~/mimi$ openssl genrsa -out …

java中字符和字节的转换_Java最佳实践–字符到字节和字节到字符的转换

java中字符和字节的转换在使用Java编程语言时&#xff0c;我们将继续讨论与建议的实践有关的系列文章&#xff0c;我们将讨论String性能调优。 特别是&#xff0c;我们将着重于使用默认编码时如何有效地处理字符到字节和字节到字符的转换。 本文总结了两种建议的自定义方法与两…

Android实现简单短信发送器

布局&#xff1a; <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"android:id"id/container"android:layout_width"match_parent"android:layout_heigh…

linux 查看文件哈希码,使用linux的sha1sum命令查看效验文件哈希值命令

服务器今天小编给大家分享的是使用linux的sha1sum命令查看效验文件哈希值命令&#xff0c;相信很多人都不太了解&#xff0c;为了让大家更加了解&#xff0c;所以给大家总结了以下内容&#xff0c;一起往下看吧。一定会有所收获的哦。sha1sum命令用于生成和校验文件的sha1值。它…

Java中的传值与传引用

曾经对java中传值还是传引用的问题十分困惑&#xff0c;而且也被问到过许多次&#xff0c;无论是面试&#xff0c;还是平时我们平时的讨论中。 在stackoverflow上面浏览时&#xff0c;无意中发现了跟这个问题有关的论题&#xff0c;于是深入地查看了&#xff0c;感觉获益匪浅&a…

java高性能序列化_Java最佳实践–高性能序列化

java高性能序列化在使用Java编程语言时&#xff0c;我们将继续讨论与建议的实践有关的系列文章&#xff0c;我们将讨论并演示如何将对象序列化用于高性能应用程序。 所有讨论的主题均基于用例&#xff0c;这些用例源于电信行业关键任务超高性能生产系统的开发。 在阅读本文的…