88

我是一名新手 Web 开发人员，我曾多次推荐 Firebug 进行调试。然而，到目前为止，我一直在使用 Chrome 的内置开发者工具。它似乎完成了 Firebug 所做的一切，并且更干净、更有条理作为奖励。

随着我的调试越来越先进，Firebug 是否有一些我会错过 Chrome 的 DevTools 的功能？如果是这样，它们是什么？

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

4

17 回答 17

138

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

Chrome 的 DevTools 踢屁股，因为它有：

  • 内置时间线、分析器和堆分析器
  • 内置审计工具
  • 可以访问和编辑 Local/SessionStorage、Cookie、SqlLite DB、WebSQL、AppCache 等...
  • WebSockets 网络嗅探
  • JS 调试器有更多的特性（例如 WebWorker 断点）
  • JS 调试器让您即时编辑 JS 并运行它（JSFiddle w/o the fiddle）
  • 如果您愿意，每个窗口都有一个 devtools 窗口；Firebug 是一个单例
  • Firebug 通过减慢页面加载速度和为其检查器功能注入 CSS 来扰乱页面

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

于 2011-12-06T02:27:39.207 回答
29

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

于 2010-06-26T18:22:41.393 回答
11

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

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

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

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

于 2010-06-26T18:26:27.490 回答
10

我觉得使用 Firebug 更舒服。目前我想不出具体细节，但有时我会尝试在 Safari 或 Chrome 中调试某些东西，它看起来就像是一个 PITA，我启动 Firefox 并快速完成任何事情。

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

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

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

我认为 Firebug 中没有什么特别先进的东西，但 Chrome 中没有你会错过的东西。

于 2010-06-26T18:34:45.317 回答
6

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

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

于 2010-11-10T13:52:46.487 回答
4

据我所知，Firebug 是唯一可以在您输入时实时编辑 HTML 代码和文本的软件。非常有用，例如，如果您想查看文本如何适合容器并一次添加一个字符。

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

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

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

于 2012-07-20T15:16:38.327 回答
3

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

它困扰着我，因为我在萤火虫中找不到它的热键，而 chrome 完全没有它。

我是菜鸟开发者，所以开发的时候大部分时间还是用鼠标。

于 2011-02-26T23:48:18.803 回答
3

在被问到这个问题的时候，Firebug 是一头野兽，但现在 Chrome 开发者工具 (DevTools) 对 Web 开发者来说很方便。虽然我不是在抱怨 Firebug，因为我已经学会了使用 Firefox 和 Firebug 进行 Web 开发。

它是一个很棒的 Web 开发工具，它引入了 DevTools 和 Firefox 的 DevTools 的所有主要功能。然而，我切换到了 Chrome DevTools，尽管它们没有涵盖 Firebug 的所有功能，因为它们是轻量级的，并且比 Firebug 快得多，访问 localStorage 很容易定义，并且我认为源代码在那里组织。

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

  • 搜索：

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

  • DOM：

    DOM 结构可以通过各种过滤选项在 Firebug 中轻松访问，例如Show User-defined Properties、Show User-defined Functions等。

  • 饼干：

    Firebug 让我们创建自己的 cookie并提供导出 cookie的条件。

  • 网络/网络：

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

  • 资料来源：

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

  • 对道场的支持：

    我曾经是一名 dojo 开发人员，通过使用Dojo Firebug Extension ，Firebug 很容易被扩展以支持 dojo 开发。

于 2013-10-26T08:01:35.313 回答
2

客观上看到 Firebug 2.0 有很多 Chrome DevTools 所没有的小功能。其中一些列在这里：

控制台面板

HTML面板

CSS面板

DOM面板

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

网板

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

饼干面板

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

一般的

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

一个超越可用性的“特性”是 Firebug 是开源的。所以每个人都可以参与其中。

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

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

于 2015-04-02T08:06:11.563 回答
1

Firebug 有可能附加其他插件，例如Firecookie。对于其余部分，它们非常相似，在我看来，这都是关于味道的。

于 2010-06-26T19:25:16.230 回答
1

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

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

于 2012-03-20T10:41:54.193 回答
1

我认为开发工具是相似的，但我在强制 Chrome 不缓存任何东西时遇到了麻烦。即使设置 Chrome 的“禁用缓存”设置也不能 100% 起作用；我不确定为什么。

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

于 2012-04-27T20:35:24.933 回答
1

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

  1. Chrome Inspector 无法按字母顺序对 CSS 属性进行排序，而 Firebug 可以像魅力一样做到这一点。当您检查一些 css 元素并需要抓取它时，它会有所帮助，firebug 对此很方便。

    根据良好的 CSS 编码实践，最好让您的 CSS 属性在代码中按字母顺序排序。

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

    此选项可能不会影响项目中涉及少量 JS 文件的任何人。当我的脚本超过 1000 个 JS 文件时，此功能非常适合我使用的 firebug。

于 2012-07-12T15:19:46.347 回答
0

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

于 2013-06-06T15:34:05.317 回答
0

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

于 2013-10-26T23:14:06.170 回答
0

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

  • 条件断点：仅在特定条件下暂停。
  • 记录函数调用：标记函数并在控制台中查看您想知道的所有内容。
  • Break On Property Change：如果属性发生更改，标记对象和调试器将暂停。
于 2014-08-14T08:10:01.400 回答
0

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

借助 Firefox 开发者工具中的“编辑和重新发送”功能（Replay XHR 或 Firebug 中的东西），您可以重放 XHR 请求，其中包括请求标头、请求正文、http 方法甚至 url 的更改。Google Chrome 的 Replay XHR 只是重放请求，不允许对请求进行任何修改。

当我需要这个功能时，我会使用 Firefox Devtools。

于 2019-02-15T02:58:04.420 回答