Firebug 1.12 新功能

Firebug 团队发布了全新版 Firebug 1.12，以下是我们在该版本中实施的一些新功能。

Firebug 1.12 与 Firefox 23 - 26 兼容

Firebug 是一个开源项目，由来自世界各地的开发者维护，我不能错过这个机会来介绍所有为 Firebug 1.12 做出贡献的成员。

Jan Odvarko
Sebastian Zartner
Simon Lindholm
Farshid Beheshti
Steven Roussey

Florent Fayolle
Awad Mackie
Belakhdar Abdeldjalil
Thomas Andersen
Hisateru Tanaka

复制 CSS 属性

将 CSS 属性复制到剪贴板从未如此容易。现在可以将单个 CSS 属性或规则或整个样式复制到剪贴板。只需右键单击要复制的部分。查看有关此功能的详细描述。

copy-css

新的 Net 面板过滤器

旧的 Flash 过滤器已重命名为插件，涵盖了 Flash 以及 Silverlight HTTP 请求。还有一个名为字体的新的过滤器，用于查看仅自定义字体的 HTTP 请求（font/ttf 或 font/woff 媒体类型）。

net-panel-filters

使用过滤器按钮工具提示查看有关已过滤文件的详细信息。

DOM 事件日志过滤器

此功能允许过滤为特定元素设置的 DOM 事件日志记录。下一张屏幕截图显示了相关用户界面。有一个新的子菜单，允许选择应为所选元素记录哪些事件。

dom-events-filter

你也可以帮助我们改进此功能的 UI/UX。

自动完成弹出窗口改进

Firebug 命令行（在控制台面板中）上可用的自动完成弹出窗口已改进其设计，并且还提供内置命令行 API。

auto-completion-popup

请注意，弹出窗口的底部部分提供了 Firebug 命令行 API。

在命令行中使用

此功能允许使用新的 $p 变量从命令行引用各种页面对象（HTML 元素、JS 对象、网络请求、cookie 等）。$p 变量也可以在命令行表达式中使用。

use-in-command-line

查看有关此功能的详细描述。

分组控制台消息

如果消息连续多次出现，则控制台消息现在将分组。此功能可以显着减少日志数量，并使整个日志记录更容易！

group-console-messages

HTTP 请求时间的更好的信息提示

Net 面板中显示的单个 HTTP 请求的工具提示已得到改进。它将当前请求的所有阶段显示为一个小瀑布图。现在更容易理解计时。

net-panel-timings

控制台和 Net 面板的多个过滤器

控制台和 Net 面板同时支持选择多个过滤器。只需在单击过滤器按钮时按住 Ctrl 键。这允许例如仅在控制台面板中查看错误和警告，或者例如仅在 Net 面板中查看 HTML、CSS 和 JS 文件。查看屏幕截图。

multiple-filters

切换侧面板的可见性

你现在可以切换侧面板的可见性。此状态在 Firefox 重启后保持不变。查看几个屏幕截图。

toggleSidePanels1

如果不需要选择器侧面板，可以将其隐藏。

toggleSidePanels2

将上次命令行求值的結果存储在 $_ 中

Firebug 实现了一个新的变量，可在命令行中使用：$_。此变量存储先前表达式求值的結果（与 Chrome 开发工具兼容）。

store-last-command-line-result

新命令：getEventListeners()

Firebug 实现了一个新的命令行命令：getEventListeners()。此命令返回在给定对象上注册的事件侦听器。该对象通常是一个元素，但它也可以是例如窗口。

get-event-listeners1

在命令行上执行命令后，可以在 DOM 面板中进一步检查返回对象。查看以下屏幕截图。

get-event-listeners2

复制为 cURL

可以从网络请求创建 cURL 命令，以便从终端窗口测试请求。只需右键单击 Net 面板中的请求，然后选择 复制为 cURL。

copy-as-curl

控制台 API %f 日志模式的精度

可以使用第一个 console.log() 参数内的 %.xf 模式对浮点数进行四舍五入。这里 x 表示要四舍五入的十进制位数。

console.log("amount: %.2f", 4.3852)
将输出
amount: 4.39

precision

你可能想了解控制台 API 中可用的其他模式。

显示/隐藏堆栈参数

堆栈面板中显示的堆栈帧有时可能由于大量参数而无法使用，因此，Firebug 引入了一个新的选项 显示参数，允许显示/隐藏它们。

showArguments

CSS 面板改进

Firebug 为 CSS 面板引入了多项改进。现在有更多 CSS 信息可用。

@page 规则显示
带有 @media 元素的文件显示
@keyframes 规则现在显示
@-moz-document 规则显示

css-panel

还有很多新增强功能，你可以在我们的发行说明中查看完整列表。你也可以在 getfirebug.com 上查看官方公告。

关注我们的 Twitter，以便及时了解最新消息！

Jan ‘Honza’ Odvarko

19 条评论

Marc Devol

很棒的工作。特别感谢 $_、$p、分组控制台消息和 getEventListeners。<3 <3 <3

2013 年 8 月 21 日下午 12:46
Ivan Dejanovic

在众多出色的 Firefox 附加组件中，Firebug 是我最喜欢的一个，也是我使用最多的一个。感谢你们为构建这个出色的工具付出的所有努力。如果之前问过这个问题并且已经回答过，我表示歉意。你们有计划为 Firefox for Android 开发 Firebug 吗？

2013 年 8 月 22 日上午 2:27
1. Jan Honza Odvarko
  
  适用于 Firefox for Android 的 Firebug：是的。我们正在采用 JSD2（新的 Mozilla 调试 API），此过程的第二步是支持远程调试。一旦实现远程功能，Firebug 就应该能够连接到甚至在 Android 上运行的 Firefox。
  
  2013 年 8 月 22 日上午 5:28
Jessica

我只想对所有为 Firebug 付出巨大努力的优秀、健壮的男性表示衷心的感谢。你们让这个网站管理员非常非常高兴！

2013 年 8 月 22 日上午 5:18
Edwin Yip | Live CSS 编辑器

很棒！新的 Firebug 功能使 Firefox 更加实用，尤其是在考虑 Firefox 最新版本中的 *速度改进* 时！

Firebug 本身具有创新性，它的 html 检查器启发了我的实时 html 和 css 代码编辑器 :)

2013 年 8 月 22 日上午 6:22
Marcelo Ramos

我喜欢命令行改进。很棒的工作！

2013 年 8 月 22 日上午 7:54
Alexander Tkachenko

在最近更新后，FireFox 无法使用 Pixel Perfect，这对 FireBug 来说是一个很好的补充，但很遗憾它不能用。

2013 年 8 月 22 日上午 8:32
1. Jan Honza Odvarko
  
  我也喜欢 PixelPerfect！我个人提供了一个补丁，使 PixelPerfect 再次与 Firebug1.12 兼容。查看：https://github.com/openhouseconcept/PixelPerfect/pull/59
  
  请尽快通知扩展程序作者发布新版本 :-)
  
  2013 年 8 月 22 日上午 9:16
  1. Alexander Tkachenko
    
    非常感谢您修正了像素完美中按钮的错误！)))
    
    2013 年 8 月 25 日下午 11:12
Damien Lebreuilly

你们真棒！恭喜你们，感谢你们的发布，太棒了！

2013 年 8 月 22 日上午 9:27
Hoàng nghiêm

我喜欢 Firebug，它帮助我很多

2013 年 8 月 24 日上午 8:58
Pavel Forkert

伙计们，看到 Firebug 如此多的改进真是太棒了！但是我想知道为什么 Firefox 中需要两个开发工具包（Firebug 和 DevTools），它们的功能有很大一部分是重叠的。有人可以解释一下吗？

2013 年 8 月 25 日下午 12:53
1. Jan Honza Odvarko
  
  Firebug 一直以来都是作为一个独立的项目，在现有的流程和 Firefox 环境之外维护，而 DevTools 则是 Mozilla 内部使用标准流程的项目。请注意，Firebug 的目标一直是补充 Firefox 功能，而不是与之竞争（毕竟 Firebug 是一个扩展），我们希望通过使 Firebug 成为独一无二的工具来保持这一方向。
  
  2013 年 8 月 26 日上午 03:26
  1. Luke
    
    那速度呢？这个版本的 Firebug 的性能有提升吗？这是我切换到内置开发者工具的主要原因之一。
    
    2013 年 8 月 26 日下午 20:23
    1. Jan Honza Odvarko
      
      我们做了很多性能改进，也得到了反馈，性能确实有所提升。当前的瓶颈是 Firebug 使用的 JSD1（旧的 Firefox 调试引擎），我们目前正在进行将其替换为 JSD2（新的调试引擎）的过程。这种重构也将对调试期间的 Firebug 性能产生积极影响。
      
      2013 年 8 月 27 日上午 00:45
pd

另一个顶级的版本。好吧，有一些事情让我感到恼火，但总体来说，这个“虫子”的质量和实用性仍然闪耀着光芒。

2013 年 8 月 28 日上午 07:10
1. Jan Honza Odvarko
  
  感谢您不懈的支持！
  
  2013 年 8 月 30 日上午 00:52
aguru

Firebug 很棒。另一方面，Firefox 有自己的开发者工具。有时我会想，为什么他们不把两者合并到 Firefox 中呢？这样就只有一条开发路径了。

2013 年 8 月 28 日下午 19:40
Mathew Porter

一些很棒的新功能，我必须说 Firebug 是我最喜欢的开发工具，它可能是让我一直使用 FireFox 作为首选开发浏览器的唯一原因。

2013 年 9 月 1 日上午 10:24

此文章的评论已关闭。

由

新功能