Firefox Aurora 10 中的开发者工具

你现在就可以使用的预览版

Mozilla 正在构建一系列稳定、快速且易用的开发者工具，这些工具将与浏览器一起发布。我想介绍一系列改进，这些改进计划于 2012 年 1 月 31 日以最终形式发布。

但是，你可以立即获取它们，方法是下载Firefox Aurora 频道。我个人认为 Aurora 版本非常稳定，并且可用于一般浏览和 Web 开发。试一试，看看你的想法。你可以将 Aurora 与你的稳定版 Firefox 一起安装。

新的页面检查器

使用内置工具，你现在可以深入了解页面的结构和布局。从“Web 开发者”菜单中选择“检查”，或按便捷的 ctrl-shift-I（Mac 上为 cmd-shift-I）键盘快捷键，你就可以直观地选择你感兴趣的页面元素。

你还会发现一个新的“检查元素”上下文菜单项，它允许你立即选择光标下的元素。

当你检查页面时，你会看到类似以下内容

我们覆盖页面以突出显示你正在使用的元素⁽¹⁾。高亮显示还会向你显示与你正在查看的页面元素关联的标签、ID 和类。

在窗口底部，有一个工具栏，它提供了用于更改或处理所选元素的选项。从左侧开始，有一个关闭按钮，用于关闭页面检查器并返回到正常浏览。 “检查”按钮切换可视选择模式，以便你可以突出显示另一个元素。专业提示：按 ESC 键也可以切换模式。

面包屑

我们称工具栏的下一部分为“面包屑”。它们向你显示你在 HTML 结构中的位置，并且让你可以快速切换到另一个元素。所选元素是深色的“按下”按钮。在其左侧是其父元素，在其右侧是其子元素之一。只需单击其中一个按钮即可在页面元素之间移动。如果你单击并按住一个按钮，则会显示一个菜单，让你可以选择按钮上列出的元素的同级元素。面包屑使导航变得快速，并且不会占用太多屏幕空间。

HTML

有时查看页面的 HTML 表示形式是找出发生情况的最快速方法。单击 HTML 按钮，你将获得该视图。工具栏右侧有一个调整器，用于设置你想要为 HTML 视图分配多少空间。此外，单击 HTML 视图中的节点将选择该元素以供进一步检查。专业提示：ctrl-H 切换 HTML 视图。

样式

最后但并非最不重要的是“样式”视图。这允许你深入了解、探索和试验 CSS。它提供了两种与所选元素关联的 CSS 的单独视图：基于 CSS 规则的视图（左上方）和基于属性的视图（右上方）。

规则视图的组织方式与你的样式表非常相似，显示应用于元素的所有规则以及这些规则提供的所有属性。被覆盖的属性会被划掉。你可以使用左侧的复选框轻松切换任何单个属性。单击属性名称或值一次即可对其进行编辑，并立即在页面上查看结果。如果你单击规则底部带括号的行上的任何位置，则可以在那里添加一个新属性。

在包含大量样式的页面上，有时你只想找出字体大小设置为多少。这就是属性视图的用武之地。你可以展开“字体大小”属性，并查看其设置方式以及哪个样式表设置了它。默认情况下，只会显示样式表中设置的样式（因此你不会获得列出的浏览器默认值）。如果列出了许多属性（例如，如果你使用重置样式表），则可以通过在搜索框中键入内容快速找到要查找的内容。

ctrl-S 切换样式视图。

Web 控制台 + 页面检查器：完美搭配

无论何时你都需要 Web 控制台，它都可用，即使你正在使用页面检查器。如果你选择了一个元素，则该元素可以通过使用变量$0在控制台中的 JavaScript 中获得。

Scratchpad

我们在 8 月份发布的 Scratchpad 功能为你提供了一种非常友好的方法来试验 JavaScript。你无需局限于一个小输入框，而是可以获得一个完整的编辑器窗口进行操作。现在，Scratchpad 使用Orion代码编辑器提供语法高亮显示、更好的缩进以及你期望从现代代码编辑器中获得的其他功能。

Scratchpad 现在已连接到 Firefox 的“会话恢复”功能。这意味着你可以在 Scratchpad 中尝试大量代码，如果重新启动 Firefox，则恢复会话也会恢复你的 Scratchpad。当然，你始终可以保存和重新加载 Scratchpad 文件，就像以前一样。

如果你只进行 Web 开发，我们已经简化了用户界面。如果你正在进行 Firefox 加载项开发，你应该将 about:config 中的 devtools.chrome.enabled 设置为 true。此设置允许 Scratchpad 在特权浏览器上下文中运行代码，而不仅仅针对当前网页。

`console` 对象

我们一直在构建从 JavaScript 代码中调用或在 Web 控制台的 JavaScript 输入处使用的console对象。它现在与事实上的标准一致，实现了跨浏览器标准的方法。Firebug 还有几个我们尚未实现的方法（console.table、console.profile、console.dirxml），但常用的方法都在这里。

更多功能即将推出

所有这些功能现在都可以在Firefox Aurora 版本中使用。我们正在努力为您提供更多新功能，用于下一个 Aurora 版本。

查看我们的参与页面，了解如何提供反馈并帮助改进这些工具。

脚注

1。其他 Web 开发者工具会更改你的页面（例如，添加一个类）以使所选元素可见。Firefox 的高亮显示器无需更改你的内容即可完成其工作.↩

blueskyonmars.com

更多 kdangoor 的文章……

92 条评论

patricio

我认为两个不错的改进是

– 添加分离检查器和开发者工具的可能性，因为在使用多个显示器时这会非常方便
– 改进/替换 view-source，因为当你使用真正不错的 css 属性检查器并单击指向样式表的链接时，它会将你带到一个乏味的纯文本 CSS，该 CSS 甚至没有行号

祝贺你取得的巨大进步，我认为这是 Firefox 需要持续改进的一个非常重要的方面，以便重新赢得所有因迁移到 Chrome 而流失的开发者用户

2011 年 11 月 16 日 11:08
1. Simon Gymer
  
  +1 表示需要能够将其从主浏览器窗口分离到另一个显示器上使用。这对我们来说非常重要，否则就没有足够的空间进行工作。
  
  2012 年 2 月 1 日 06:23
dan

OS X 上那些难看的滚动条是怎么回事？
破坏了其他所有东西。

2011 年 11 月 16 日 11:54
1. Kevin Dangoor
  
  我假设你正在使用 Lion。如果我记得没错，Firefox 中有一个关于 Lion 样式滚动条的错误报告。我认为开发者工具的滚动条与 Firefox 的其他部分没有区别。
  
  2011 年 11 月 17 日 08:36
Josh T.

我认为样式检查器中需要语法高亮显示。

除此之外，我真的很满意，我将其用作 Firebug 的替代品，因为我之前只使用它来做这件事。感谢 Mozillians 创建它。 :)

2011 年 11 月 16 日 12:17
Jon z

太棒了！它真的很快，而且也很时尚。

另一个不错的功能是类似 Firebug 的“网络”选项卡的可视化功能，该功能有助于组织、导航和查看页面发出的 http 请求，以及更完整的功能脚本调试（带断点、内联脚本编辑等）。

这确实是一个很酷的进步，我对接下来会发生的事情感到兴奋。

2011 年 11 月 16 日 12:19
1. Kevin Dangoor
  
  谢谢！
  
  调试器已经在开发中了（它使用 SpiderMonkey 中全新的改进调试界面）。网络时间线可能是我们接下来要处理的事情之一。
  
  2011 年 11 月 17 日 08:37
Kevin Dangoor

patricio：我们肯定计划能够将工具从窗口中分离出来。

patricio 和 Josh T：我们也有一些关于单击样式表链接时会发生什么的计划。敬请期待！

我很高兴你对迄今为止的进展表示赞赏！

2011 年 11 月 16 日 12:51
Robson Sobral

很高兴知道！更多功能，更少加载项！更少加载项，更好性能！

我只希望工具的设计能更好地与其余界面集成。

2011 年 11 月 16 日 13:58
1. Stephan Sokolow
  
  虽然我理解你的出发点，但我实际上喜欢深色的页面检查器。它终于让我有机会享受一些深色、时尚的 UI 元素，而无需将整个浏览器窗口调暗。
  
  （现在让我们希望“原生”标题栏停止/重新加载按钮只是我的 Aurora 中的一个错误，这样我就不必做一些愚蠢/疯狂的事情，比如我过去如何在 Linux Firefox 上强制安装类似 XP 的 Vista 主题以获得钥匙孔样式的后退/前进按钮。
  
  即使我使用的是 GNOME 而不是 LXDE，我实际上也不喜欢 Firefox 在 Linux 上破坏其外观和风格的优雅、独特方面的历史，以更好地融入 GNOME。）
  
  2011 年 11 月 16 日 14:26
  1. Stephan Sokolow
    
    我刚刚通过我的包管理器收到了 Firefox 8。这不是一个错误，或者如果真是的话，它还没有得到修复。
    
    好吧，这就是 userstyles 的用途。
    
    http://userstyles.org/styles/56465/firefox-8-restore-left-border-on-reload-button
    
    2011 年 11 月 16 日 16:21
Stephan Sokolow

几天前我在 Aurora 上尝试过，我非常喜欢你的方向。

轻量、快速，并且只缺少两个我仍然需要 Firebug 的功能。（直观地了解节点的尺寸如何分解成边距、填充等，以及能够直接在 DOM 视图中编辑 DOM。）

截至几天前，Web 控制台和页面检查器已经实现了我在 Firebug 中使用的一切，除了删除“请注册”覆盖层、快速迭代原型 UI 以微调设计、找出为什么节点不是我期望的形状以及超出其范围的事情，例如 YSlow 和 JS 断点。

2011 年 11 月 16 日 14:17
Edwin Martin

看起来不错。但这是如何与 Firebug 相比的？每个 Web 开发者都安装了 Firebug，所以这到底能增加什么呢？

我不是想破坏派对，我只是好奇。你最终想替换 Firebug 吗？或者这是否是非开发者的开发者工具？或者你更喜欢具有闪亮图形的开发者工具？这是如何定位的？

2011 年 11 月 16 日 15:25
1. Stephan Sokolow
  
  我自己也很好奇。
  
  来自https://hacks.mozilla.ac.cn/2011/11/accelerating-the-overall-web-experience-mozilla-at-velocity-europe/的音频表明，设计原则是要解决由于将 Firebug 作为单片、非此即彼的 blob 而导致的迟缓行为，但我记不起任何关于哪些情况是预期的明确声明
  
  * 替换 Firebug
  * 为大多数开发者提供替代方案，但让 Firebug 高级用户继续使用 Firebug
  * 补充精简版 Firebug
  
  2011 年 11 月 16 日 16:29
  1. Robert Nyman [Mozilla]
    
    目前，至少，想法是“为大多数开发者提供替代方案，但让 Firebug 高级用户继续使用 Firebug”。基本上是关于在网页浏览器中提供大多数用户需要的原生功能，而那些需要做更多事情的用户则可以使用 Firebug。
    
    2011年11月17日 02:25
Gilmore

我喜欢他们的发展方向，尤其是元素高亮显示的方式，但仍然有很多东西需要改进。

1) HTML 检查器、样式检查器和 Web 控制台同时打开，几乎没有空间用于实际的页面内容——我不明白为什么 HTML+Style 要占用这么大的空间。为什么不将它们放在同一个面板中，就像 Firebug 和 WebKit 工具一样？

2) 样式检查器无法滚动，因此如果您有很多继承的样式，则无法在不调整浏览器大小的情况下查看它们。

3) 样式检查器不允许复制粘贴，因此我无法将页面内所做的调整复制回 CSS 文件。

4) 我在样式检查器中选择了“属性”视图，取消选中“仅用户样式”，然后切换了选项卡。当我切换回来时，检查器已重新选中该框并隐藏了我想要查看的属性。

5) 显然，这还只是初期阶段，但在元素上直观地显示边距/边框/填充将非常有用。

2011年11月16日 17:52
1. Kevin Dangoor
  
  感谢您的反馈，我们当然还有更多想做的事情。
  
  1) 我个人不喜欢一直打开 HTML 检查器。很多时候，我无需它就能获得我需要的信息（特别是通过使用面包屑导航）。样式检查器对屏幕空间的利用更加合理。
  
  尽管如此，我们将在这些视图的呈现方式上做更多工作，并将提供更多选项。
  
  2) 这是一个 bug：https://bugzilla.mozilla.org/show_bug.cgi?id=700770
  
  3) 是的，我见过这种用例。我希望有更好的解决方案，但复制/粘贴应该按预期工作。
  
  4) 我认为这听起来像是一个 bug。如果您遇到此类 bug，请随时在此处提交：https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools
  
  这是一种简单的方法，可以让您了解您感兴趣的问题何时得到修复。
  
  5) 同意。为此有一个功能页面。https://wiki.mozilla.org/DevTools/Features/LayoutInHighlighter
  
  2011年11月17日 08:49
Aldi

看起来很棒！

在 UI 方面，它似乎遵循了其他浏览器中其他开发工具的样式。但是，我仍然觉得 Firebug 更直观……或者只是我一个人这样觉得？

一些可以至少稍微提高快速 Web 开发效率的事情

样式 > 规则
-> 使其可滚动
-> 添加自动完成功能

继续努力！

2011年11月16日 18:13
1. Kevin Dangoor
  
  谢谢！
  
  我们确实还有一些有趣的新 UI 元素即将推出。
  
  某些东西的“直观性”通常取决于个人经验，我确实亲耳听到过不同的人对现有工具的偏好各不相同。
  
  规则视图的可滚动性是一个 bug，修复即将推出。
  
  自动完成功能绝对是一项很不错的功能。
  
  2011年11月17日 08:51
Skoua

这个检查器看起来非常不错，但当我们已经有了 FireBug 时，我不太明白这样做有什么意义？

这将成为某种替代品还是它的精简版？

不过，我真的很希望 FireBug 能以这种 UI 集成到 FF 中。

2011年11月16日 18:27
1. Kevin Dangoor
  
  我在这里写过关于 Firebug 和 Mozilla 开发者工具的文章：http://blog.mozilla.com/devtools/2011/05/25/the-relationship-between-firebug-and-mozilla-developer-tools/
  
  Firebug 拥有数百万粉丝，并且多年来积累了许多有趣的功能。这一点都没有改变。
  
  我们现在构建的是快速、符合 Firefox 其他部分标准、与 Firefox 其他部分一起自动测试并随浏览器一起发布的工具。我们的工作构建了新的 API 并修复了旧的 API，这可以帮助改进 Firebug。
  
  Web 开发人员可以选择使用内置工具或 Firebug……无论哪种方式最方便他们完成工作！
  
  2011年11月17日 08:59
seleko

感谢你们的努力 :)
现在我无法停止使用 Chromium 来编写页面样式了 :)

2011年11月16日 22:46
magsout

看起来非常棒。但是，加载“样式”时调整网页大小是否有技术原因？我认为，最好像高亮显示器一样添加底部滚动条，或者像 Firebug 和 WebKit 检查器一样直接添加到高亮显示器中。

Gilmore 有些很好的想法，我同意他的观点。

2011年11月16日 23:18
pd

UI 比 Firebug 差得多。检查器似乎执行得更好，但这只是基于粗略的观察。这真的是对资源的极大浪费。真的，所有这些重新造轮子只是为了说“我们也有内置工具”？这太荒谬了。

2011年11月17日 04:05
1. Robert Nyman [Mozilla]
  
  这里有很多因素在起作用。Firebug 虽然是一个很棒的工具，但它有很多遗留代码和性能问题。Mozilla 希望在 Firefox 中拥有原生工具，无需任何额外安装，这些工具具有更好的性能，并且为开发工具的持续发展奠定更好的基础。
  
  这个想法也不是要取代 Firebug，而是提供能够完成大多数开发者所需的大部分任务的工具。
  
  2011年11月17日 04:11
  1. Aldi
    
    “Firebug，虽然是一个很棒的工具，但它有很多遗留代码和性能问题。Mozilla 希望在 Firefox 中拥有原生工具……”
    
    -> 那么为什么不利用这项工作来完善 Firebug 并使其成为原生工具，而不是“浪费资源重新造轮子”（正如 @pd 所说）？
    
    “这个想法也不是要取代 Firebug，而是提供能够完成大多数开发者所需的大部分任务的工具。”
    
    -> ……Firebug 也能做到这一点……
    
    2011年11月17日 07:17
    1. Robert Nyman [Mozilla]
      
      > 那么为什么不利用这项工作来完善 Firebug 并使其成为原生工具
      
      出于多种原因。Firebug 可以追溯到 2006 年，它拥有大量的代码和功能，这些代码和功能很可能永远不会出现在 Firefox 的原生开发者工具中。此外，逐一检查并调整所有这些代码可能需要的时间比构建新工具长得多。
      
      Firebug 更加强大，拥有更多功能，第三方开发者编写的扩展程序，以及比您想要构建到 Firefox 的每个版本/发行版中的依赖项多得多。
      
      2011年11月17日 07:23
      1. Aldonio
        
        > 此外，逐一检查并调整所有这些代码可能需要的时间比构建新工具长得多。
        虽然您关于时间方面的观点是正确的，但如果 Firefox 和 Firebug 开发团队联手打造一个强大而独特的产品，那仍然会更好，因为最终拥有两种不同的开发工具会造成代码冗余，用不同的方式做同样的事情……
        
        2011年11月17日 12:16
Raphael

人们一直在讨论它在哪些方面不如 FireBug，但在哪些方面人们认为它做得更好？

它似乎在一个方面做得更好，那就是代码片段。

其他所有方面似乎都被 Firebug 很好地覆盖了。

性能差异是否显著？

2011年11月17日 07:30
Dharmesh

在 Windows 中，切换 HTML 和 CSS 视图的快捷键是 Alt+S 和 Alt+H。

2011年11月17日 17:34
Alistair

我同意上述观点。

我看不出同时拥有两者有什么理由。要么将 Firebug 作为附加组件停用，并将所有资源集中在推进 Firefox 开发者工具上，要么就保留 Firebug 并专注于它。

我看不出拥有简化版开发者工具有什么意义。

2011年11月17日 22:18
1. Robert Nyman [Mozilla]
  
  不同之处在于，Firebug 有其他开发者，并且它不属于 Mozilla。即使我们与一个人存在重叠，但这也不是 Mozilla 将大量资源投入到这两个项目中的问题。
  
  2011年11月21日 06:55
Robert Nyman [Mozilla]

Aldonio,

我理解你的观点，工具的一些部分会做同样的事情。但是，总的来说，它们是两种不同的工具和方法，目标也不同。

2011年11月18日 01:28
Neil Osman

我希望看到 Firefox 和 Firebug 共同努力将 Firebug 集成到 Firefox 中。

2011年11月20日 03:14
1. Robert Nyman [Mozilla]
  
  从某种意义上说，它们确实存在联合努力，因为 Firebug 的主要开发者之一也在帮助 Firefox 中的开发者工具。目前尚不清楚这将在未来导致什么结果。
  
  2011年11月21日 06:56
Bob

开发人员能否扩展这些开发者工具？就像在 Firebug 中一样？

Bob

2011年11月21日 10:38
1. Kevin Dangoor
  
  是的！事实上，有些人已经创建了一个“字体”面板，可以插入页面检查器视图。
  
  请告诉我们您想编写哪种类型的附加组件，我们可以帮助您实现。
  
  2011年11月21日 10:45
Brandon Benvie

这需要能够分离，并且需要一种方法将功能导出到 Firebug 或一种方法让 Firebug 导入其他功能并将其 Firebug 化。我理解内部和外部之间需要保持微妙的平衡，但当由于内部 CSS 编辑器明显优于任何外部编辑器，但无法与某些 UI 配合使用而不得不在这两者之间切换时，作为开发者来说这不会很有趣。当我进行开发时，在处理复杂问题时，我会依次使用 JavaScript、CSS、HTML 和网络堆栈。这无法满足这种需求。

2011年11月21日 14:16
Brandon Benvie

这张图片具有说明性：http://bbenvie.com/img/devtools.png
请注意，Chrome/工具栏已经使用了最少的配置。

2011年11月21日 14:29
1. Robert Nyman [Mozilla]
  
  感谢您提供的图片和意见。希望将来会有其他方法来组合视图，使此类操作变得更好、更容易概述。
  
  2011年11月23日 03:32
James

阻止我使用原生检查器的原因是我无法像在 Firebug 中那样选择不同的伪类，我真的很希望他们能添加选择 :focus、:hover、:active 或 :visited 的功能。另一件事是您目前无法查看伪元素。我假设这些功能正在开发中？除此之外，我真的很喜欢新的检查器，并且很期待在它们完善一点之后开始使用它们。

2011年11月21日 16:41
1. Robert Nyman [Mozilla]
  
  很好的反馈，谢谢！
  
  2011年11月23日 03:32
Rahul

我非常喜欢这些功能，非常感谢，并为 Mozilla 团队开发各种开发者工具点赞。
1. 你们是否计划在 Firefox 中内置 HTML 和 CSS 验证工具？
2. 是否有颜色拾取器工具？虽然有附加组件可以实现此功能，但如果内置该功能会很棒。

2011年11月28日 11:46
Rahul

此外，请考虑一下 Web 可访问性功能。
3. 文字颜色可读性
4. 颜色对比度比率分析器

2011年11月28日 11:57
Kevin Dangoor

您好，Rahul，

我们目前没有计划内置 HTML 和 CSS 验证器。感谢您的建议！我们确实需要弄清楚内置功能和保持为附加组件的功能之间的界限在哪里。

我们确实计划开发颜色拾取器，而且您在可访问性方面的建议非常棒。

2011年11月28日 12:46
1. Skoua
  
  至少能够用 Unicorn 打开一个新标签页并向其发送我们的 URL 在我看来会很好。
  或者，如果我们在本地主机上工作，则发送页面内容。
  
  2011年11月28日 15:32
Rahul

非常感谢 Kevin 的回复……Web 开发人员附加组件中内置了验证工具，我用它来进行验证……至于其他方面，Firebug 运行得非常好……我将期待你们下一步推出的一些新功能，除了这些功能之外，你们还在开发哪些新工具？

2011年11月28日 21:24
Marco Campos

很棒的工作，我迫不及待地想看到它完成！
他们提到了组合窗口，正如我测试的那样，如果您在 Aurora 中打开所有内置开发者工具，就会出现很多窗口，用于检查的网站空间不多，并且窗口的 UI 也不太一致；因此，将工具组合在一个地方会很好。

Mozilla 和 Firebug 共同努力是一件好事，正如我所看到的，让两者同时运行的方法是在 Firefox 中内置一个工具/API，Firebug 可以将其作为附加组件进行扩展，这也可以消除 Firebug 中的一些遗留代码，使其成为一个可以改进现有开发者工具的强大工具。

我希望看到一个具有堆栈视图功能的 JavaScript 检查器。
一个显示 HTTP 请求的网络分析器也是一个很酷的功能。

2011年12月1日 06:41
Kenneth Pedersen

非常感谢这些新功能！我相信这将极大地提高我们在日常网站开发工作中的效率 :)

2011年12月1日 11:02
Evert

好吧，这显然会将开发者社区一分为二。有些人渴望看到这个新工具在未来几年发展成某种东西，希望它类似于 Firebug。而另一些人——像我一样——只是担心这将意味着我们将最终得到更糟糕的工具来完成我们的工作。但即便如此，我们也可能会适应。
让我担心的是，Firebug 尽管已经过时且存在遗留代码，但它是一个成熟的产品，许多人已经开始喜欢并依赖它。突然间，面对这样一个事实：它可能会在未来变成某种东西——至少目前看来——与之相比就像一个高中生的项目（请注意，我是在进行比较，我并不是说它就是），这多少有点令人失望，委婉地说。

坦白说，如果您收购Firebug并投入额外资源更新代码，我会高兴得多。因为我非常怀疑在更短的时间内重建相同价值的东西会更快。

2011年12月1日 14:57
1. Kevin Dangoor
  
  Firebug很棒，并且引领了许多创新。它仍然存在，并且Mozilla继续以过去3年以上相同的基础对Firebug进行投资（参见 http://blog.mozilla.com/devtools/2011/05/25/the-relationship-between-firebug-and-mozilla-developer-tools/）
  
  只要他们愿意，人们就可以继续使用Firebug。并且，正如线程中其他地方提到的，Firefox正在获得Firebug可以利用的新改进的API。
  
  “坦白说，如果您收购Firebug并投入额外资源更新代码，我会高兴得多。因为我非常怀疑在更短的时间内重建相同价值的东西会更快。”
  
  我理解这种情绪，但我们对情况的评估有所不同。由于Firebug的结构方式、Firefox自Firebug启动以来发生的变化以及Firefox随着新功能而发生的变化等原因，构建新工具是最佳选择。
  
  同时，Firebug 1.9将在3-4周内发布。
  
  Web开发人员可以选择他们喜欢的工具（并且还有许多其他可用的工具，如Robert Nyman最近在Hacks上的帖子所示）。
  
  2011年12月2日 06:40
  1. Evert
    
    如果我们不确定Firebug是否会继续开发，我完全同意你的观点。特别是自从首席Firebug程序员接受了Chrome的工作，正如我们在这里看到的那样： http://news.cnet.com/8301-30685_3-20080338-264/firefox-world-loses-web-dev-guru-to-chrome/ 所以最终（无论短期还是长期，我们都不知道），我怀疑Firebug要么会被停止，要么会成为一个废弃的工具。
    
    所以基本上，我的担心是我们最终会得到一个比现在更差的开发工具（没有进步反而倒退），无论是您在这里提供的Firebug的精简版还是不再维护的Firebug版本。
    我没有看到或听到任何能让我安心的话？
    
    2011年12月2日 07:12
    1. Kevin Dangoor
      
      不用担心，因为Firebug并没有失去领导者。Firebug的旧领导者（John J. Barton）离开IBM去谷歌工作。Jan（Honza）Odvarko多年来一直在全职开发Firebug并管理其发布，当John离职时，他自然而然地接过了这个角色。
      
      此外，Firebug拥有自己的社区。并非许多开源项目拥有250万每日用户！还有其他开发人员参与其中。它是开源的，使用JavaScript/HTML/CSS。人们可以对其进行修改，并且确实有人在修改。
      
      Firebug不仅是一个持续进行的项目（即将发布新版本，对吧？），而且我在这里展示的肯定不是你将看到的最后的东西。这些工具将随着时间的推移而改进，并会加入其他新功能。
      
      2011年12月2日 07:50
Dan Blumenthal

感谢您让我了解正在发生的事情。像我们所有人一样，我也使用Firebug。很高兴听到有新的、功能更强大的版本即将发布。

2011年12月1日 19:54
Webstandard 博客（Heiko）

我认为Mozilla实施开发工具是一个非常好的决定。因为，较少的外部扩展将使浏览器启动速度更快。感谢您实施该工具并感谢您分享这些新闻！

2011年12月2日 01:46
Simon

好消息！
我希望它能最好地取代Firebug！

2011年12月2日 02:08
ad4z

总体看起来不错。

我建议添加使用上下箭头更改CSS数值的功能，就像在Firebug中一样（上/下 = +1 / -1，Shift + 上/下 = +10/-10，Ctrl + 上/下 = +0.1/-0.1），这有意义吗？

除此之外，它看起来很有希望！

2011年12月2日 02:53
Mister M.

我当然希望看到这些构建以便携版本的形式出现，而不是需要安装它们。

2011年12月2日 05:21
1. Kevin Dangoor
  
  我相信Aurora和Beta的构建方式与Firefox相同，使用相同的安装例程。您可以将它们与主Firefox一起安装，并且有一些计划可以更轻松地管理多个Firefox。
  
  这些版本将在2个月内发布最终版本……所以你也可以等到那时。
  
  2011年12月2日 06:43
Pablo Fernandes

我希望你们能够做出一些与当前Chrome检查器不同的东西。在开发过程中能够使用这两种工具将会很棒。

2011年12月2日 12:14
Brian Fenton

不想听起来太消极，但我认为你们会遇到的问题是Joel Spolsky老生常谈的问题，每个人都使用不同的20%。人们会抱怨他们最喜欢的Firebug功能不见了，而你们的问题是每个人都有稍微不同的20%。你已经可以看到上面的评论中发生了这种情况。Joel的文章 http://www.joelonsoftware.com/articles/fog0000000020.html

2011年12月2日 15:27
1. Kevin Dangoor
  
  实际上，Joel有几篇文章会告诉我们不要做我们正在做的事情 :)
  
  当然，Joel本人说过不要创建自己的编程语言，然后还是创建了。有时，你试图解决的问题需要某种特定的解决方案。
  
  我确实认为80/20原则通常适用，但我也同意人们会对Firebug（它有很多小功能）有自己的偏好功能。很棒的是，人们可以选择最适合自己的功能。
  
  2011年12月5日 06:58
Regnareb

为什么不重用Dragonfly呢？它是这里最好的（如果不是最好的）开发工具之一，而且它是开源的（BSD许可证）！

https://bitbucket.org/scope/dragonfly-stp-1
http://my.opera.com/dragonfly/blog/opera-dragonfly-open-for-business

2011年12月3日 05:12
1. Kevin Dangoor
  
  Dragonfly当然是一款不错的产品。但是，我们仍然想做其他一些事情，这些事情将在未来的版本中（或对于参与该项目的人）变得明朗！
  
  2011年12月5日 07:01
zahidul hossain

看起来很棒……迁移到Aurora版本

2011年12月3日 06:08
Oğuz Çelikdemir

我想看到像Skybound Stylizer这样的CSS编辑功能。在我看来，如果你想做一些新东西，你必须与竞争对手有所区别。当我看到屏幕截图时，我以为“Mozilla将用webkit替换他们的引擎”。请更具体。

例如，如果您决定在Aurora中制作一个像Skybound Stylizer一样的CSS编辑器，请考虑css属性更改。您可以在一个简单的选项卡中显示这些更改，其中也包括选择器。

2011年12月3日 11:44
1. Kevin Dangoor
  
  这篇文章主要关注我们在Aurora 10中实际发布的内容。通常，您可以在我们的功能页面上了解未来计划
  
  https://wiki.mozilla.org/Features/DevTools
  
  我不熟悉Skybound Stylizer，但我确实同意考虑更改的想法。这是我们正在讨论的事情。
  
  2011年12月5日 08:26
brentonanthony

youtube无法正常工作。因为是防病毒软件或其他什么东西。
但我只需要帮助修复它。我去Firefox寻求帮助以使youtube正常工作。

2011年12月6日 16:03
Saeed Neamati

我只能说“哇！”。有了这些工具，想象一下Web开发和设计将变得多么容易。这是一个好消息。谢谢。

2011年12月7日 08:20
Corban Brook

我经常想做的事情之一是能够检查元素，然后对该元素运行javascript操作。在Chrome中，我通常在元素窗格中选择元素，手动编辑标记并为其分配一个id，然后从控制台查询选择元素以将其分配给一个变量进行操作。如果仅仅通过在检查器中选择元素就可以自动将其分配给window.inspector.selectedNode或类似的东西，以便我可以轻松地在控制台中开始操作它，那就太好了。

谢谢。

2011年12月7日 10:00
1. Kevin Dangoor
  
  如果您选择一个元素并打开控制台，您可以使用控制台中的$0变量来引用所选元素。（一个方便的提示：这在Firebug和Chrome中也有效！）
  
  2011年12月8日 06:44
Ray M.

同意#comment-1045178

人们习惯了像Firebug和Webkit工具那样的面板布局。此外，右侧的CSS面板会缩小主要内容区域，这将破坏许多页面的布局，除非在更大更宽的屏幕上工作。

2012年1月4日 18:40
1. Kevin Dangoor
  
  我们正在开发工具的新布局。
  
  2012年1月23日 14:05
Andriy

您将来是否计划在您的工具中调试IndexedDB（就像Webkit中的WebSQL一样）？

2012年1月13日 15:14
1. Kevin Dangoor
  
  是的，我们无疑会添加对IndexedDB检查和故障排除的支持，但我们还有其他优先级要处理。
  
  2012年1月23日 14:05
Sam

有没有办法禁用上下文菜单中的“检查元素”？

这是一个不错的补充，但由于我目前仍将坚持使用Firebug，因此我在菜单中现在有两个“检查元素”选项，一个在另一个上面，我经常点击错误的那个。如果我可以删除它就好了。

2012年2月7日 10:23
1. Kevin Dangoor
  
  不幸的是，关闭上下文菜单项的方法现在有点笨拙。如果您进入about:config，您可以设置首选项
  
  devtools.inspector.enabled
  
  为false（只需搜索“inspector”，您就可以很快找到它）。
  
  这将完全关闭该功能，因此即使您想使用Firefox 11（现在处于Beta版）中提供的很棒的3D视图，它也不会出现在Web开发人员菜单中。
  
  2012年2月8日 08:58
  1. Sam
    
    就这样吧，谢谢。我使用Tilt插件（我想这就像FF11中的3D功能？）所以现在可以不用开发工具了……
    
    2012年2月8日 09:04
    1. Kevin Dangoor
      
      正确，Tilt插件有点过时了，但仍然有效（并且有一些我们没有提升到主要工具中的随机功能）。
      
      顺便说一句，如果您有某些特定原因坚持使用Firebug，我们很乐意了解这些原因。所有这些数据点都有助于我们将精力集中在人们最常尝试执行的操作上。
      
      2012年2月8日 09:24
      1. Aldi
        
        这里有一件事让我坚持使用Firebug……像Firebug一样并排放置HTML和样式检查器……以及能够搜索HTML检查器。
        
        2012年2月8日 16:58
Aman

1. 重申对更紧凑布局的巨大需求。尽管UI看起来非常令人印象深刻，但对紧凑性的需求不容忽视。请让设计师知道有些东西恰到好处，不需要为了脱颖而出而进行大幅更改。GC检查器与FireBug并没有太大区别，但没有人说它们缺乏创意。所有这些并不是说我不喜欢这个主题，它很棒，但便利性高于外观。

2. 在“规则”部分下按字母顺序排列CSS属性会很好（它们现在看起来排列得很随意）。

3. 检查器似乎非常贪婪，并且不放弃控制。每次我在此文本区域中按下“回车”，即使检查器最小化到窄条，它也会切换“检查”功能，而不是像我想要的那样换行。
注意 - 我可以在检查器打开的情况下使用字母数字键，但不能使用“箭头键”或“回车”键，这非常误导！

4. 绝对需要一个布局检查器来查看实际的元素尺寸。

5. 每次我在“Web控制台”的任何部分下检查一个条目时，它都会打开一个新窗口，导致大量弹出窗口需要关闭！

6. “Web控制台”中的“网络”部分需要比当前状态更详细。GC样式的单独网络部分或FireBug样式的内联部分将比弹出样式更受青睐。

7. JavaScript检查器和调试器也非常需要。

我相信您一定已经认识到这些需求，并且已经在努力开发更好的产品，但3D外观在JS检查器之前并不能让人充满信心。

最后，我要感谢您为我们提供了一个很酷的产品，并期待看到它得到改进，并可能消除对外部开发工具的需求。

谢谢，
Aman

2012年2月8日 12:43
1. Aman
  
  哦，还有检查器在我的个人电脑（Fedora 16，64位）上无法工作。
  
  2012年2月8日 12:47
  1. Kevin Dangoor
    
    当你说“检查器无法工作”时，你是指3D视图吗？
    
    2012年2月9日 09:38
    1. Aman
      
      不，我的意思是检查器的黑色条根本没有显示！（3D视图已经可用了吗？）
      此外，如果我打开了多个窗口，我无法关闭Firefox（弹出窗口是一个空的确认框）。昨晚在我的软件更新管理器中，我还有另一个Firefox更新。该更新修复了检查器和Firefox。
      此外，Firefox 9在开发我正在处理的产品时，在ajax请求期间经常崩溃。所有这些问题都通过更新得到了解决。
      
      感谢您提供如此棒的产品。
      
      附注 - 我使用GC的一个原因是它允许我同时打开隐身窗口和普通窗口。当我想以不同用户身份登录我的应用程序时，这很有帮助。这种情况比你想象的要多。非常感谢您提供这样的功能。
      
      2012年2月9日上午10:45
      1. Kevin Dangoor
        
        哦，抱歉，我误解了。3D视图将在Firefox 11（预计3月中旬发布，目前处于测试版）中提供。
        
        我还没有收到关于页面检查器完全无法打开的报告。
        
        我很高兴听到您遇到的崩溃问题已解决！
        
        是的，Chrome的隐身模式做得很好，我相信Firefox也对此进行过讨论。我个人使用多个配置文件（一开始有点难上手……从命令行使用 -ProfileManager 启动Firefox），这样我就可以同时运行不同的Firefox，而不会相互冲突。
        
        那是Firefox的另一个部分，我不知道那里的优先级是如何排序的。我知道正在考虑某种形式的该功能。
        
        2012年2月9日上午10:57
2. Kevin Dangoor
  
  感谢你的反馈，Aman。
  
  1. 我们肯定仍在改进UI，包括将控件放在单独窗口中的功能。请关注未来的版本发布公告。
  
  2. “属性”视图按字母顺序排列。“规则”视图按特异性顺序排列。
  
  3. 在与页面交互之前，您应该关闭页面检查器。页面检查器绑定了一堆按键，以便在导航元素以进行检查时使其有用。
  
  4. 布局视图正在开发中！
  
  5. 这里有优点和缺点，但总的来说我同意你的观点，我们正在考虑选择方案。
  
  6. 这点也是一样。我们目前正在决定如何处理“网络面板”的等效功能。
  
  7. JavaScript调试器正在开发中（第一段代码刚刚在周二上线）。
  
  此外，我还要指出，3D视图是去年夏天作为Google夏季代码项目创建的，然后简化和完善以包含在Firefox中。如果我们没有现有的代码，我们肯定会优先处理其他功能。有时事情会在不可预测的时间进入产品（尤其是在开源中！）。
  
  2012年2月9日上午09:37
Aman

祝贺JS调试器的进展。
我理解绑定按键的必要性。只是在绑定某些按键的同时保留其他按键不受影响会让人感觉误导。

——
Aman

2012年2月9日上午11:05
burk

糟糕。现在我的上下文菜单中有两个“检查元素”，一个来自Firefox，一个来自FireBug插件。也就是说，Firefox的检查功能缺少删除HTML元素的能力……如果打算替换FireBug，它还没有准备好。

2012年3月3日上午09:43
mmrtnt

我同意。我喜欢使用FireBug在一次性尝试阅读时去除烦人的动画。

2012年5月11日下午16:59
suraj

这对网页开发者来说是一个很棒的工具。感谢Mozilla团队。

2012年7月11日上午04:31
markk morann

你好。
这对开发者来说是一个非常棒的工具。
我已经激活了此工具，但在我的笔记本电脑上：富士通N6200系列……
我遇到一个问题..我可以看到3D按钮…为什么？
是显卡问题吗？
我只有[style]按钮。

如何解决此问题？……
在另一台电脑上没有问题……

2012年10月6日上午00:37
1. Kevin Dangoor
  
  查看显卡黑名单。
  
  https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers
  
  2012年10月6日上午08:01

本文的评论已关闭。

Hacks

作者 kdangoor

你现在就可以使用的预览版

新的页面检查器

HTML

样式

Web 控制台 + 页面检查器：完美搭配

Scratchpad

`console` 对象

更多功能即将推出

关于 kdangoor

92 条评论

Firefox Aurora 10 中的开发者工具

作者 kdangoor

你现在就可以使用的预览版

新的页面检查器

面包屑

HTML

样式

Web 控制台 + 页面检查器：完美搭配

Scratchpad

console 对象

更多功能即将推出

关于 kdangoor

发现 Web 开发的优秀资源

谢谢！请检查你的收件箱以确认你的订阅。

`console` 对象