易栈网-膘叔

firephp，第一次知道的时候，是在fleaphp的框架里，那时候，妖怪在里面引入了firephp的支持。
BTW：妖怪还第一次在国内的开源框架中引入了yaml的配置。果然妖。。

本文是YII官方的wiki文章，来自于：http://www.yiiframework.com/wiki/84/integrating-firephp/

• Install Firebug plugin for Firefox from here.

• Install FirePHP plugin for Firefox from here.

• Download FirePHP package from here.

• Extract 'FirePHPCoreXXX/lib/FirePHPCore' compressed folder to '/path/to/protected/components/FirePHPCore' folder.

• At /path/to/index.php, after the line

  PHP代码

  1. $app = Yii::createWebApplication($config);   
  2. if (YII_DEBUG){  
  3.     Yii::import("application.components.FirePHPCore.fb", true);   
  4. }   
  5. $app->run();  

   

That's it! Now you can display your variables on FirePHP with a simple 'fb' command inside your PHP code:

fb($my_variable);

To view the results, open Firebug at 'console' tab and run your PHP file.

---------
不过我还没有仔细研究过，这个功能和Yii自带的WEBlog中的firebug支持有什么区别，还没有过多的研究，不发表意见。

------

看了一下源码，黑黑，突然发现，原来还可以这样玩console，嗯，又多了一个调试功能（和本文说的yii支持firephp无关）

以前介绍过firebug如何在chrome下使用，但其实。现在的网站在任何情况下，都可以使用firebug lite。比如你到http://getfirebug.com/firebuglite看一下，你就知道了。对呀。你明明没装firebug，怎么会有这样的界面出现？

嗯横 firebug lite现在可以被任何网页加载，然后弹出这样的界面，让你对你的操作进行实时浏览。这种东西，比较适合用在API网站，可以让你实时观察你的每一个URL请求以及获取Request等数据。

官方这么介绍lite的：

Firebug Lite: doing the Firebug way, anywhere.

• Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome
• Same look and feel as Firebug
• Inspect HTML and modify style in real-time
• Powerful console logging functions
• Rich representation of DOM elements
• Extend Firebug Lite and add features to make it even more powerful

安装也很简单：

Bookmarklet

Bookmark the following links:

Stable channel

• Firebug Lite
• Firebug Lite debug

Beta channel

• Firebug Lite beta

Live link

You can also link directly to the hosted version at getfirebug.com. Copy the following code, and paste it in the TOP of the HEAD of your document:

Stable channel

Firebug Lite: <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

Firebug Lite debug: <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>

Beta channel

Firebug Lite beta: <script type="text/javascript" src="https://getfirebug.com/firebug-lite-beta.js"></script>

Local link (offline)

If you need using Firebug Lite while offline, download the code, copy it to a local destination, and link the firebug-lite.js in the TOP of the HEAD of your document:

<script type="text/javascript" src="/local/path/to/firebug-lite.js"></script>

If you want to debug the local installation, use the firebug-lite-debug.js file instead:

<script type="text/javascript" src="/local/path/to/firebug-lite-debug.js"></script>

还有一些配置：

The properties you can change include (with respective default values):

• saveCookies - false
• startOpened - false
• startInNewWindow - false
• showIconWhenHidden - true
• overrideConsole - true
• ignoreFirebugElements - true
• disableWhenFirebugActive - true
• enableTrace - false
• enablePersistent - false

更多设置还是看：http://getfirebug.com/firebuglite#Install

很意外，一直都认为firebug不会为chrome写插件了。毕竟chrome自带了一个F12的debug工具。
4。0开始后的chrome逐渐开始支持插件，然而，插件网站却不是每次打开都正常。也让我非常郁闷。
不过，看过chrome的插件编写的hello world，却真的发现，它的编写比firefox的插件简单的多。

上面都是闲话，真正想说的还是firebug，自从前两年firebug为IE出过lite版本后，更新幅度就小了很多，所以这次看到它为chrome做的更新，还是不禁想尝试一下的。
OK，上官方的菜，Firebug自己认为：

不过作为chrome插件，它还仅仅是一个beta版，他这么介绍的：

可以到这里进行下载：http://getfirebug.com/releases/lite/chrome/

网页开发人员使用firebug那是理所当然的事，IE8也在学习firebug，而且，快捷键都一样哦。F12打开firebug(IE也是这个快捷键，哈哈)

原文地址：http://www.cnblogs.com/cocowool/archive/2009/05/12/1454696.html

作者：小狼

内容如下：

Firebug对于Web开发人员来说，已经成为了不可或缺的工具，但是在我日常的工作中，常常感觉还没有能够深刻的挖掘出她的潜力，今天花了点时间仔细研究了Console和命令行的使用在提高工作效率方面的作用，
记下来和大家分享一下.

Firebug一共有Console,HTML,CSS,Script,DOM,NET六个Tab，今天着重说一下Console的用法。
其实我们对于Console应该非常熟悉，因为这里是Firebug给出各种信息的窗口，而这也正是Console的主要用途，日志记录(Logging)。
除此之外，Console还提供了通过命令行方式来调试Javascript的方法。下面就来学习一下Console的用法。

1、Firefox的日志记录(Logging in Firefox)。
通过Console的记录方法，我们可以不再使用烦人的alert或者document.write方法来进行调试。
Firebug提供了五种日志的类型：
    console.log:记录一行信息，无任何图标提示；
    console.debug:记录一行信息，带超链接，可以链接到语句调用的地方；
    console.error():向控制台中写入错误信息，带错误图标显示和高亮代码链接；
    console.info():向控制台中写入提示信息，带信息图标显示和高亮代码链接；
    console.warn():向控制台中写入警告信息，带警告图标显示和高亮代码链接；

    consle打印字符串支持字符串替换，使用起来就像c里面的printf(“%s",a),支持的类型包括：
    %s        string，字符串
    %d,%i    整型
    %f        浮点
    %o        对象
    如果使用%o的话，对象就会用绿色的超链接表示出来，单击后会将你带到DOM视图。

2、分组(Grouping)。
    如果某一类的信息特别多时，分组就有利于逻辑的划分。
    使用上很简单，参见代码。
            function consoleGroup(){
                var groupname = "Group 1";
                console.group("Message group %s", groupname);
                console.log("This is the 1 message in %s", groupname);
                console.log("This is the 2 message in %s", groupname);
                console.log("This is the 3 message in %s", groupname);
                console.groupEnd();
                
                goupname = "Group 2";
                console.group("Message group %s", goupname);
                console.log("This is the 1 message in %s", goupname);
                
                var subgroupname = "Sub group 1";
                console.group("Message group %s",subgroupname);
                console.log("This is the 1 message in %s", subgroupname);
                console.log("This is the 2 message in %s", subgroupname);
                console.log("This is the 3 message in %s", subgroupname);
                console.groupEnd();
                
                console.log("This is the 2 message in %s", goupname);
                console.groupEnd();
            }

   
3、console.dir和console.dirxml
    console.dir可以将一个对象的所有方法和属性打印出来，这个方法无疑是非常有用的，我们不再需要object.toString这样的方法支持了，只要有firebug，查看对象也变得很轻松
    同时，我们也可以将页面中的元素作为一个对象打印出来，但是你要小心，因为这将输出众多的信息，可能你会迷失在繁杂的信息中而找不到自己需要的条目。
    我们可以通过分组将这些大量的信息放入一个分组中，这样可以在逻辑上更清楚一些。
            function consoleDir(){
                function Car(){
                    this.Model = "Old Model";
                    this.getManu = function(){
                        return "Toyota";
                    }
                }
                
                var objCar = new Car();
                console.dir(objCar);
                console.dir(zoo);
                
                var groupname = "Css Style";
                console.group("The button Style", groupname);
                console.dir(document.getElementById('consoledir').style, groupname);
                console.groupEnd();
            }

           
    console.dirxml    打印出HTML元素的XML表示形式.

4、断言(console.assert())。
    console.assert()可以用来判断一个表达式是否正确，如果错误，他就会打印错误信息在控制台窗口中。
    
5、追踪(console.trace())。
    console.trace()是一个非常有趣的功能。我们先来看看官方的解释：打印Javascript执行时刻的堆栈追踪。
    这个函数可以打印出程序执行时从起点到终点的路径信息。
    比如如果我们想知道某个函数是何时和如何被执行的，我们将console.trace()放在这个函数中，我们就能够的看到这个函数被执行的路径。
    这个函数在调试其他人的源代码时非常有用。    

6、计时(Timing)。
    console.time(timeName)可以用来计时，这个在我们需要知道代码执行效率的时候特别有用，就不用自己造轮子了。
            function consoleTime(){
                var timeName = "timer1";
                console.time(timeName);
                var a = 0;                
                for(var i = 0; i < 100; i++){
                    for(var j = 0; j < 100; j++){
//                        console.log('Hello world');
                        a = a + 1;
                    }
                }
                
                console.log("a = %d", a);
                console.timeEnd(timeName);
            }

7、Javascript分析器(Javascript Profiler)。
    我们可以通过代码console.profile('profileName')或者单击Profiler标签来进行Javascript代码执行的分析。这个功能有点类似于console.time()，可以帮助我们评估
    代码的表现，但是能够提供比console.time()更详细的信息。

    有三种方法可以调用Javascript profiler。一种是在代码中写入分析脚本，一种是单击profile标签，最后还可以在命令行下输入命令来执行。
    执行后，可以看到详细的输出结果，下面对各项进行一些说明：
    Function Column：显示调用的函数名称；
    Call Column：显示调用次数；
    Percent Column：显示消耗的时间比；
    Own Time：显示函数内部语句执行的时间，不包括调用其他函数的时间；
    Time Column：显示函数从开始到结束的执行时间；
    Avg Column：平均时间。Avg = Own / Call;
    Min & Max Column：显示最小和最大时间；
    File Column：函数所在的文件；    

8、其他的一些选项。
    在Console Tab的最右侧有一个Options的选项，在这里可以自己定义需要显示的错误，其内容很好理解，这里就不多说了。
    有一点就是Firebug1.3以后，多了
    Show Chrome Errors
    Show Chrome Message

    等几个选项，这几个选项还没有验证过其具体的作用，哪位知道的可以共享一下。

[参考资料]

1、Firebug Tutorial    http://michaelsync.net/2007/09/09/firebug-tutorial-logging-profiling-and-commandline-part-i
2、Firebug Tutorial    http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii