Firebug的开发者工具没有哪些功能?

时间:2010-06-26 18:07:08

标签: firebug google-chrome-devtools

我是一名新手Web开发人员,我已经推荐过几次调试Firebug。然而,到目前为止,我一直在使用Chrome的内置开发者工具。它似乎完成了Firebug所做的一切,并且更清洁,更有条理地作为奖励。

随着我的调试越来越先进,Firebug有哪些功能我会错过Chrome的DevTools?如果是这样,他们是什么?

相关:Firebug-like debugger for Google Chrome

17 个答案:

答案 0 :(得分:136)

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

Chrome的DevTools因为它有:

  • 内置时间轴,分析器和堆分析器
  • 内置审核工具
  • 可以访问和编辑Local / SessionStorage,Cookies,SqlLite DB,WebSQL,AppCache等......
  • WebSockets网络嗅探
  • JS调试器具有更多功能(例如WebWorker断点)
  • JS调试器让你动态编辑JS并运行它(JSFiddle w / o the fiddle)
  • 如果你愿意,每个窗口都有一个devtools窗口; Firebug是一个单身人士
  • Firebug通过减慢其加载速度并为其检查器功能注入CSS来扰乱页面

更新:2年后,我不得不祝贺Firefox团队取得巨大进展。也就是说,Chrome团队和调试器每月都会实现巨大飞跃,引领行业发展。我会更新上面的列表,但坦率地说它会填满整个页面。

答案 1 :(得分:28)

我没有遇到过切换到Chrome后我错过的Firebug功能。

答案 2 :(得分:11)

Chrome开发者工具接管了Firebug的功能,因此所有主要功能和熟悉程度都存在(例如$0console对象)。

存在一些小差异,例如DevTools没有 CSS 面板(尽管可以在 Elements 面板中操作CSS样式表)。

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

最后,这两种工具都有自己的微小差异,这使得各种操作变得更容易或更难。我的建议是使用Firebug for Firefox和DevTools for Webkit浏览器,因为只有Firebug Lite可以在Chrome上运行,而且它缺少普通Firebug所具有的许多功能(并且DevTools内置于Chrome中)。

答案 3 :(得分:11)

使用Firebug感觉更舒服。我现在想不出具体的细节,但有时候我会尝试在Safari或Chrome中调试一些东西,看起来像是这样的PITA,我启动Firefox并快速完成任务。

DOM选项卡是一个加号。它比Chrome的等效产品更易于访问和布局。我更喜欢在Firebug中将DOM和其他JS对象记录到控制台的方式。

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

总的来说,这无关紧要,因为无论如何你必须在两种浏览器中进行测试。和IE,所以不妨将它与IE的开发工具进行比较(它们已经改进,但与FF或Webkit相比仍然不太好)。

我认为Firebug中没有任何特别的高级功能,但Chrome中没有任何优先功能。

答案 4 :(得分:6)

编辑:过去曾经如此,但Chrome Dev Tools实现了它。

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

答案 5 :(得分:4)

据我所知,Firebug是唯一可以在您键入时编辑HTML代码和文本的人。非常有用,如果您试图查看文本如何适合容器并一次添加一个字符。

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

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

我真的想换到Chrome,因为它似乎跑得更快,但实时编辑对我来说太重要了。

答案 6 :(得分:3)

鼠标选择萤火虫很棒,但我似乎无法在Chrome开发者工具中找到它。

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

我是一名菜鸟开发者,因此在开发时大部分时间仍然使用鼠标。

答案 7 :(得分:3)

当时这个问题被问到Firebug是一个野兽,但现在Chrome开发者工具(DevTools)对于Web开发人员来说非常方便。虽然我并没有对Firebug咆哮,因为我已经使用Firefox和Firebug学习了Web开发。

这是一个很棒的Web开发工具,它介绍了DevTools和Firefox的DevTools的所有主要功能。但是,我转而使用Chrome DevTools,虽然它们没有涵盖Firebug的所有功能,因为它们重量轻且速度比Firebug快得多,因此我认为访问localStorage很容易定义并且源代码组织在那里。

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

  • 搜索

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

  • <强> DOM:

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

  • <强>饼干:

    Firebug允许我们创建自己的Cookie 并提供导出Cookie

  • 网络/网络

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

  • <强>来源:

    即使DevTools中有 Source Edit ,我觉得使用 Source Edit 时Firebug更好,因为如果你想编辑DevTools中的CSS文件,你必须转到 Sources 面板,然后按 Ctrl + O 查找文件。只有这样你才能编辑文件。在Firebug中,您可以在每个菜单选项卡下轻松找到源编辑

  • 支持道场:

    一旦我成为道场开发人员,使用Dojo Firebug Extension 轻松扩展以支持道场发展

答案 8 :(得分:2)

客观地看,Firebug 2.0有许多小功能,Chrome DevTools没有这些功能。其中一些列在这里:

<强> Console panel

<强> HTML panel

<强> CSS panel

<强> DOM panel

  • 在一个地方显示所有DOM属性
  • 显示closures
  • 允许按属性,功能等过滤显示。

<强> Net panel

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

<强> Cookies panel

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

常规

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

A&#34;功能&#34;超出可用性的是Firebug open source。所以每个人都可以参与其中。

话虽如此,Chrome DevTools(以及Firefox DevTools)拥有比Firebug更多的功能和更大的优势,因为Firebug背后的团队与其他DevTools背后的团队相比非常小。

此外,Firebug 3+ integrates into the built-in Firefox DevTools,这意味着这些版本继承了Firefox DevTools的所有功能,并可能添加其他功能。

答案 9 :(得分:1)

我认为开发工具很相似,但我很难强制Chrome不缓存任何内容。甚至可以设置Chrome&#34;禁用缓存&#34;设置没有100%的时间工作;我不确定为什么。

我没有使用Firefox / Firebug这个问题,所以我还在使用它。

答案 10 :(得分:1)

加上我的几分钱......

  1. Chrome Inspector无法按字母顺序对CSS属性进行排序,因为Firebug可以像魅力一样对其进行排序。当你检查一些css元素并且需要抓住它时,它有助于firebug在这方面很方便。

    根据良好的CSS编码习惯,最好在代码中按字母顺序排序CSS属性。

  2. 当您处理涉及大量脚本的项目时。在脚本标记下的firebug中,您可以选择在提供的建议框中搜索js文件。 与chrome一样,你将有一个蹩脚的树视图来定位你的JS文件,这对于查看你的js文件的命名空间和遍历树是很繁琐的。

    此选项可能不会影响在项目中涉及少量JS文件的任何人。当我的脚本超过1000个JS文件时,我使用的firebug就是这个功能。

答案 11 :(得分:1)

还添加它可以复制XPATH添加CSS选择器的HTML元素。

有时真的很方便! :)))哈哈哈

答案 12 :(得分:1)

Firebug可以附加其他插件,例如Firecookie。对于其他人来说,他们非常相似,我认为这都与品味有关。

答案 13 :(得分:0)

今天几乎完成了转换,但我注意到我无法右键单击Chrome中的修改后的CSS并在firebug中复制规则或样式声明。上帝我希望firefox没有突然开始吸吮,否则我不会有这个问题。

答案 14 :(得分:0)

使用chrome调试器,我可以调试我的GWT项目的jsni,其中FireBug只显示一个匿名函数,而我根本不认识到执行函数。

答案 15 :(得分:0)

我喜欢Chrome开发工具,但有时我从firebug中错过了这些强大的功能。

  • 条件断点:仅在特定条件下暂停。
  • 记录函数调用:标记该函数并在控制台中查看您想要知道的所有内容。
  • 打破属性更改:如果属性发生更改,标记对象和调试程序将暂停。

答案 16 :(得分:0)

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

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

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