I used Firebug from the start and it was a godsend like the invention of fire. But then Chrome came out with its debugger and I tried it. I kept using Firebug, but kept an eye on Chome's dev tools and finally could not longer come up with a reason not to switch after JSON tools were added in v12.
Chrome's DevTools kick butt because it has:
Built in Timeline, Profiler and Heap analyzer
Built in Audit tool
Can access and edit Local/SessionStorage, Cookies, SqlLite DB's, WebSQL, AppCache etc...
WebSockets network sniffing
JS debugger has some more features (e.g. WebWorker breakpoints)
JS debugger let's you edit JS on the fly and run it (JSFiddle w/o the fiddle)
Each window gets a devtools window if you like; Firebug is a singleton
Firebug perturbs the page by slowing its loading down and by injecting CSS for its inspector feature
UPDATE: 2 years later I have to congratulate the Firefox team for making huge inroads. That said, the Chrome team and debugger make huge leaps forward on a monthly basis, leading the industry. I'd update the above list, but frankly it would fill the entire page.
The Chrome Developer Tools took over the features of Firebug, so all the main features and familiarity are there (such as the $0, and console object).
There are some small differences, such as the DevTools do not have a CSS panel (although CSS stylesheets can be manipulated in the Elements panel).
The Chrome tools additionally have the Timeline, Profiles and Storage panels. The Timeline panel logs loading, CSS rendering, and JavaScript parsing. The Profile panel profiles resource usage and the Storage panel shows and allows changes in the site's database, local storage, session storage, and cookies.
Finally, both tools have their own minor variances, which make various actions a tiny bit easier or harder. My advice is to use Firebug for Firefox, and DevTools for Webkit browsers, since only Firebug Lite works on Chrome, and it lacks many features the normal Firebug has (and the DevTools are built into Chrome).
总的来说，这并不重要，因为无论如何你都必须在两种浏览器中进行测试。还有 IE，所以不妨将其与 IE 的 Dev 工具进行比较（虽然有所改进，但与 FF 或 Webkit 相比仍然不好）。
我认为 Firebug 中没有任何特别先进的东西，而 Chrome 中则没有，您会错过这些。
I feel a lot more comfortable using Firebug. I can't think of specifics at the moment, but sometimes I'll try debugging something in Safari or Chrome and it seems like such a PITA that I launch Firefox and get whatever done quickly.
The DOM tab is a plus, for one. It's more accessible and well laid out than Chrome's equivalent. I prefer the way DOM and other JS objects are logged to the console in Firebug, too.
Firebug plug-ins like Pixel Perfect are very useful as well. I don't know whether any such tool exists for Chrome.
Overall, it doesn't matter because you have to test in both browsers, anyway. And IE, so might as well compare it to IE's Dev tools (which have improved, but still are not good compared to FF or Webkit's).
I don't think there's anything advanced in particular present in Firebug but not in Chrome that you'll be missing.
据我所知，Firebug 是唯一一款可以在您键入时实时编辑 HTML 代码和文本的软件。例如，如果您想了解文本如何适合容器并一次添加一个字符，则非常有用。
在 Chrome 中，当您编辑 HTML 时，您必须按 TAB 或 ENTER 退出“编辑模式”，然后才能看到页面上的更改。
在 Firebug 中，您还可以立即输入 HTML 代码。在 Chrome 中，您必须右键单击并选择“编辑 HTML”。否则，它将显示为粗体。
我真的很想换成Chrome，因为它似乎运行得更快，但实时编辑对我来说太重要了。
As far as I can tell, Firebug is the only one that can edit HTML-code and text live as you type it. Very useful, if you're for example trying to see how text would fit in a container and add one character at a time.
In Chrome when you edit the HTML, you have to press TAB or ENTER to exit "edit mode", and see the changes on your page.
In Firebug you can also enter HTML-code right away. In Chrome, you have to right-click and choose "Edit HTML". Otherwise, it will show up like <b>bold</b>.
I really want to change to Chrome, since it seems to run faster, but the live editing is too important for me.
At the time this question was asked Firebug was a beast, but now the Chrome Developer Tools (DevTools) are handy for web developers. Though I'm not ranting about Firebug because I've learnt the web development using Firefox with Firebug.
It was a great tool for web development and it introduced all major features of DevTools and Firefox's DevTools has. However, I switched to the Chrome DevTools though they don't cover all the features of Firebug, because they are light-weighted and much faster than Firebug, accessing localStorage is easily defined and the sources are organized there in my opinion.
Here I'm going to list how the features are unique in Firebug,
Search:
Search option is well-defined in Firebug, because its easily accessible and we can search keyword with case-sensitive and regular expression.
DOM:
The DOM structure can be easily accessed in Firebug with various filtering options like Show User-defined Properties, Show User-defined Functions and so on.
Cookies:
Firebug lets us create our own cookies and gives provision to export cookies.
Network/Net:
Firebug has a Net panel wheras the DevTools call it Network. Both are useful to analyse all the requests made to load the resources and their status. In Firebug, we can easily grasp the resources' Remote IP.
Sources:
Even though the Source Edit is available in the DevTools, I feel Firebug is better while using Source Edit, because if you want to edit a CSS file within the DevTools, you have to go to Sources panel, then press Ctrl+O to find the file. Only then you can edit the file. In Firebug you can easily find the Source Edit under every menu tab.
Support for dojo:
Once I was a dojo developer Firebug was easily extended to support dojo developement by using the Dojo Firebug Extension.
A "feature" that goes beyond the usability is that Firebug is open source. So everyone can participate on it.
Having said that, the Chrome DevTools (as well as the Firefox DevTools) have many more features and other smaller and bigger advantages over Firebug as the team behind Firebug is very small in comparison to the teams behind the other DevTools.
Firebug has the possibility to have other plugin attach to it such as Firecookie. For the rest they are pretty similar, it's all about taste in my opinion.
I think the development tools are similar but I've had trouble forcing Chrome to not cache anything. Even setting the Chrome "Disable cache" setting didn't work 100% of the time; I'm not sure why.
I didn't have this issue with Firefox/Firebug, so I am still using it.
Chrome Inspector could not sort the CSS properties alphabetically where as Firebug could do this like a charm. It helps when you inspect some css element and need to grab it firebug comes handy on this.
As per good CSS coding practice, its always better to have your CSS properties sorted alphabetically in your code.
When you are working on a project involved with lot of scripts.In firebug under script tag you have an option of searching for a js file in the suggestion box provided.
Where as with chrome you will have a lame tree view to locate your JS file which is tedious to see the namespacing of your js file and traverse the tree.
This option might not affect anyone who involves with little JS files in their project. This feature is a bang on with firebug I use when my scripts are more than 1000 JS files.
Almost made the switch today but I noticed I can't right click on modified CSS in Chrome and copy the Rule or Style declarations like I can in firebug. GOD I wish firefox didn't suddenly start sucking or I wouldn't have this problem.
With "Edit and Resend" feature in Firefox Developer tools (Replay XHR or something in Firebug), you can replay the XHR request with changes in the request including request headers, request body, http method and even url.
Google Chrome's Replay XHR simply replays the request, and does not allow any modifications to the request.
With the chrome debugger I can debug the jsni of my GWT project where FireBug just show an anonymous function and I don't really recognise the actual function at all.
发布评论
评论（17）
我从一开始就使用 Firebug，它就像火的发明一样是天赐之物。但后来 Chrome 推出了它的调试器，我尝试了一下。我一直在使用 Firebug，但一直关注 Chome 的开发工具，在 v12 中添加 JSON 工具后，终于找不到不切换的理由了。
Chrome 的 DevTools 非常出色，因为它具有：
更新：2 年后，我必须祝贺 Firefox 团队取得了巨大进展。也就是说，Chrome 团队和调试器每月都取得巨大飞跃，引领行业。我会更新上面的列表，但坦率地说，它会填满整个页面。
I used Firebug from the start and it was a godsend like the invention of fire. But then Chrome came out with its debugger and I tried it. I kept using Firebug, but kept an eye on Chome's dev tools and finally could not longer come up with a reason not to switch after JSON tools were added in v12.
Chrome's DevTools kick butt because it has:
UPDATE: 2 years later I have to congratulate the Firefox team for making huge inroads. That said, the Chrome team and debugger make huge leaps forward on a monthly basis, leading the industry. I'd update the above list, but frankly it would fill the entire page.
切换到 Chrome 后，我还没有遇到我错过的 Firebug 功能。
I haven't run into a Firebug feature I've missed yet after switching to Chrome.
Chrome 开发者工具接管了 Firebug 的功能，因此所有主要功能和熟悉程度都在那里（例如
$0和console对象）。有一些小的差异，例如 DevTools 没有 CSS 面板（尽管可以在 Elements 面板中操作 CSS 样式表）。
Chrome 工具还具有时间轴、配置文件和存储面板。 时间轴面板记录加载、CSS 渲染和 JavaScript 解析。 “配置文件”面板配置资源使用情况，“存储”面板显示并允许更改站点的数据库、本地存储、会话存储和 cookie。
最后，这两种工具都有自己的细微差别，这使得各种操作变得更容易或更困难。我的建议是对 Firefox 使用 Firebug，对 Webkit 浏览器使用 DevTools，因为只有 Firebug Lite 可在 Chrome 上运行，并且它缺少普通 Firebug 所具有的许多功能（并且 DevTools 内置于 Chrome 中）。
The Chrome Developer Tools took over the features of Firebug, so all the main features and familiarity are there (such as the
$0, andconsoleobject).There are some small differences, such as the DevTools do not have a CSS panel (although CSS stylesheets can be manipulated in the Elements panel).
The Chrome tools additionally have the Timeline, Profiles and Storage panels. The Timeline panel logs loading, CSS rendering, and JavaScript parsing. The Profile panel profiles resource usage and the Storage panel shows and allows changes in the site's database, local storage, session storage, and cookies.
Finally, both tools have their own minor variances, which make various actions a tiny bit easier or harder. My advice is to use Firebug for Firefox, and DevTools for Webkit browsers, since only Firebug Lite works on Chrome, and it lacks many features the normal Firebug has (and the DevTools are built into Chrome).
我感觉使用 Firebug 更舒服。我现在想不出具体细节，但有时我会尝试在 Safari 或 Chrome 中调试某些东西，这似乎是一个 PITA，我启动 Firefox 并快速完成所有工作。
DOM 选项卡是一个优点。与 Chrome 的同类产品相比，它更易于访问且布局合理。我也更喜欢将 DOM 和其他 JS 对象记录到 Firebug 控制台的方式。
像 Pixel Perfect 这样的 Firebug 插件也非常有用。我不知道 Chrome 是否有这样的工具。
总的来说，这并不重要，因为无论如何你都必须在两种浏览器中进行测试。还有 IE，所以不妨将其与 IE 的 Dev 工具进行比较（虽然有所改进，但与 FF 或 Webkit 相比仍然不好）。
我认为 Firebug 中没有任何特别先进的东西，而 Chrome 中则没有，您会错过这些。
I feel a lot more comfortable using Firebug. I can't think of specifics at the moment, but sometimes I'll try debugging something in Safari or Chrome and it seems like such a PITA that I launch Firefox and get whatever done quickly.
The DOM tab is a plus, for one. It's more accessible and well laid out than Chrome's equivalent. I prefer the way DOM and other JS objects are logged to the console in Firebug, too.
Firebug plug-ins like Pixel Perfect are very useful as well. I don't know whether any such tool exists for Chrome.
Overall, it doesn't matter because you have to test in both browsers, anyway. And IE, so might as well compare it to IE's Dev tools (which have improved, but still are not good compared to FF or Webkit's).
I don't think there's anything advanced in particular present in Firebug but not in Chrome that you'll be missing.
编辑：这曾经是正确的，但 Chrome 开发工具实现了它。
Firebug 可以搜索页面上加载的所有脚本。 Chrome 开发工具只能在当前选定的脚本中进行搜索，AFAIK。
EDIT: This used to be true, but Chrome Dev Tools implemented it.
Firebug can search in all scripts loaded on a page. Chrome Dev Tools can only search in the currently selected script, AFAIK.
据我所知，Firebug 是唯一一款可以在您键入时实时编辑 HTML 代码和文本的软件。例如，如果您想了解文本如何适合容器并一次添加一个字符，则非常有用。
在 Chrome 中，当您编辑 HTML 时，您必须按 TAB 或 ENTER 退出“编辑模式”，然后才能看到页面上的更改。
在 Firebug 中，您还可以立即输入 HTML 代码。在 Chrome 中，您必须右键单击并选择“编辑 HTML”。否则，它将显示为粗体。
我真的很想换成Chrome，因为它似乎运行得更快，但实时编辑对我来说太重要了。
As far as I can tell, Firebug is the only one that can edit HTML-code and text live as you type it. Very useful, if you're for example trying to see how text would fit in a container and add one character at a time.
In Chrome when you edit the HTML, you have to press TAB or ENTER to exit "edit mode", and see the changes on your page.
In Firebug you can also enter HTML-code right away. In Chrome, you have to right-click and choose "Edit HTML". Otherwise, it will show up like <b>bold</b>.
I really want to change to Chrome, since it seems to run faster, but the live editing is too important for me.
Firebug 的鼠标选择非常棒，但我似乎在 Chrome 开发者工具中找不到它。
这让我很困扰，因为我在 firebug 中找不到它的热键，而 chrome 完全没有它。
我是一名菜鸟开发者，所以开发时大部分时间还是使用鼠标。
The mouse selection firebug has is great, but I can't seem to find it in the Chrome Developer Tools.
It bothers me because I can't find a hot key for it in firebug, whereas chrome lacks it completely.
I am a noob developer, so the mouse is still used most of the time when developing.
当时提出这个问题的时候，Firebug 简直就是一个野兽，但现在 Chrome 开发者工具 (DevTools) 对于 Web 开发者来说很方便。虽然我并不是在抱怨 Firebug，因为我已经学会了使用 Firefox 和 Firebug 进行 Web 开发。
它是一个很棒的 Web 开发工具，它介绍了 DevTools 和 Firefox DevTools 的所有主要功能。然而，我切换到了 Chrome DevTools，尽管它们没有涵盖 Firebug 的所有功能，因为它们是轻量级的，并且比 Firebug 快得多，在我看来，访问 localStorage 很容易定义，并且源代码在那里组织。
在这里，我将列出 Firebug 中的独特功能，
搜索：
搜索选项在 Firebug 中定义良好，因为它易于访问，我们可以使用区分大小写和正则表达式来搜索关键字。
DOM：
可以在 Firebug 中使用各种过滤选项轻松访问 DOM 结构，例如显示用户定义的属性、显示用户定义的函数和
Cookie：
Firebug 允许我们创建自己的 cookie，并提供导出 cookie 的功能。
网络/网络：
Firebug 有一个Net 面板，而 DevTools 称之为网络。两者对于分析加载资源及其状态的所有请求都很有用。在Firebug中，我们可以轻松掌握资源的远程IP。
来源：
尽管 DevTools 中提供了源代码编辑，但我觉得 Firebug 在使用源代码编辑时更好，因为如果您想在 DevTools 中编辑 CSS 文件，您必须转到源面板，然后按Ctrl+O才能找到该文件。只有这样您才能编辑该文件。在 Firebug 中，您可以轻松地在每个菜单选项卡下找到源代码编辑。
对道场的支持：
当我成为一名 dojo 开发人员时，Firebug 通过使用 轻松扩展以支持 dojo 开发 rel="nofollow">Dojo Firebug 扩展。
At the time this question was asked Firebug was a beast, but now the Chrome Developer Tools (DevTools) are handy for web developers. Though I'm not ranting about Firebug because I've learnt the web development using Firefox with Firebug.
It was a great tool for web development and it introduced all major features of DevTools and Firefox's DevTools has. However, I switched to the Chrome DevTools though they don't cover all the features of Firebug, because they are light-weighted and much faster than Firebug, accessing localStorage is easily defined and the sources are organized there in my opinion.
Here I'm going to list how the features are unique in Firebug,
Search:
Search option is well-defined in Firebug, because its easily accessible and we can search keyword with case-sensitive and regular expression.
DOM:
The DOM structure can be easily accessed in Firebug with various filtering options like Show User-defined Properties, Show User-defined Functions and so on.
Cookies:
Firebug lets us create our own cookies and gives provision to export cookies.
Network/Net:
Firebug has a Net panel wheras the DevTools call it Network. Both are useful to analyse all the requests made to load the resources and their status. In Firebug, we can easily grasp the resources' Remote IP.
Sources:
Even though the Source Edit is available in the DevTools, I feel Firebug is better while using Source Edit, because if you want to edit a CSS file within the DevTools, you have to go to Sources panel, then press Ctrl+O to find the file. Only then you can edit the file. In Firebug you can easily find the Source Edit under every menu tab.
Support for dojo:
Once I was a dojo developer Firebug was easily extended to support dojo developement by using the Dojo Firebug Extension.
客观地看到Firebug 2.0有很多小功能，这是Chrome DevTools所不具备的。其中一些列于此处：
控制台面板
HTML 面板
CSS面板
DOM 面板
Net 面板
Cookies 面板
常规
超越可用性的一个“功能”是 Firebug是开源。所以每个人都可以参与其中。
话虽如此，Chrome DevTools（以及 Firefox DevTools）比 Firebug 拥有更多的功能和其他更小的和更大的优势，因为与其他 DevTools 背后的团队相比，Firebug 背后的团队非常小。
此外，Firebug 3+ 集成到内置的Firefox DevTools，这意味着这些版本继承了 Firefox DevTools 的所有功能，并且可能会添加其他功能。
Objectively seen Firebug 2.0 has many small features, which the Chrome DevTools do not have. Some of them are listed here:
Console panel
HTML panel
CSS panel
DOM panel
Net panel
Cookies panel
General
A "feature" that goes beyond the usability is that Firebug is open source. So everyone can participate on it.
Having said that, the Chrome DevTools (as well as the Firefox DevTools) have many more features and other smaller and bigger advantages over Firebug as the team behind Firebug is very small in comparison to the teams behind the other DevTools.
Also, Firebug 3+ integrates into the built-in Firefox DevTools, which means those versions inherit all the features of the Firefox DevTools and may add additional features.
Firebug 可以附加其他插件，例如 Firecookie。对于其余的，它们非常相似，在我看来，这都是关于品味的。
Firebug has the possibility to have other plugin attach to it such as Firecookie. For the rest they are pretty similar, it's all about taste in my opinion.
还要补充一点，它可以 xopy XPATH 为 HTML 元素添加 CSS 选择器。
有时这真的很方便！ :)））哈哈哈
also add that it can xopy XPATH add CSS selector for a HTML element.
THAT is really handy sometimes! :))) hahaha
我认为开发工具是相似的，但我在强制 Chrome 不缓存任何内容时遇到了麻烦。即使设置 Chrome“禁用缓存”设置也不能 100% 有效；我不知道为什么。
我的 Firefox/Firebug 没有遇到这个问题，所以我仍在使用它。
I think the development tools are similar but I've had trouble forcing Chrome to not cache anything. Even setting the Chrome "Disable cache" setting didn't work 100% of the time; I'm not sure why.
I didn't have this issue with Firefox/Firebug, so I am still using it.
添加我的几美分...
Chrome Inspector 无法按字母顺序对 CSS 属性进行排序，而 Firebug 可以像魅力一样做到这一点。当您检查某些 css 元素并需要抓取它时，它会很有帮助，firebug 对此会很方便。
根据良好的 CSS 编码实践，最好在代码中按字母顺序对 CSS 属性进行排序。
当您正在处理涉及大量脚本的项目时。在脚本标签下的 firebug 中，您可以选择在提供的建议框中搜索 js 文件。
与 Chrome 一样，您将有一个蹩脚的树视图来定位 JS 文件，查看 js 文件的命名空间并遍历树是很乏味的。
此选项可能不会影响项目中涉及少量 JS 文件的任何人。当我的脚本超过 1000 个 JS 文件时，此功能对我使用的 firebug 来说非常有用。
Adding my few cents...
Chrome Inspector could not sort the CSS properties alphabetically where as Firebug could do this like a charm. It helps when you inspect some css element and need to grab it firebug comes handy on this.
As per good CSS coding practice, its always better to have your CSS properties sorted alphabetically in your code.
When you are working on a project involved with lot of scripts.In firebug under script tag you have an option of searching for a js file in the suggestion box provided.
Where as with chrome you will have a lame tree view to locate your JS file which is tedious to see the namespacing of your js file and traverse the tree.
This option might not affect anyone who involves with little JS files in their project. This feature is a bang on with firebug I use when my scripts are more than 1000 JS files.
今天差点就做出了改变，但我注意到我无法像在 Firebug 中那样右键单击 Chrome 中修改后的 CSS 并复制规则或样式声明。天哪，我希望火狐不要突然开始糟糕，否则我就不会遇到这个问题了。
Almost made the switch today but I noticed I can't right click on modified CSS in Chrome and copy the Rule or Style declarations like I can in firebug. GOD I wish firefox didn't suddenly start sucking or I wouldn't have this problem.
我喜欢 Chrome 开发工具，但有时我错过了 Firebug 的这些强大功能。
I love Chrome dev tool but sometime I missed these powerful feature from firebug.
“编辑并重新发送”请求功能
通过 Firefox 开发者工具中的“编辑并重新发送”功能（重放 XHR 或 Firebug 中的某些功能），您可以重放 XHR 请求，并更改请求中的内容，包括请求标头、请求正文、http 方法甚至 url 。
Google Chrome 的 Replay XHR 只是重放请求，不允许对请求进行任何修改。
当我需要这个功能时，我会使用 Firefox Devtools。
"Edit and Resend" request feature
With "Edit and Resend" feature in Firefox Developer tools (Replay XHR or something in Firebug), you can replay the XHR request with changes in the request including request headers, request body, http method and even url.
Google Chrome's Replay XHR simply replays the request, and does not allow any modifications to the request.
I use Firefox Devtools when I need this feature.
使用 chrome 调试器，我可以调试 GWT 项目的 jsni，其中 FireBug 仅显示匿名函数，而我根本无法识别实际函数。
With the chrome debugger I can debug the jsni of my GWT project where FireBug just show an anonymous function and I don't really recognise the actual function at all.