logo标签列表

Firebug有哪些功能是Chrome的开发者工具没有的？

firebuggoogle-chrome-devtools
88

我是一名初学者的网页开发者，多次推荐使用Firebug来进行调试。然而迄今为止，我仅使用Chrome内置的开发者工具进行调试。这个工具似乎可以完成Firebug所能做的所有事情，而且更清洁、更有组织，这是一个额外的好处。

随着我的调试技能越来越高级，是否有Firebug具备但是Chrome开发者工具没有的功能呢？如果有，它们是什么？

相关链接: Firebug-like debugger for Google Chrome

8
我对网页开发也比较新，但很快就放弃了Firebug和Firefox，因为相比之下，Chrome在浏览器和开发工具集方面都更好。有更多经验的开发人员可能会有不同的看法。无论如何，请务必观看今年的Google I/O 2010有关Chrome开发者工具的演讲：http://www.youtube.com/watch?v=TH7sJbyXHuk。 - brainjam
具有讽刺意味的是，使用Google Closure编程的人需要使用Firefox来运行Closure Inspector。 - hyperslug
17个回答
138

我一开始就使用Firebug，就像发明火的神器一样方便。但是Chrome推出了它的调试器，我尝试了一下。我继续使用Firebug，并关注Chome的开发工具，直到JSON工具在v12中添加后，我再也找不到理由不切换了。

Chrome的DevTools非常强大，因为它具有：

  • 内置时间轴、分析器和堆分析器
  • 内置审核工具
  • 可以访问和编辑本地/会话存储、Cookies、SqlLite数据库、WebSQL、AppCache等...
  • WebSocket网络嗅探
  • JS调试器具有更多功能（例如WebWorker断点）
  • JS调试器允许您即时编辑和运行JS（JSFiddle无需fiddle）
  • 每个窗口都会得到一个开发工具窗口；Firebug是单例的
  • Firebug通过减慢页面加载速度以及注入CSS来扰乱页面

更新：两年后，我必须向Firefox团队表示祝贺，他们取得了巨大进展。尽管如此，Chrome团队和调试器每月都会跨越巨大的进步，引领着行业。我会更新上面的列表，但坦白地说，这会填满整个页面。

5
感谢您的信任，请问以下是需要翻译的内容吗？" +1 For the last part. I was once a Firebug fan until I made a switch." - Robin Carlo Catacutan
4
回答这个问题需要提供您先前回答的对称相反的内容。 - Dkyc
1
读了你的回复后，我的嘴巴开始流口水了。 - Karl
1
我本来想发表评论询问这个列表在2014年还有多少是有效的。很高兴看到这个列表。我仍然想知道Firefox中有什么功能是Chrome中没有的。 - Nilesh
我认为这个话题失败了。问题是Firebug相对于Chrome DevTools有什么优势，而不是反过来。 - Sebastian Zartner
显示剩余3条评论
29

在切换到Chrome浏览器后，我还没有遇到任何Firebug功能的遗漏。

2
+1 对于简明明确的回答。 - datasn.io
11

Chrome开发者工具接管了Firebug的功能，因此所有主要功能和熟悉的特性都在那里（例如$0和console对象）。

有一些小差异，例如DevTools没有CSS面板（尽管CSS样式表可以在Elements面板中进行操作）。

Chrome工具还有Timeline，Profiles和Storage面板。 Timeline面板记录了加载、CSS渲染和JavaScript解析。 Profile面板对资源使用情况进行分析，而Storage面板则显示并允许更改站点的数据库、本地存储、会话存储和Cookie。

最后，两个工具都有自己的微小差异，这使得各种操作更容易或更难一些。我的建议是在Firefox中使用Firebug，在Webkit浏览器中使用DevTools，因为只有Firebug Lite适用于Chrome，它缺少正常Firebug拥有的许多功能（而DevTools内置于Chrome）。

10

我觉得使用Firebug更加舒适。目前我想不起来具体的例子，但有时我会尝试在Safari或Chrome中调试一些东西，感觉很麻烦，然后就启动Firefox并快速完成任务。

DOM选项卡是一个优点。它比Chrome的相应选项更易访问和布局更合理。我也更喜欢Firebug中将DOM和其他JS对象记录到控制台的方式。

Firebug插件像Pixel Perfect也非常有用。我不知道是否存在类似Chrome的工具。

总的来说，这并不重要，因为你必须在两个浏览器中进行测试。还有IE，所以最好将其与IE的开发工具（已经有所改进，但与FF或Webkit相比仍然不够好）进行比较。

我认为在Firebug中没有特别高级的功能，而在Chrome中却没有，你会错过什么。

6

编辑: 这个现在已经不是事实了，因为 Chrome Dev Tools 已经实现了这个功能。

Firebug 可以搜索页面上加载的所有脚本。Chrome Dev Tools 只能搜索当前选择的脚本，据我所知。

我仅使用Firebug来实现此功能，并且可以随时使用Cmd Shift C选择元素。 - mbdev
3
当我回答这个问题时，Chrome Dev Tools没有这个功能。之后他们已经实现了它。请参见我在此处提出的一个问题的答案：https://dev59.com/P2855IYBdhLWcg3wynmC#7970237 - Slavo
Slavo做得很好。您可以在Chrome Dev Tools中一次搜索所有脚本（以及所有其他资源）。只需打开“资源”选项卡，然后使用右上角的搜索框即可。 - Boycott Russia
现在CDT中已经没有搜索框了。使用Ctrl+F在当前脚本中搜索，使用Ctrl+Shift+F在所有脚本中搜索。 - Akhil
4
据我所知，Firebug 是唯一一个可以实时编辑 HTML 代码和文本的工具，非常有用，如果您例如正在尝试查看文本如何适应容器并逐个字符添加。

在 Chrome 中，当您编辑 HTML 时，必须按 TAB 或 ENTER 键退出“编辑模式”，才能看到页面上的更改。

在 Firebug 中，您也可以直接输入 HTML 代码。在 Chrome 中，您必须右键单击并选择“编辑 HTML”。否则，它将显示为 <b>bold</b>。

我真的想换成 Chrome，因为它似乎运行更快，但对我来说实时编辑太重要了。

我认为现在你也可以在Chrome中做到这一点。 - Piyush Soni
我希望你是对的，但事实并非如此。我正在使用最新的Chrome 21.0.1180.89版本。你在使用什么版本？Beta/Canary？ - Niclas
3
在这个问题被提出的时候，Firebug是一个强大的工具，但现在Chrome开发者工具（DevTools）对于Web开发人员非常方便。虽然我不会抱怨Firebug，因为我学习Web开发是使用Firefox和Firebug。
它是一个伟大的Web开发工具，并引入了DevTools和Firefox DevTools的所有主要功能。然而，我转向了Chrome DevTools，尽管它们没有涵盖Firebug的所有功能，因为它们更轻量级，比Firebug快得多，localStorage的访问很容易定义，源代码在我的观点中也很有组织。
在这里，我将列出Firebug中独特的功能。

  • 搜索:

    Firebug中的搜索选项定义明确，因为它易于访问，我们可以使用区分大小写和正则表达式搜索关键字。

  • DOM:

    在Firebug中，可以使用各种过滤选项（如显示用户定义属性、显示用户定义函数等）轻松访问DOM结构。

  • Cookies:

    Firebug允许我们创建自己的cookies并提供导出cookies的功能。

  • 网络/Net:

    Firebug有一个Net面板，而DevTools称之为Network。两者都可用于分析加载资源的所有请求及其状态。在Firebug中，我们可以轻松了解资源的远程IP。

  • 源代码:

    尽管DevTools中提供了源代码编辑，但我认为使用源代码编辑时，Firebug更好，因为如果您想在DevTools中编辑CSS文件，则必须转到Sources面板，然后按Ctrl+O查找文件。然后才能编辑文件。在Firebug中，您可以在每个菜单选项卡下轻松找到源代码编辑。

  • 支持dojo:

    曾经我是一个dojo开发人员，通过使用Dojo Firebug Extension，Firebug可以轻松扩展以支持dojo开发。

3

Firebug拥有的鼠标选择功能非常好用，但是我在Chrome开发者工具中找不到它。

这让我很困扰，因为我在firebug中找不到它的快捷键，而chrome则完全没有这个功能。

作为一个新手开发者，所以在开发过程中仍然大多使用鼠标。

2
客观地说，Firebug 2.0有许多小功能，Chrome DevTools没有。以下是其中的一些： 控制台面板 HTML面板

CSS面板

DOM面板

在一个地方显示所有DOM属性
显示闭包
允许按属性、函数等进行筛选显示
网络面板
允许停止XmlHTTPRequests
显示每个请求的缓存信息
Cookie面板
创建和编辑cookies
控制cookie权限
显示cookie的原始和格式化大小
允许在cookie更改时停止脚本执行
以标准格式导出cookies
常规
在外部编辑器中打开HTML、CSS和JavaScript
允许自定义快捷方式
超越可用性的“特点”是Firebug是开源的。因此，每个人都可以参与其中。
话虽如此，Chrome DevTools（以及Firefox DevTools）比Firebug拥有更多功能和其他更小或更大的优势，因为Firebug背后的团队与其他DevTools背后的团队相比非常小。
另外，Firebug 3+集成到内置的Firefox DevTools中，这意味着这些版本继承了Firefox DevTools的所有功能，并可能添加其他功能。
1

Firebug有可能附加其他插件，例如Firecookie。就其余部分而言，它们非常相似，我认为这只是品味问题。

Chrome 开发者工具也可以使用 chrome.devtools API 进行扩展。 - Rob W
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接