chrome

谷歌离线下载地址：

1. https://support.google.com/chrome/answer/126299?hl=zh-Hans
2. https://www.google.com/chrome/browser/desktop/index.html?standalone=1

谷歌 Chrome Dev Tools

1. 查找JavaScript

使用Ctrl+Shift+F, 打开查找窗口, 查找支持正则表达式：

查找JavaScript

2. 查找函数定义：Ctrl + Shift + o

查找函数定义

3. 查找文件： Ctrl + o

查找文件

4. 分组显示

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

console.group("第一组信息");
　　　　console.log("第一组第一条");
　　　　console.log("第一组第二条");
　　console.groupEnd();
　　console.group("第二组信息");
　　　　console.log("第二组第一条");
　　　　console.log("第二组第二条");
　　console.groupEnd();

5. console.dir()

console.dir()可以显示一个对象所有的属性和方法。
比如，现在为第二节的dog对象，添加一个bark()方法。

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

然后，显示该对象的内容，console.dir(dog);

显示一个对象所有的属性和方法

6. console.dirxml()

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。
比如，先获取一个表格节点，

　　var table = document.getElementById("table1");

然后，显示该节点包含的代码。

　　console.dirxml(table);

显示网页的某个节点

7. console.assert()

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

var result = 0;
console.assert( result );
var year = 2000;
console.assert(year == 2011 );

判断一个表达式或变量是否为真

8. console.trace()

console.trace()用来追踪函数的调用轨迹。
比如，有一个加法器函数。

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

我想知道这个函数是如何被调用的，在其中加入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);}

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

追踪函数的调用轨迹

9. 计时功能

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

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

计时功能

10. 性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。
假定有一个函数Foo()，里面调用了另外两个函数funcA()和funcB()，其中funcA()调用10次，funcB()调用1次。

      function Foo(){
　　　　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++){}
　　}

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

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

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

性能分析表
标题栏提示，一共运行了12个函数，共耗时2.656毫秒。其中funcA()运行10次，耗时1.391毫秒，最短运行时间0.123毫秒，最长0.284毫秒，平均0.139毫秒；funcB()运行1次，耗时1.229ms毫秒。
除了使用console.profile()方法，firebug还提供了一个"概况"（Profiler）按钮。第一次点击该按钮，"性能分析"开始，你可以对网页进行某种操作（比如ajax操作），然后第二次点击该按钮，"性能分析"结束，该操作引发的所有运算就会进行性能分析。
进行性能分析