Chrome开发者工具和Firebug的一些简单比较

Firebug是Firefox下著名的网页调试工具，而Chrome的开发者工具同样非常优异。今天我就简单的比较一下两者，同时也是对自己推文的一个总结和回顾。

在查看DOM上，两者虽然在具体操作方式上有区别，但大体功能是一致的。不过Firebug还可以额外的复制HTML，innerHTML，XPath，CSSPath，是个亮点。

Script调试上，Firebug就比较简陋了，不仅有时需要刷新页面才能调试，并且都是常规项目。而Chrome开发者工具不仅可以即时调试，而且可以直观的添加Event Listener，可谓相当便捷。

Firebug额外还有一个CSS调试的功能，可以直接调试CSS文件中的各个CSS定义，比较方便。Chrome开发者工具在这方面暂有所欠缺。

Firebug在Net面板下，切换查看各个请求非常麻烦，需要每个加号减号的收缩展开，尤其是要往前回顾的时候。而Chrome下的Network就没有这个问题，可以方便的点叉关掉或直接在左侧切换。并且Net是悬浮预览，而Network则是直接全部预览，要直观一些。而且在对XHR请求时下断点上，Chrome开发工具可以根据URL匹配，而Firebug只能断在所有请求上。差距立现。

Firebug比较有意思的是DOM面板，可以查看当前全局所有的变量声明情况。

而Chrome开发者工具有Resource面板，可以查看当前网站的cookie、local storage等内容。有Profile面板，可以非常详尽的显示profile JavaScript的结果，而不像Firebug那样集成在一起显示的很简陋。Audits面板，与YSlow差不多。

在控制台方面，Chrome开发者工具和Firebug也各有所长。Chrome开发者工具的自动完成只能显示一个，但查看运行结果可以进一步追踪堆栈，不仅仅只是字符串化的内容。而Firebug则可以给出浮动菜单显示所有的自动完成备选项，但结果是一个字符串内容而已。Firebug会在控制台中冗余的显示XHR请求，无论你选上面哪个筛选，都不能单纯过滤掉这些请求。但Chrome的控制台则是很专一的显示Error，Warning等内容，同时也可以在选项中设置为显示XHR请求。不过毕竟XHR请求的显示可以在Network面板里查看，所以默认不打开也是比较合理的。这可能也和Firebug各个功能模块化相互独立有关系。

Firebug可以用第三方编辑器打开代码，并且可以匹配在特定网站自动打开Firebug，并在状态栏或工具栏图标上显示当前页面的错误数量，这些都是Chrome开发者暂时做不到的。

Chrome的开发者工具是随着Chrome的升级而升级，且不会影响Chrome本身的速度。但Firebug是独立扩展，有较多报告及本人使用经历，均表明Firebug会较大程度的拖慢Firefox的速度，并且会导致浏览器假死。但也正由于Firebug的扩展身份，导致存在大量Firebug的扩展，如FirePHP等。虽然Chrome目前也开放了一部分这方面的API接口，但目前除了官方的Page Speed，还鲜有第三方扩展的出现。

Chrome的开发者工具目前随着Chrome的高速更新而更新着，且最近有Firebug的开发者跳槽到Google阵营。而Firebug却要面临和Firefox内置的控制台和调试器的竞争和冲突，前途并不明朗，也曾有Firebug贡献者称要考虑这个项目的生死。

2011-9-25 18:06 更新：发现Firebug的搜索是跨越所有模块的，搜索结果可以自由的上下跳转，并囊括DOM，所有Script。而Chrome开发工具只是在当前作用域有效，需要手动切换，并没有方便的导航，不能自由的向前向后。

以上都是个人陋见，欢迎指正。