時計坂一刻館三号室

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

作者：屈超（Chappell.Wat） 发布时间：January 21, 2010 分类：程式::五代

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

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

请打开淘宝网首页，
用 Firebug 查看“公告栏”区域的圆角区域（如下图），

圆角的右上部分是用一个无子节点的 SPAN 标签实现的（如下图）：

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

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

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

在一个结构复杂的页面下，
这个问题将可能花掉工程师大量的时间来排查。
而现在，
这个问题已经得到解决，
你甚至可以用节省下来的时间跑到楼下电线杆旁大呼“信春哥，无 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 显示与之前所述问题相同结构的源码将如下图：

而实时修改源码时问题也被解决（如下图）：

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

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

• 适用于 Firefox 1.5 - 3.0.* 的 Firebug 1.2 系列修改版下载；
• 适用于 Firefox 3.0 - 3.0.* 的 Firebug 1.3 系列修改版下载；
• 适用于 Firefox 3.0 - 3.5.* 的 Firebug 1.4 系列修改版下载；
• 适用于 Firefox 3.0 - 3.6.* 的 Firebug 1.5 系列修改版下载。

标签: Mozilla, Firefox, Firebug