在小熊猫 Firefox 中，我提到了 Firefox 查看源代码功能。

Firefox 查看源码最简单的办法就是右键点击“查看页面源代码（View Page Source）”，你还可以使用快捷键 Ctrl+u 以快速查看。

特色功能

相比较其他浏览器，Firefox 查看源码功能有过而无不及，特色功能主要有以下两个。

1、查看页面源代码时，Firefox 会在 HTML 语法错误的地方以显眼的红色标记。

源代码红色标记错误 源代码红色标记错误

2、选中网页的部分元素，右键可查看选中部分的源代码（View Selection Source）。

右键查看选中部分源代码 右键查看选中部分源代码

在此需要提醒的是，查看选中部分源码时，显示的是浏览器解析页面完毕后的代码，包括通过 JavaScript 进行加载的一些元素，也就是说和“查看元素（Shift+Ctrl+i）”显示的代码是一样的。

新标签页查看源码

Firefox 最新版本已有变化 ，查看源码、选中源码均为新标签页打开。

Chrome 等浏览器查看源代码是在新的标签页中显示的（如图），实践发现 Firefox 也是通过 view-source:+URL 这个地址即可查看源代码。

Chrome 新标签页显示源代码 Chrome 新标签页显示源代码

可是 Firefox 默认弹出一个窗口显示，这个窗口甚至可以替换成第三方编辑器，这种体验鄙人感觉不如 Chrome，不过强大的 Firefox 肯定也是能实现一样的功能，随便一搜就有第三方扩展支持，比如 Source Viewer Tab。

为实现一个简单的功能去安装一个扩展诚然有些不值，还是另寻它径吧，书签支持 JavaScript，那么可以获取当前页面的地址，采用 window.open() 方法即可实现新标签页打开。

javascript:window.open("view-source:"+top.location);

若是 Chrome 这样即可，但 Firefox 还需在后面加上 void(0)，否则当前页面将被重定向。

javascript:window.open("view-source:"+top.location);void(0);

或是

javascript:void(window.open("view-source:"+top.location));

鄙人用 Pentadactyl，习惯了快捷键操作，那么如何配置 Pentadactyl 使 FF 可快捷键新标签页显示源码呢？一样可通过 JavaScript 获取当前页面网址。在 _pentadactylrc （非 Windows 则是 .pentadactylrc） 中添加如下。

com! view-source exe "t view-source:" + top.content.location;
map vs :view-source<Return>

别问我为什么要加 content，Firefox 扩展们需要这么干。:rehash 之后，v s 便是新标签查看源码的快捷键。

另外，Pentadactyl 自身也提供一个命令 :viewsource 可当前页面查看源码，:dia[log] selectionsource 则是查看选中部分源码，不妨也给其绑定一快捷键 s s。

map ss :dia selectionsource<Return>

源码页面字体？

在此，也扯一下 Firefox 查看源码页面的字体。相比其他浏览器，Firefox 源码页面更加良心，各部分都精心设计，例如元素名被加粗亮色显示。可是，同是使用新宋体，为何显示效果感觉比 Chrome 丑？

利用“查看元素”得知，样式是 viewsource.css 文件定义的，不过鄙人找不到这个文件。

viewsource.css viewsource.css

事实上这个页面的字体定义继承于等宽字体，即在选项-内容-字体和颜色-高级里面设置。

设置等宽字体 设置等宽字体

如果你觉得这样改还不过瘾，可以直接跑 about:config 里面更改 font.name.monospace.zh-CN 选项（中文版本），就可以 CSS 一样的指定字体优先级（说白了就是指定中英文字体），例如 Consolas, Microsoft Yahei，字体大小则可更改 font.size.fixed.zh-CN 选项。

参考资料

本文历史

  • 2015 年 05 月 27 日 完成初稿
  • 2015 年 09 月 05 日 更新，新版本变化