Chrome的开发人员工具不具备Firebug的哪些功能？[关闭]

87

我是一名新手Web开发人员，并且建议将Firebug进行多次调试。但是到目前为止，我一直在使用Chrome的内置开发人员工具。它似乎可以完成Firebug的所有工作，而且更干净，更有条理。

随着调试工作的提高，Firebug是否具有我会在Chrome的DevTools中错过的功能？如果是这样，它们是什么？

相关：适用于Google Chrome的类似于Firebug的调试器

firebug  google-chrome-devtools 
— 马修
source
8
我对Web开发还比较陌生，但是很快就放弃了Firebug和Firefox，只是因为Chrome看起来既好于浏览器，又好于开发人员工具集。更有经验的开发人员可能有不同的看法。无论如何，请务必在Chrome开发者工具上观看今年的Google I / O 2010演讲：youtube.com/watch?
— v=TH7sJbyXHuk
具有讽刺意味的是，那些在Google Closure中进行编程的人将需要Firefox来运行Closure Inspector。
— hyperslug 2011年

Answers:

137

我从一开始就使用Firebug，这就像火的发明一样是天赐之物。但是后来Chrome推出了它的调试器，我尝试了一下。我一直使用Firebug，但是一直关注Chome的开发工具，最终无法再提出在v12中添加JSON工具后不进行切换的理由。

Chrome的DevTools具有优势，因为它具有：

  • 内置时间轴，探查器和堆分析器
  • 内置审核工具
  • 可以访问和编辑本地/会话存储，Cookie，SqlLite数据库，WebSQL，AppCache等...
  • WebSockets网络嗅探
  • JS调试器具有更多功能（例如WebWorker断点）
  • JS调试器让您即时编辑JS并运行它（JSFiddle不带小提琴）
  • 如果愿意，每个窗口都会有一个devtools窗口。Firebug是单身人士
  • Firebug通过减慢其加载速度并通过为其检查器功能注入CSS来扰乱页面

更新：2年后，我必须祝贺Firefox团队取得了巨大进展。也就是说，Chrome团队和调试器每月都有巨大的飞跃，领先业界。我将更新上面的列表，但是坦率地说，它将填满整个页面。

— 约瑟夫·拉斯特
source
5
+1最后一部分。我曾经是Firebug的迷，直到我做出了改变。
— 罗宾·卡塔卡丹
4
问题是要求您的回答与之相反：)
— Dkyc
1
阅读您的回复后，我的嘴开始流水。
— 2014年
1
我本打算发表评论，以询问该列表中有多少在2014年仍然有效。很高兴看到该列表。我仍然想看看在Firefox中是否有任何内容，但在chrome中却没有。
— Nilesh 2014年
Chrome是否可以替代Firefox中的响应式布局模式（ctrl + shift + m）？因为这个工具很棒
— Ruben 2014年
11

Chrome开发人员工具接管了Firebug的功能，因此所有主要功能和熟悉程度都已经存在（例如$0和和console对象）。

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

Chrome工具还具有“ 时间轴”，“ 配置文件”和“ 存储”面板。“ 时间轴”面板记录了加载，CSS渲染和JavaScript解析。“ 配置文件”面板对资源使用情况进行配置，“ 存储”面板显示并允许更改站点的数据库，本地存储，会话存储和cookie。

最后，这两种工具都有自己的细微差异，这使各种操作变得简单或困难。我的建议是将Firebug用于Firefox，将DevTools用于Webkit浏览器，因为只有Firebug Lite可以在Chrome上运行，并且缺少普通Firebug具备的许多功能（DevTools内置在Chrome中）。

— tcooc
source
10

使用Firebug使我感到更加舒适。我暂时无法想到具体细节，但有时我会尝试在Safari或Chrome中调试某些东西，并且看起来像PITA，我启动了Firefox并很快完成了所有工作。

DOM选项卡是一个加号。与Chrome的同类产品相比，它更易于访问且布局合理。我也更喜欢将DOM和其他JS对象记录到Firebug中的控制台的方式。

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

总体而言，这并不重要，因为无论如何您都必须在两种浏览器中都进行测试。和IE一样，最好将其与IE的Dev工具（已改进，但与FF或Webkit的工具相比并不好）进行比较。

我认为Firebug中没有特别先进的功能，但Chrome中不会缺少任何功能。

— 日航
source
6

编辑：这曾经是真实的，但是Chrome开发工具实现了它。

Firebug可以搜索页面上加载的所有脚本。Chrome开发者工具只能在当前选定的脚本AFAIK中进行搜索。

— 斯拉沃
source
我仅将Firebug用于此功能，并使用Cmd Shift C随时选择元素。
— mbdev
3
当我写下答案时，Chrome开发工具没有此功能。从那时起，他们就实施了它。请参阅我在这里提出的一个问题的答案：stackoverflow.com/a/7970237/1801
— Slavo 2012年
斯拉沃钉牢了它。您可以在Chrome开发工具中一次搜索所有脚本（和所有其他资源）。只需打开“资源”选项卡并使用右上角的搜索框
— Paul
CDT中的搜索框现在消失了。使用Ctrl + F可以在当前脚本中搜索，而Ctrl + Shift + F可以在所有脚本中搜索
— Akhil
4

据我所知，Firebug是唯一可以在您键入时实时编辑HTML代码和文本的程序。例如，如果您尝试查看文本在容器中的放置方式并一次添加一个字符，则非常有用。

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

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

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

— 尼克拉斯
source
我想现在您也可以在Chrome中做到这一点。
— Piyush Soni 2012年
我希望你是对的，但事实并非如此。我正在使用最新的Chrome 21.0.1180.89。您使用什么版本？Beta /金丝雀？
— 尼古拉斯2012年
3

鼠标选择Firebug很棒，但是我似乎无法在Chrome开发者工具中找到它。

这让我感到困扰，因为我无法在萤火虫中找到它的热键，而chrome却完全没有它。

我是一个菜鸟开发者，因此在开发过程中大多数时间仍然使用鼠标。

— 瘦男孩
source
3

当时有人问这个问题，Firebug是野兽，但现在Chrome开发人员工具（DevTools）对于Web开发人员来说很方便。尽管我对Firebug不满，因为我已经学会了使用Firefox和Firebug进行Web开发。

它是Web开发的绝佳工具，它介绍了DevTools和Firefox的DevTools的所有主要功能。但是，尽管它们没有涵盖Firebug的所有功能，但我切换到了Chrome DevTools，因为它们重量轻且比Firebug快得多，因此我很容易定义访问localStorage的方式，并在其中组织了源代码。

在这里，我将列出Firebug中的独特功能，

  • 搜索：

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

  • DOM：

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

  • 饼干：

    Firebug让我们创建自己的cookie，并提供导出cookie的准备。

  • 网络/网络：

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

  • 资料来源：

    尽管源编辑可在DevTools，我觉得Firebug是更好地在使用源编辑，因为如果你要编辑的DevTools内的CSS文件，你必须去源面板，然后按Ctrl+ O来查找文件。只有这样，您才能编辑文件。在Firebug中，您可以轻松地在每个菜单选项卡下找到Source Edit。

  • 对dojo的支持：

    我曾经是dojo开发人员，可以使用Dojo Firebug扩展轻松地将 Firebug 扩展为支持dojo开发。

— 维金·保拉杰（Vijin Paulraj）
source
2

客观地看到Firebug 2.0具有许多小的功能，而Chrome DevTools没有。其中一些列在这里：

控制台面板

HTML面板

CSS面板

DOM面板

  • 一处显示所有DOM属性
  • 显示关闭
  • 允许按属性，功能等过滤显示。

网板

  • 允许在XmlHTTPRequests上停止
  • 显示每个请求的缓存信息

Cookies面板

  • 创建和编辑Cookie
  • 控制Cookie权限
  • 显示Cookie的原始大小和格式化大小
  • 允许在更改Cookie时停止脚本执行
  • 以标准格式导出Cookie

一般

  • 在外部编辑器中打开HTML，CSS和JavaScript
  • 允许自定义快捷方式

Firebug是开源的，它具有超越可用性的“功能” 。这样每个人都可以参加。

话虽如此，Chrome DevTools（以及Firefox DevTools）与Firebug相比，具有更多的功能以及其他越来越小的优势，因为与其他DevTools背后的团队相比，Firebug背后的团队非常小。

此外，Firebug 3+集成到内置的Firefox DevTools中，这意味着这些版本继承了Firefox DevTools的所有功能，并且可能会添加其他功能。

— 塞巴斯蒂安·扎特纳（Sebastian Zartner）
source
1

还添加它可以xopy XPATH为HTML元素添加CSS选择器。

有时候真的很方便！:)））哈哈哈

— 安德烈
source
1

我认为开发工具很相似，但是我在强制Chrome不缓存任何内容方面遇到了麻烦。即使设置Chrome的“禁用缓存”设置也不能100％地起作用；我不知道为什么。

我在Firefox / Firebug中没有这个问题，因此我仍在使用它。

— 罗曼
source
1

加我几毛钱...

  1. Chrome Inspector无法按字母顺序对CSS属性进行排序，因为Firebug可以像魅力一样做到这一点。当您检查某些css元素并需要抓住它时，它会很有帮助，萤火虫对此非常有用。

    按照良好的CSS编码惯例，将CSS属性在代码中按字母顺序排序始终会更好。

  2. 当您处理涉及大量脚本的项目时，在firebug脚本标签下的选项中，您可以选择在提供的建议框中搜索js文件。与chrome一样，您将有一个a脚的树状视图来查找JS文件，这很麻烦，以查看js文件的命名空间并遍历树。

    此选项可能不会影响任何在项目中涉及很少JS文件的人。此功能是我的脚本超过1000个JS文件时使用的Firebug的补充。

— 拉维
source
0

今天几乎要进行切换了，但是我注意到我无法右键单击Chrome中经过修改的CSS并像在Firebug中一样复制规则或样式声明。天哪，我希望firefox不会突然开始吮吸，否则我不会遇到这个问题。

— 禁止
source
还要注意的是，在Chrome中，您无法使用箭头键滚动浏览属性的各种选项。
— 禁止
0

使用chrome调试器，我可以调试GWT项目的jsni，其中FireBug仅显示一个匿名函数，而我却根本不认识实际函数。

— 阿西莫夫
source
0

我喜欢Chrome开发人员工具，但有时我错过了Firebug的这些强大功能。

  • 条件断点：仅在特定条件下暂停。
  • 记录函数调用：标记函数并在控制台中查看您想知道的所有内容。
  • 中断属性更改：如果属性更改，则标记对象和调试器将暂停。
— 里特什·钱多拉（Ritesh Chandora）
source
0

“编辑并重新发送”请求功能

通过Firefox开发人员工具中的“编辑并重新发送”功能（重播XHR或Firebug中的某些内容），您可以通过更改请求（包括请求标头，请求正文，http方法甚至url）来重播XHR请求。Google Chrome的Replay XHR仅重播请求，并且不允许对请求进行任何修改。

我需要此功能时使用Firefox Devtools。

— 高朗·帕特尔（Gaurang Patel）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.