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,一经查实,立即删除!

相关文章

mysql as tmp,启动mysql时显示:/tmp/mysql.sock 不存在的解决办法

启动mysql时显示&#xff1a;/tmp/mysql.sock 不存在的解决方法启动mysql时显示&#xff1a;/tmp/mysql.sock 不存在的解决方法启动mysql时报错的解决(mysql 5.0.45 redhat as43)启动mysql时报错的解决(mysql 5.0.45 redhat as 43)作者: lawzjf(http://lawzjf.itpub.net)发表于…

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

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

Sublime Text 3插件之Emmet:HTML/CSS代码快速编写神器

一、快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签&#xff0c;比如<html>、<head>、<body>等&#xff0c;现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”&#xff0c;然后按Tab键&#xff1a; html:5 或!&#xff1a;用于…

批处理停止php服务,通过批处理启动和停止MSSQL+IIS

电脑安装了不少的开发工具环境&#xff0c;如MSSQL2005(2000)IIS\MySQLApache等等&#xff0c;开机和娱乐时为了加快速度&#xff0c;都得把这些占用内存的开发工具系统服务停止&#xff0c;每项手工操作明显麻烦&#xff0c;用批处理就简单多了... 点一下启动&#xff0c;再点…

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

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

mydumper备份原理和使用方法

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

大津阈值分割matlab实验,OTSU(大津法)分割源程序(MATLAB版)

接下来介绍OTSU方法的原理&#xff1a;***************************************************************************************************************************************************************OTSU法对于具有双峰性质的灰度图像或是彩色图像的某一通道的分割效…

BZOJ-1798 维护序列

线段树。支持区间加、区间乘、区间查询和。 标记下移还有取模要注意。 var n,p,q,i,s,t:longint; a:int64; num,n1,n2,n3:array[0..500000] of int64; procedure build(o,l,r:longint); var m,i:longint; begin m:(lr) div 2; if lr then begin n1[o]:num[l];…

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;而且均…

IOS侧滑框架合集

侧滑框架 https://github.com/gresrun/GHSidebarNav https://github.com/ipup/PPRevealSideViewController https://github.com/gotosleep/JASidePanels https://github.com/jamztang/JTRevealSidebarDemo https://github.com/ECSlidingViewController/ECSlidingViewController…

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

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

【python核心编程】第六章 序列

1、操作符 &#xff08;1&#xff09;成员关系操作符&#xff1a;in 、not in >>> string abcdefg>>> a in stringTrue>>> h in stringFalse>>> h not in stringTrue *补充知识*&#xff1a;string模块 >>> import string>>…

java物业管理系统设计,JAVA物业管理系统设计与实现(论文+源代码)

【实例简介】JAVA物业管理系统设计与实现(论文源代码)【实例截图】【核心代码】JAVA物业管理系统设计与实现(论文源代码)└── JAVA物业管理系统设计与实现(论文源代码)├── JAVA物业管理系统设计与实现(论文源代码)│ ├── JAVA物业管理系统│ │ ├── JWS│ │…

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

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

matlab试用版的user id,免费试用MATLAB

请选择其一AlabamaAlaska美属萨摩亚APO/FPO AAAPO/FPO AEAPO/FPO APArizonaArkansasCaliforniaCaroline IslandsColoradoConnecticutDelawareDistrict of ColumbiaFlorida格鲁吉亚关岛HawaiiIdahoIllinoisIndianaIowaKansasKentuckyLouisianaMaineMariana Islands马绍尔群岛Mar…

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

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

jasper 获取当前日期_入侵Jasper以获取JSP页面的对象模型

jasper 获取当前日期为了对我的JSP执行一些检查和统计分析&#xff0c;我需要一个包含在其中的元素的类似于DOM的层次模型。 但是&#xff0c;解析JSP页面并不是一件容易的事&#xff0c;最好留给它一个出色的工具-Tomcat&#xff0c;Jetty&#xff0c;GlassFish以及其他所有工…

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

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

C#开发 —— 基础知识

C# 用于开发可以运行在 .Net 平台上的应用程序&#xff0c;C# 本身只是一种语言&#xff0c;尽管它是用于生成面向 .Net 环境的代码&#xff0c;但它本身不是 .Net 的一部分 Console.WriteLine 命名空间 —— using 指令将命名空间名所标识的命名空间内的类型成员导入到当前编译…