Firebug 1.10 新功能

Firebug 1.10发布,所以让我们看看这个版本中引入了哪些新功能。

Firebug

首先,查看兼容性表格

  • Firefox 5.0 – 13.0Firebug 1.9
  • Firefox 13.0 – 16.0Firebug 1.10

Firebug 1.10 是真正的社区成就,因此,让我介绍所有为 Firebug 1.10 做出贡献的开发者。

  • Jan Odvarko
  • Sebastian Zartner
  • Simon Lindholm
  • Harutyun Amirjanyan
  • Steven Roussey
  • Joe Walker
  • Stampolidis Anastasios
  • Heather Arthur
  • Farshid Beheshti
  • Leon Sorokin
  • Florent Fayolle
  • Vladimir Zhuravlev
  • Hector Zhao
  • Bharath Thiruveedula
  • Nathan Mische

新功能

  • 引导安装
  • 延迟加载
  • Cookie 管理
  • 命令编辑器语法高亮
  • 自动完成
  • 跟踪样式
  • 新命令:help
  • 链接到 Web 字体声明
  • 支持媒体查询
  • 显示的实体格式
  • 显示的颜色格式
  • 菜单项的工具提示
  • 支持“focus” CSS 伪类
  • 来自 BFCache 的 HTTP 请求
  • 删除 CSS 规则

引导安装

Firebug 安装不需要浏览器重启。安装后,按下 F12,Firebug 就会立即出现在你的指尖。

如果你正在更新需要重启的先前 1.9 版本,则需要重启浏览器。

延迟加载

Firebug 不会再减慢 Firefox 的启动时间了!它会在用户第一次实际需要时加载。只有 Firebug 启动按钮和菜单会在启动时加载。

Cookie 管理

Firebug 允许你查看和管理浏览器中的 cookie。你可以拒绝特定站点的 cookie,过滤 cookie,创建新的 cookie 并删除现有的 cookie。你也可以在特定 cookie 更改其值时进入调试器,并查看导致更改的脚本行。以及更多!查看完整的 cookie 相关功能列表

命令编辑器语法高亮

命令编辑器(也称为多行命令行)支持语法高亮。

自动完成

Firebug 中的自动完成从未如此出色。此功能在编辑 CSS 属性、监视面板中的变量、断点条件、任何数字、颜色、字体系列等时提供帮助。只需尝试通过 Firebug UI 编辑页面,你就会亲眼看到。

查看截图。当在监视面板中键入时,自动完成会提供当前作用域中的变量。

跟踪样式

此功能允许跟踪所有影响特定 CSS 属性的位置。该功能是计算侧面板的一部分,其中每个 CSS 属性都是可扩展的。计算侧面板还支持颜色、图像和字体的工具提示。

看,有三个地方试图设置所选元素的字体大小(黑色的那个成功了)。当然,右侧的蓝色文本/位置是可点击的,并将用户导航到正确的位置。另请参见 详细说明

新命令:help

如果你想知道命令行(在控制台面板中)中实际上有哪些内置命令,只需输入:help。你将看到带有说明的命令列表。

绿色的命令名称是链接,将用户导航到 Firebug wiki,其中包含有关单击命令的更多信息(以及操作方法示例)。

链接到 Web 字体声明

此功能允许快速检查自定义字体系列声明。你只需右键单击你的字体系列值,选择检查声明,你就会自动导航到显示字体系列声明位置的 CSS 面板。查看下面的截图。

支持媒体查询

CSS 面板中会显示 @import CSS 规则的媒体查询,并且可以编辑它们。当然,在这种情况下自动完成也适用(例如,当我做截图时,我点击了 400px 值并按向上箭头,这就是为什么有 401px 的原因)。

显示的实体格式

HTML 面板中有一些新选项,允许更改显示的 HTML 实体格式。

顺便说一下,MathML 实体也受支持。

显示的颜色格式

还有一些新选项允许更改显示的 CSS 颜色格式。Firebug 提供三种选项:十六进制、RGB 和 HSL。这些选项在 CSS、样式和计算面板中可用。

菜单项的工具提示

这是众多小巧而整洁的改进之一。每个菜单项也都有一个工具提示,解释相关的操作。这对于选项特别有用。

支持“focus” CSS 伪类

除了hoveractive CSS 伪类之外,Firebug 还支持:focus

此功能在你想检查仅在检查的元素具有焦点时才适用的 CSS 规则的情况下很有帮助。以下是你要执行的操作。

  1. 使用 Firebug 检查器选择你的元素
  2. 打开样式侧面板的选项菜单(点击面板标签旁边的黑色三角形)
  3. 选中:focus 选项
  4. 现在 Firebug 会模拟焦点状态,因此,选择器中使用 :focus 伪类的每个 CSS 规则都将显示。

来自 BFCache 的 HTTP 请求

Firebug 网络面板能够显示来自所谓的 BFCache(后退/前进缓存)的 HTTP 请求。此缓存使已访问页面之间的后退和前进导航速度非常快。请注意,这与 浏览器缓存无关。

查看截图,我们更改了来自 BFCache 的请求的背景颜色,因此可以轻松地将它们与其他请求区分开来。截图中只有最后一个请求来自服务器。

要查看这些请求,你需要选中显示 BFCache 响应选项。

删除 CSS 规则

另一个整洁的功能,允许你删除整个 CSS 规则及其所有属性。只需右键单击 CSS 规则...

 

查看我们的问题跟踪器,了解 Firebug 1.10 中的所有 79 项增强功能

此外,关注我们 on Twitter 以获取有关即将发布的 Firebug 新闻的更新!

Jan ‘Honza’ Odvarko

关于 Jan Honza Odvarko

Honza 正在开发 Firefox 开发者工具

Jan Honza Odvarko 的更多文章...


58 条评论

  1. Benjamin

    干得好!

    2012 年 7 月 13 日 下午 07:55

  2. Brian

    太激动了,

    谢谢各位!

    2012 年 7 月 13 日 下午 08:53

  3. ismaail

    非常感谢

    2012 年 7 月 13 日 下午 13:44

  4. Spencer

    哥们… 你就是蝙蝠侠…

    2012 年 7 月 13 日 下午 14:23

  5. Jesse

    +100 万赞给跟踪样式功能!我期待它很久了!实际上,所有这些功能都做得很好。谢谢!

    2012 年 7 月 13 日 下午 16:03

  6. jlapitan

    哇哦!喜欢这些新功能…

    2012 年 7 月 13 日 下午 16:07

  7. Joshua

    很棒的新功能!

    谢谢!

    2012 年 7 月 14 日 上午 02:32

  8. Byzod

    我们需要多行编辑器的自动完成…

    2012 年 7 月 14 日 上午 03:50

    1. Sebastian Z.

      命令编辑器的自动完成已在计划中。

      Sebastian

      2012 年 7 月 17 日 上午 00:31

    2. asdfasdf

      在此期间,这个还不错:https://addons.mozilla.org/en-US/firefox/addon/firebug-autocompleter

      2012 年 7 月 19 日 下午 16:08

  9. Moss

    很棒的新功能!

    2012 年 7 月 14 日 上午 04:42

  10. Mahendra

    很棒的工作
    感谢所有人的付出。

    2012 年 7 月 14 日 上午 05:01

  11. Sebastian

    干得好!
    如今必备的工具。

    感谢所有人的付出。

    2012 年 7 月 14 日 上午 08:06

  12. Webdoc

    Firebug 是网页设计界最棒的工具。感谢所有人的辛勤付出。

    2012 年 7 月 14 日 上午 09:25

  13. Jeff

    !! LIKE !!

    2012 年 7 月 14 日 上午 11:57

  14. Jakub Vrána

    感谢这次重大更新。

    为什么脚本面板中也不使用语法高亮?我使用过 FireRainbow,但它会导致崩溃,因此我不得不禁用它。

    2012 年 7 月 14 日 上午 12:16

    1. Jan Odvarko

      脚本面板的语法高亮已在计划中。

      2012 年 7 月 14 日 下午 23:52

  15. Vincent F.

    感谢各位的辛勤付出!
    继续努力。Firebug 是必不可少的!

    2012 年 7 月 14 日 下午 13:55

  16. Mike

    太棒了 - 一直在期待这次更新!

    2012 年 7 月 14 日 下午 14:28

  17. Stuart Guthrie

    Firebug 团队干得好。它是一款很棒的应用程序,非常有用。如果您参加 Linux.conf.au,请留意我,我会请大家吃披萨或喝啤酒!

    2012 年 7 月 14 日 下午 17:35

  18. ken

    感谢你们的付出。它棒极了。有没有办法默认情况下不延迟打开 Firebug?这个新功能拖慢了我的开发/测试周期。

    2012 年 7 月 14 日 下午 19:15

    1. Jan Odvarko

      将以下首选项设置为 false:extensions.firebug.delayLoad
      (在 about:config 中)

      Honza

      2012 年 7 月 16 日 上午 01:19

      1. Ken

        谢谢。这有效,是一个很好的开发设置。

        2012 年 7 月 24 日 上午 07:09

  19. Adrian

    Firebug 1.10 继续努力,这款产品很棒

    2012 年 7 月 15 日 下午 23:49

  20. pd

    太棒了,尤其是考虑到 Mozilla 重新造轮子的愚蠢决定。或者我们应该说,仅仅为了实现它而将轮子 Mac 化?想象一下,如果 Mozilla 有明智的领导,能取得多大的成就!我猜想有一些交叉授粉,比如新的共享 JS 调试器和检查器引擎(AFAIK?),但实际上,Firebug 已经非常棒了,没有必要使用“原生”的开发者工具,尤其是 Hueyfix 对 Firebug 性能的巨大提升。

    让我们默认将 Firebug 与 Firefox 打包在一起,停止将资源分散到两个不同的开发者工具团队。这太荒谬了!

    2012 年 7 月 16 日 02:09

  21. spsoft

    我发现 Firebug 1.10 中有一个严重的错误,当在 IFRAME 中编辑表格页面时,编辑表格页面后,刷新 IFRAME 页面并继续编辑表格页面,新效果页面会发生变化,但是 Firebug 1.10 显示的效果没有改变。

    例如,代码在页面上显示为 153.191,但在 Firebug 1.10 中显示为 153.19,而我使用 Firebug 1.9.2 没有问题。为什么呢?

    2012 年 7 月 16 日 07:38

    1. Jan Odvarko

      请在此处创建问题报告:http://code.google.com/p/fbug/issues/list,这样就不会在评论中丢失了。

      谢谢!
      Honza

      2012 年 7 月 16 日 08:04

  22. John Doe

    Cookie 管理和语法高亮 FTW。很棒的工作!

    2012 年 7 月 17 日 03:31

  23. njspsoft

    第 5705 号问题,请查看原因。

    2012 年 7 月 17 日 08:59

  24. cancel bubble

    非常感谢你们出色的工作,但是,我有一点小抱怨。

    用于自动完成的灰色太浅了,从正常的观看距离,我几乎看不到它。

    2012 年 7 月 17 日 10:09

    1. Jan Odvarko

      请创建问题报告,这样它就不会在这里被遗忘。
      http://code.google.com/p/fbug/issues/list
      Honza

      2012 年 7 月 18 日 04:16

  25. agadir

    这是我第一次使用 Firebug,也是我第一次明白我浪费了多少时间在其他插件上 – 感谢 Firebug 团队,我爱你们。

    2012 年 7 月 18 日 03:47

  26. Jared

    公告中说新版本的 Firebug 只能在 FF 13 及其更新版本上使用。这似乎意味着它不能在当前的 Firefox ESR 版本 (FF 10) 中使用。有可能吗?这似乎是一个很大的疏忽。

    2012 年 7 月 18 日 11:19

    1. Janet Swisher

      ESR 只能获得安全和稳定性更新,没有新功能。这是 ESR 的权衡取舍。当前 ESR 更新的发布说明位于 https://www.mozilla.org/en-US/firefox/10.0.6/releasenotes/。我假设 Firebug 1.10 需要 Firefox 13,因为它依赖于 Firefox 13 中的特定新功能,而 ESR 10 没有这些功能。您可以使用 ESR 10 和 Firebug 1.9。

      2012 年 7 月 18 日 12:26

      1. Jan Odvarko

        感谢您的解释,完全正确。
        Honza

        2012 年 7 月 19 日 03:58

  27. Dot

    有没有办法关闭语法高亮?(或者至少一部分。)在 FB 中开发时,括号对周围的方框非常引人注目,啊啊!

    2012 年 7 月 18 日 13:15

    1. Jan Honza Odvarko

      是的,将“extensions.firebug.enableOrion”首选项(在 about:config 中)设置为 false。
      Honza

      2012 年 7 月 19 日 04:03

  28. njspsoft

    5705 问题还没有解决?我已经更新了 Firefox 版本 14,但是右键单击框架(#workflow)并从上下文菜单中选择“此框架 > 重新加载框架”。
    问题仍然存在。

    2012 年 7 月 20 日 23:32

    1. Sebastian Z.

      请将您关于 http://code.google.com/p/fbug/issues/detail?id=5705 的评论发布到该问题中。不需要也在这里发布。

      Sebastian

      2012 年 7 月 24 日 22:07

  29. Paul Lowther

    一系列很棒的更新,尤其是跟踪样式。

    2012 年 7 月 24 日 06:53

  30. Just some dude

    WebKit 的开发者工具确实令人尊敬,但它们仍然无法与 Firebug 相提并论,随着这些新功能的推出,WebKit 有更多需要追赶的地方。只需要说服我的同事相信这一点 :-)。感谢您让我的工作变得如此轻松!

    2012 年 7 月 31 日 15:51

  31. Mahesh

    很棒的新功能……你们真棒!!!
    谢谢。

    2012 年 8 月 1 日 19:34

  32. Satej

    感谢你们的改变,请继续你们出色的工作 :)

    2012 年 8 月 1 日 21:49

  33. Ian

    自从强制更新到 firebug 1.10 后……我无法设置断点!?所有 JavaScript 代码行都变灰,断点“未定义”,显示“超出范围”,WTH,?? 我无法进行任何工作。

    2012 年 8 月 3 日 14:35

    1. Jan Honza Odvarko

      请在此处创建错误报告 http://code.google.com/p/fbug/issues/list 以及详细的说明如何重现问题,我们将修复它,谢谢!
      Honza

      2012 年 8 月 4 日 02:58

      1. Ian

        已提交第 5790 号问题,如果需要我提供其他任何信息,请告诉我。

        2012 年 8 月 6 日 09:16

    2. Ken Amron

      Ian,

      我遇到过类似的情况,可能与你描述的情况有相同的根本原因。我还没有能够提供可重现的测试用例。但是我已经能够解决我遇到的问题,如下所述 ==> https://sites.google.com/a/digital-parts.com/firbugstu/

      Ken

      2012 年 8 月 5 日 04:29

    3. Sebastian Z.

      nonneophyte 在 https://groups.google.com/forum/#!topic/firebug/qLgaqVTA0Po 中发布了后续内容。

      Sebastian

      2012 年 8 月 5 日 08:06

  34. Tlacaelel

    感谢你们的出色工作,这个扩展对我帮助很大。

    我注意到,当我长时间运行 Firefox 和 Firebug 时,浏览器在刷新页面时会变慢,如果我禁用 Firebug 并刷新页面,一切都会按预期工作,这是正常的吗?我还注意到,使用 Firebug 时,内存消耗很大。

    2012 年 8 月 6 日 15:43

    1. Jan Honza Odvarko

      尝试使用 Firefox 15(当前为 beta 版)运行 Firebug,并告诉我们内存问题是否仍然存在。

      2012 年 8 月 6 日 22:39

      1. Tlacaelel

        我刚刚注意到这可能与我的电脑有关,我想是我安装驱动程序时,Nvidia 安装了一个名为 3D Vision 的插件,而且还有 3 个来自 MS Office 的插件。

        每当我用 Firebug 运行 Firefox 时,我的电脑风扇就会不停地运行,但是通过禁用这些插件(Nvidia 和 MS Office 的插件),风扇立即停止,并且似乎没有内存泄漏了。

        我将重新启用 MS Office 并测试是否确实是这个问题,然后测试 Nvidia 并告诉你们结果!

        仅供参考,这只会发生在 Firefox 运行且 Firebug 面板已启用时,尽管禁用这些插件似乎解决了问题。

        2012 年 8 月 7 日 08:48

  35. elparole

    嗨,我已经使用 Firebug 好几年了,非常感谢你们的辛勤工作。今天,突然之间,实时预览当前网络请求的功能消失了。只有当我切换到另一个选项卡然后再回到网络选项卡时,才能看到新的请求。这是功能吗?在哪里可以重新打开它?

    2012 年 8 月 21 日 06:46

    1. Jan Honza Odvarko

      试试 https://getfirebug.com/releases/firebug/1.11/firebug-1.11.0a1.xpi
      并告诉我们问题是否仍然存在。

      Honza

      2012 年 8 月 21 日 06:53

      1. elparole

        现在工作正常了。
        谢谢!

        2012 年 8 月 21 日 07:25

  36. Hossein Zolfi

    伟大的作品,
    谢谢

    2012 年 8 月 22 日 13:36

  37. Ngo Huynh

    嗨,
    我不知道我的 Firefox 15.x 浏览器中的 Firebug 扩展是否有错误。我无法正常使用它。我必须禁用它然后再启用它才能使用。
    但是当我更新到 Firefox 16.x 后,它就可以正常工作了。
    很奇怪。
    :)

    2012 年 11 月 7 日 04:47

    1. Jan Odvarko

      如果你升级到 Firebug 1.10.6 后,这种情况还会发生吗?
      Honza

      2012 年 11 月 7 日 06:27

      1. Ngo Huynh

        尊敬的 Jan,

        使用 Firefox 16.0.2 和新的 Firebug 1.10.6 后,问题不再出现。

        顺便说一下,我必须对 Firebug 开发团队说声谢谢,感谢你们开发了这个非常有用的插件。Firebug 是像我这样的 Web 开发人员必不可少的工具。

        非常感谢 :)

        2012 年 11 月 7 日 06:59

本文的评论已关闭。