【最近更新】

同步更新至 1.3.2 版,
并增加供 Firefox 3.1+ 使用的1.4.0a12 版本。

如果你看过我的上一篇文章……
应该已经了解我要解决的这个 Bug 究竟是怎么一回事儿……

很不幸 FirefoxFirebug 都有类似 Bug ……
也即在外部编辑器中查看网页 HTML 源码的乱码问题……
该 Bug 在 Firebug 的历代版本中均存在……
除了 Windows 我也在 Mac 版上发现了该 Bug ……

但与 Firefox 本身的问题不同……(见我前一篇文章
Firebug 采取的另外一种方式来处理……
但显然也没能够逃脱产生乱码的“厄运”……

Bug 具体的描述如下……
如果你通过 Firebug 的菜单命令配置过外部编辑器……
(Tools -> Firebug -> Open With Editor -> Configure Editors)
那么配置完毕后将在你的右键上下文菜单中显示 Open With Editor 命令组……(如下图)

Open with editor in Firebug

通过这个命令组……
你可以选择不同的编辑器对当前的网页源码进行查看和编辑……
确实非常便捷……
但是……
当你想用 Firebug 的这一功能查看任何包含有非 ASCII 字符的网页时……
你则可能遇到下面两种问题……

第一种……
当你想要查看任何包含非 ASCII 字符的线上页面源码时……
你可以正常打开它……(因为 Firebug 用 ascii 字符命名 tmp 文件)
但你看到的内容将是存在乱码的……(如下图)

Encoding bugs with viewing online source file in firebug

第二种……
当你把一个文件名中包含非 ASCII 字符的文件拖进 Firefox ……
并想要查看其源码时……
你的编辑器却连文件都无法打开……(如下图)

Bug with viewing local source file in Firebug

研究 Firebug 源码后得知……
对于第一种情况……
是由于 Firebug 没有对 Unicode 的源码进行转码所致……
而第二种情况……
则是因为 Firebug 在向编辑器发送命令行参数时没有对文件名进行转码……
(如果你还想追问我为何 Firebug 的源码面板没有乱码……
我可以顺便告诉你:因为这些流程都在 Firefox 内部……)

知道了造成 Bug 的原因……
我们就可以操刀开始解决了……

对于第一种情况……
只需要将其转为 UTF-8 编码即可……
打开 profile\extensions\firebug@software.joehewitt.com\content\firebug\firebug.js 文件……
搜索:

temporaryFiles.push(file.path);

在其下方添加代码:

// Hacked by Chappell.Wat @ QuChao.com on 2008-10-14 start data = convertFromUnicode('UTF-8', data); // Hacked by Chappell.Wat @ QuChao.com on 2008-10-14 end

对于第二种情况……
则稍微复杂一点……
因为通过命令行发送参数到系统时需要根据系统的 non-unicode 默认编码来转码……
(由于条件所限我这里仅针对 Windows 进行修改)
比如我虽然使用英文系统……
但是为了完美支持中文我将字符集改成了 936 ……
那么我就需要将那个“乱码”文件名转为 GB2312 或 GBK……
其它语言的用户请按情况修改……(如果你看得懂的话)
同样是打开 profile\extensions\firebug@software.joehewitt.com\content\firebug\firebug.js ……
搜索:

args.push(localFile);

在其下方添加代码:

// Hacked by Chappell.Wat @ QuChao.com on 2008-10-14 start if ('WINNT' === getPlatformName()) { localFile = convertFromUnicode('GB2312', localFile); } // Hacked by Chappell.Wat @ QuChao.com on 2008-10-14 end

这样就大功告成了……
自动判断系统 non-unicode 默认编码的方法我已经找到……
有待我测试后更新……
在此之前请各位还是手动修改吧……
@081015 更新:
我今天测试的时候发现……
某些情况下 Firebug 的代码并不能完全处理 UTF8 的 BOM 头……
所以我们再写一段代码来自己清除它……
打开 profile\extensions\firebug@software.joehewitt.com\content\firebug\lib.js ……
搜索:

var segments = [];

在其下方添加代码:

// Hacked by Chappell.Wat @ QuChao.com on 2008-10-15 start var fileLen = stream.available(); if ('UTF-8' === charset && fileLen > 3) { var bom = sis.readBytes(3); if (String.fromCharCode(239, 187, 191) !== bom) { segments.push(bom); } } // Hacked by Chappell.Wat @ QuChao.com on 2008-10-15 end

不过这样做是否会有什么副作用我暂时还不知道……
是否修改就看你个人选择了……

最后……
为懒人们提供修改完成的版本……(v1.2.1)
不堪乱码困扰的你一定要下载……
Bug 我也会提交到Firebug 的官方讨论组……
希望以后不用劳烦我们自己修改就能避开这种恼人的问题……

【更新记录】

[081015]:  提供 1.2.1 版本;
[090219]: 更新至 1.3.2 版,并增加供 Firefox 3.1+ 使用的1.4.0a12 版本;

【下载链接】

Firebug v1.3.2 for Firefox 3.1-:
国外: http://www.quchao.com/projects/mozilla/firefox/extension/firebug-1.3.2-fx_fixed_by_quchao.xpi
国内: http://vip.yyjoy.com/chappell/mozilla/firefox/extension/firebug-1.3.2-fx_fixed_by_quchao.xpi

Firebug v1.4.0a12 for Firefox 3.1+:
国外: http://www.quchao.com/projects/mozilla/firefox/extension/firebug-1.4.0a12_fixed_by_quchao.xpi
国内: http://vip.yyjoy.com/chappell/mozilla/firefox/extension/firebug-1.4.0a12_fixed_by_quchao.xpi

标签: none

已有 40 条评论

  1. 一本详尽的前端开发大众手册(包括工具、网址、经验等)

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  2. 前端开发常用工具,手册文档 - 水塔实验室

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  3. 前端开发手册 | XiaoMo

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  4. 前端开发大众手册(包括工具、网址、经验等) « digeek

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  5. » 前端开发大众手册 » UED TEAM

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  6. 前端开发大众手册(包括工具、网址、经验等) - David’s Blog

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  7. 前端工程师工具大全 - 鸟人网 博客

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  8. 前端工程师常用工具 « 伍柒

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  9. 前端工程师常用工具 « 寂静小站 R11; 网摘

    [...]前端工程师常用工具 « 寂静小站 – 网摘寂静小站 – 网摘« 12种不宜使用的Javascript语法前端工程师常用工具本站仅为镜像,若想浏览完整文章或发表评论,请前往原址: http://longstep.cn/?p=217虽然有一段时间不做前端工程师,但还是免不了做前端的思维,碰到了很好的前端实用工具帖还是忍不住转了过来。这个帖子被转了好多次[...]

  10. 郑羽的博客 » 前端开发大众手册(包括工具、网址、经验等)

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  11. CV一篇前端资源文章 | UECSS.COM

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  12. 行骏-IT Player » Blog Archive » 前端开发大众手册(包括工具、网址、经验等)

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  13. 前端开发大众手册(包括工具、网址、经验等) » IDEA365'BLOG

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  14. 零度设计-专注前端技术开发、SEO » 前端开发大众手册

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  15. » 前端开发大众手册前端开发之家

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  16. 我想网 » Blog Archive » 前端开发大众手册(包括工具、网址、经验等)

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  17. 我的奋斗 » Blog Archive » 前端开发大众手册【收藏】

    [...]Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版[...]

  18. 大仙的笔记 » Blog Archive » 前端开发大众手册(包括工具、网址、经验等)

    [...] Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版 [...]

  19. 陈成的博客 — 前端开发大众手册(包括工具、网址、经验等)

    [...] Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版 [...]

  20. 時計坂一刻館三号室 » 部落格存档 » [081011] View Source in External Editor Bugfixer 0.9b ……

    [...] [080725] SingletonFox 1.2 -Firefox Extension-单实例运行 [081015] 为 Firebug 修复外部编辑器的乱码 Bug…… [...]

添加新评论