2010-06-26 138 views
85

我是一个新手网络开发人员,我曾经推荐多次调试Firebug。但是,到目前为止,我刚刚使用了Chrome内置的开发工具。它似乎做了Firebug所做的一切,并且更加清洁和有组织地作为奖励。Chrome的开发人员工具没有哪些功能?

当我在调试中获得更高级的功能时,Firebug有哪些功能会让我错过Chrome DevTools?如果是这样,他们是什么?

相关:Firebug-like debugger for Google Chrome

+8

我对web开发也比较陌生,但是很快就放弃了Firebug和Firefox,只是因为Chrome浏览器和开发人员工具都好得多。更有经验的开发者可能有不同的看法无论如何,请务必在Chrome开发人员工具中查看今年的Google I/O 2010对话:http://www.youtube.com/watch?v=TH7sJbyXHuk – brainjam 2010-06-26 18:21:03

+0

具有讽刺意味的是,那些使用Google Closure进行编程的人需要Firefox来运行Closure督察。 – hyperslug 2011-03-02 19:00:54

回答

136

我从一开始就使用了萤火虫,这是一个天赐之物,就像火灾的发明。但随后Chrome拿出了它的调试器,我试了一下。我一直使用Firebug,但一直关注Chome的开发工具,并最终无法再提出在v12中添加JSON工具后不能再切换的原因。

Chrome的DevTools踢屁股,因为它具有:

  • 建于时间轴,探查和堆分析
  • 内置的审计工具
  • 可以访问和编辑本地/ sessionStorage的,饼干,SqlLite DB的,WebSQL,AppCache等...
  • WebSockets网络嗅探
  • JS调试器有一些更多的功能(如WebWorker断点)
  • JS调试器让我们即时编辑JS并运行它(JSFiddle w/o小提琴)
  • 如果你喜欢,每个窗口都会得到一个devtools窗口; Firebug是一个单身
  • Firebug来自拖慢其加载和注射CSS为其检查功能扰乱页面

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

+5

+1最后一部分。我曾经是一名Firebug粉丝,直到我做出开关。 – 2012-11-08 14:08:42

+4

问题是要求你的答案对称:) – Dkyc 2013-11-09 12:54:30

+1

阅读你的答复后,我的嘴开始浇水。 – Karl 2014-01-08 06:09:18

28

我还没有碰到一个Firebug的功能我已经改用Chrome之后又错过了。

+2

+1以获得简洁明确的答案。 – 2014-03-02 08:33:00

11

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

有一些小的差异,如DevTools没有CSS面板(虽然CSS样式表可以在元素面板进行操作)。

中的Chrome工具还具有时间轴型材存储面板。 时间轴面板日志加载,CSS渲染和JavaScript解析。 配置文件面板配置文件资源使用情况和存储面板显示并允许更改网站的数据库,本地存储,会话存储和cookie。

最后,这两种工具都有自己的小偏差,这使得各种操作变得更容易或更困难。我的建议是使用Firebug for Firefox和DevTools for Webkit浏览器,因为只有Firebug Lite适用于Chrome,并且缺乏Firebug常用的许多功能(并且DevTools内置于Chrome中)。

11

我感觉使用Firebug更加舒适。目前我无法思考具体情况,但有时我会尝试在Safari或Chrome中调试某些内容,并且看起来像这样的PITA,我可以启动Firefox并快速完成任何操作。

对于DOM标签是一个加号。它比Chrome的等价物更易于访问和布局。我更喜欢DOM和其他JS对象在Firebug中登录到控制台的方式。

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

总的来说,这并不重要,因为无论如何你必须在两个浏览器中进行测试。和IE一样,不妨将它与IE的开发工具进行比较(虽然这些工具有所改进,但与FF或Webkit相比仍然不太好)。

我不认为在Firebug中有什么先进的特殊功能,但不会在Chrome中出现,您会错过。

1

Firebug可能会附加其他插件,如Firecookie。其余他们是非常相似的,这一切都是关于我的意见的味道。

+0

Chrome开发人员工具也可以使用['chrome.devtools' API](https://developer.chrome.com/extensions/devtools.html)进行扩展。 – 2013-04-06 10:44:38

6

编辑:以前是这样,但Chrome开发工具实现了它。

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

+0

我只用这个功能的萤火虫,Cmd Shift C随时选择元素。 – mbdev 2012-01-31 18:44:21

+3

当我编写答案时,Chrome开发工具没有这个功能。自那以后他们已经实施了。看到这个答案我在这里问的其中一个问题:http://stackoverflow.com/a/7970237/1801 – Slavo 2012-02-01 12:11:58

+0

斯拉沃钉它。您可以在Chrome开发工具中一次搜索所有脚本(以及所有其他资源)。只需打开资源标签并使用右上角的搜索框 – Paul 2012-04-23 08:00:17

3

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

它困扰我,因为我找不到它在萤火虫中的热键,而铬缺乏它完全。

我是一个noob开发人员,所以在开发时大部分时间仍然使用鼠标。

1

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

有时候真的很方便! :)))hahaha

1

我认为开发工具是相似的,但我有困难强迫Chrome不缓存任何东西。即使设置Chrome“禁用缓存”设置也没有100%的时间工作;我不知道为什么。

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

1

添加我几毛钱......

  1. Chrome检查不能CSS属性按字母顺序排列,其中作为萤火虫能做到这一点就像一个魅力排序。它有助于你检查一些CSS元素,并需要抓住它萤火虫来这方便。

    按照良好的CSS编码实践,它总是更好地让您的CSS属性在您的代码中按字母顺序排序。

  2. 当您正在处理涉及大量脚本的项目时。在脚本标记下的萤火虫中,您可以选择在提供的建议框中搜索js文件。 与铬一样,你将有一个跛脚树视图来定位你的JS文件,它很乏味地看到你的js文件的命名空间并遍历树。

    此选项可能不会影响任何涉及项目中少量JS文件的人。当我的脚本超过1000个JS文件时,这个功能就像我用的萤火虫一样。

4

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

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

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

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

+0

我想现在你可以在Chrome中这样做。 – 2012-09-13 03:25:09

+0

我希望你是对的,但事实并非如此。我正在使用最新的Chrome 21.0.1180.89。你使用什么版本?贝塔/金丝雀? – Niclas 2012-09-14 07:03:28

0

今天几乎做了开关,但我注意到我不能在Chrome中右键点击修改后的CSS,并像我可以在萤火虫中复制规则或样式声明。上帝,我希望Firefox没有突然开始吸吮,或者我不会有这个问题。

+0

也只是注意到,在Chrome中,您不能使用箭头键和滚动属性的各种选项。 – Banning 2013-06-17 16:56:54

3

在问这个问题的时候,Firebug是一个野兽,但现在Chrome开发者工具(DevTools)对Web开发人员来说非常方便。虽然我并不是在咆哮Firebug,因为我已经学会了使用Firefox和Firebug进行Web开发。

这是一个伟大的网页开发工具,它介绍了DevTools和Firefox的DevTools的所有主要功能。不过,我转向Chrome DevTools,虽然它们没有涵盖Firebug的所有功能,因为它们重量轻且比Firebug快很多,访问localStorage很容易定义,而且我认为源代码在那里组织。

在这里,我要列出的特征是如何在Firebug独特,

  • 搜索

    搜索选项是Firebug的明确定义,因为它的方便,我们可以搜索关键字区分大小写正则表达式

  • DOM:

    DOM结构可以在萤火虫与各种过滤选项显示用户定义的属性显示用户定义函数等容易地访问。

  • 饼干:

    萤火虫让我们创造我们自己的饼干并给出了条文出口饼干

  • 网络/网:

    萤火虫有面板wheras的DevTools称之为网络。这两种方法都有助于分析加载资源及其状态的所有请求。在Firebug中,我们可以轻松掌握资源'远程IP

  • 来源:

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

  • 支持道场:

    曾经我是一个道场开发商萤火虫是很容易地扩展使用Dojo Firebug Extension支持道场的研究与开发

0

随着铬调试器,我可以调试我的GWT项目的JSNI其中萤火虫只显示一个匿名函数,我真的不认识actuale功能都没有。

0

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

  • 条件断点:仅在特定条件下暂停。
  • 记录函数调用:标记函数并在控制台中查看想要知道的所有内容。
  • 物业变更破产:如果物业变更,标记物件及调试器会暂停。
2

客观地看到Firebug 2.0有很多小功能,而Chrome DevTools没有。其中一些是这里列出:

Console panel

HTML panel

CSS panel

DOM panel

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

Net panel

  • 允许停止对XMLHttpRequest的
  • 显示每个请求

Cookies panel

    缓存信息
  • 创建和编辑饼干
  • 控制Cookie权限
  • 显示饼干的原料和格式化大小
  • 允许对cookie的变化停止执行脚本
  • 出口cookies在标准格式

一般

  • 开放H TML,CSS和JavaScript的外部编辑器
  • 允许自定义快捷键

超越了可用性的一个“特点”是Firebug是open source。所以每个人都可以参与其中。

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

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

相关问题