Firefox: Firebug与inspect元素

Question

我对web开发是个新手，我不断听到使用Firebug的建议。问题是，我看不出Firebug比inspect element特性有什么优势(我使用Firefox24)。我是不是遗漏了什么？

我害怕习惯于一个工具，然后陷入我的方式切换到更好的工具。请建议在一个或另一个工具中具有优势的特定功能。

Answer 1

2年后的更新

随着我越来越多地使用开发工具，我开始意识到一些事情：

1. Firefox的Dev-Tools似乎在开发地狱中。我的回答已经过去两年了，在功能和易用性方面几乎没有任何明显的进步。

- Meagre improvements in Network panel and Debugger, but still way too much work has to be done to make it anywhere as good as Chrome.
- The debugger is still a mess, with the browser hanging a lot on breakpoints.
- The JSON objects are still shown in that very frustrating tree form, with no possible way to copy or expand to a JSON string.
- The timeline feature is laughable to say the least.

它们是如此基本的需求，以至于我开始相信Mozilla一点也不关心开发工具。

1. Firebug已经迷失了方向--它一去不复返，团队正在挣扎着创建一个新的Firebug3，它建立在内置的开发工具之上。现在，由于开发工具的功能严重不足，我不希望Firebug人员在至少一年的时间里能达到任何接近正常的可用性。
2. ，这就把我带到了Chrome。在看了最新版本之后，Chrome团队似乎在开发者工具领域拥有几乎无懈可击的领先地位，这是理所当然的。他们将重点放在了开发人员身上，并创建了一些精巧的东西来简化web-development.

的测试和开发

所以，总而言之，如果你今天想要这个问题的答案，我会毫无保留地推荐你Chrome。它节省了您的大量资源：

• 热血(来自沸腾)，
• 汗水(来自编码)，以及
• 泪水(来自调试)

谢谢。

现在，读一读我2岁的自我是怎么想的：

以下是一些差异：

++ = web检查器更好

-- = firebug更好

== =不能说

++在Web Inspector中有一个3D模式的，如果你正在摆弄z索引或者元素的命中区域没有被正确识别，这是非常好的。

++如果你在一个选项卡中打开了Firebug，然后切换到另一个选项卡并返回，那么切换需要相当长的时间。这个问题显然不存在于Inspector身上。

这个问题是由于火狐的Javascript调试器(JSD)中的错误造成的。这是一个已知的bug，在我写这篇文章的时候正在修复。安装1.13.0alpha版本，该版本修复了此错误。新版本的火狐也会修复他们的JSD。

++强大的响应式设计模式，用于在不同分辨率下测试您的站点。

--有很多针对Firebug、XPath、Sass等的插件，这对于扩展开发来说是非常棒的

-- (主观)我发现web-inspector的颜色主题非常酷，但当涉及到使用它时，它是非常困难的。

==在firebug和检查器中输出对象的方式同样糟糕(Chrome在这里占主导地位！)

在控制台中写入：console.log(window)以查看我正在谈论的内容。实际上，Firebug在这里甚至比检查员更好。

Answer 2

我将两者用于不同的依赖项。

在我的角色中最常见的是：

• 我发现在页面加载时查看JavaScript调用firebug要容易得多。此外，
• ，omnibug插件(针对firebug)非常方便地查看omniture和cookie

然而，在chrome中使用inspect元素，我发现在进行故障排除时非常方便的优点是能够编辑样式。

我相信这不会动摇你的决定，但我想要保持开放的心态，每个都有自己的优势。这是你需要它们做什么的问题。

就我个人而言，我看不到自己会适应其中一个。

Answer 3

这真的归结为偏好，因为每个人都有权衡。我真的很喜欢内置Inspect元素中的"Style Editor“，它可以让你创建样式表并实时查看效果。