【2010.01.21 更新】
前天发布的 Firebug 1.5 已经修复了这个 Bug。
本文将停止更新。
(实际上自发布后也没更新过 =_,=)

【2009.07.06 发布】
题目很拗口,
事实上想用一句话清楚地描述这个问题并不容易,
那么还是看图说话吧:

请打开淘宝网首页,
Firebug 查看“公告栏”区域的圆角区域(如下图),

淘宝网“公告栏”圆角

圆角的右上部分是用一个无子节点的 SPAN 标签实现的(如下图):

a blank non-self-closing tag issue of firebug - source viewing

那么问题出现了:
由于它是无子节点的,
因此它被 Firebug “误认为”是一个自闭合标签。

a blank non-self-closing tag issue of firebug - source editing

在实时编辑代码时问题亦然(如上图)。
而事实上 Firebug 遵循的 XML 标准,
这样处理是完全没有问题的。

无子节点的 SPAN 标签是否存在“语义问题”将不是本次讨论的重点,
毕竟我们还处于比较落后的兼容时代,
平时难免会遇到类似的麻烦。
特别是前端工程师将 Demo 页面完成交付开发工程师来拼装模板时,
如果开发工程师使用 Firebug 来复制代码,
那么在 IE 下将由于“SPAN 标签未被闭合”而发生错位(如下图):

blank non-self-closing tag issue on ie

在一个结构复杂的页面下,
这个问题将可能花掉工程师大量的时间来排查。
而现在,
这个问题已经得到解决,
你甚至可以用节省下来的时间跑到楼下电线杆旁大呼“信春哥,无 Bug ”。
我抽空研究并修改了 Firebug 的源码,
使得 Firebug 对无子节点的非标准自闭合标签一律按正常显示。
经过整理的标准自闭合标签如下:
area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param 和 embed 。
(来自 HedgerWow's Found a new JS pattern from MSDN.
特别感谢 Macji 曾抽空帮我整理这份列表。

修改后的 Firebug 显示与之前所述问题相同结构的源码将如下图:

a blank non-self-closing tag issue of firebug - source viewing patched

而实时修改源码时问题也被解决(如下图):

a blank non-self-closing tag issue of firebug - source editing patched

我并不认为这是 Firebug 的问题,
所以这次的修改不会被提交到官方;
而至于为何采取直接修改源码的方式,
我想说我也曾尝试编写 Firebug 用的扩展来 hack 相关代码段,
但它的代码实在“太安全”而且所提供的事件和接口有限,
如果要做类似的修改可能要重写太多相关代码,
更何况修改源码的效率是最高的,
特别是对于节点遍历这种操作,
我想或许之后我会写一个可运行的 Patch 给有需要的人;
最后如果你有关注我的 Blog
那么你可能记得我之前也有修正过 Firebug 的一个外部编辑器编码问题
没有将两个修改版合并为一个的原因是:
Firebug 的外部编辑器不仅有编码问题,
而且功能上也并不好用,
在这里我推荐名为 ViewSourceWith 的扩展,
它是我所知道的目前唯一彻底解决 WinXp 及其以下版本非 Unicode 编码问题的该类扩展,
当然,
嫌这个扩展过于庞大的话也可以采用我之前发布的修正方案

太晚了,
直接提供下载,
请选择合适的版本进行安装:

标签: Mozilla, Firefox, Firebug

已有 8 条评论

  1. 丰胸产品 丰胸产品

    看来看去都是高人,我对代码之类的一窍不通,门外汉

  2. Chao QU Chao QU

    @good
    你的意思是把 Firebug 实时修改的效果给保存下来是吧?
    呵呵,暂时没有类似的扩展存在。

  3. good good

    是个问题,不错,要是有个扩展可以在修改本地的文件时直接在firebug中修改代码css之类的,然后可以直接保存到本地的话,这样的话,网页设计就方便了

  4. 俞军就事論事Google Chrome OS,HTML5,Firebug - [米随随] s5s5

    [...]修复 Firebug 对无子节点的非自闭合标签的“识别问题”[...]

  5. Chao QU Chao QU

    @Macji
    自己看。

  6. Macji Macji

    我的是贡献者么....

  7. 墨尔本 墨尔本

    的确阿,这个bug以前都没有怎么留意过~

  8. 宇义 宇义

    很好、很实用。有心了,多谢!

添加新评论