惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - Franky
N
Netflix TechBlog - Medium
Google Online Security Blog
Google Online Security Blog
月光博客
月光博客
量子位
酷 壳 – CoolShell
酷 壳 – CoolShell
V
V2EX
腾讯CDC
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 聂微东
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
M
MIT News - Artificial intelligence
Vercel News
Vercel News
The GitHub Blog
The GitHub Blog
Hugging Face - Blog
Hugging Face - Blog
博客园 - 【当耐特】
Apple Machine Learning Research
Apple Machine Learning Research
aimingoo的专栏
aimingoo的专栏
博客园 - 三生石上(FineUI控件)
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
MongoDB | Blog
MongoDB | Blog
H
Help Net Security
The Cloudflare Blog
Blog — PlanetScale
Blog — PlanetScale
F
Full Disclosure
G
Google Developers Blog
罗磊的独立博客
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Y
Y Combinator Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
J
Java Code Geeks
A
About on SuperTechFans
IT之家
IT之家
大猫的无限游戏
大猫的无限游戏
S
SegmentFault 最新的问题
有赞技术团队
有赞技术团队
GbyAI
GbyAI
雷峰网
雷峰网
T
The Blog of Author Tim Ferriss
The Register - Security
The Register - Security
U
Unit 42
D
Docker
Martin Fowler
Martin Fowler
L
LINUX DO - 热门话题
NISL@THU
NISL@THU
阮一峰的网络日志
阮一峰的网络日志
C
Cybersecurity and Infrastructure Security Agency CISA
博客园_首页
Google DeepMind News
Google DeepMind News

Fooleap's Blog

渴望理想 | Fooleap's Blog 19 年底一些事 | Fooleap's Blog 藉秋风,跑起来 | Fooleap's Blog 一个人去跑步 | Fooleap's Blog 8 月的跑量仿佛是那暑假的作业 | Fooleap's Blog 三伏天跑步那么难受,为何还要跑? | Fooleap's Blog 解决小程序开发“当前系统代理不是安全代理” | Fooleap's Blog 忘却配速的夏日跑步 | Fooleap's Blog 六月天时“带水”跑步更爽 | Fooleap's Blog 出来混迟早要还的 | Fooleap's Blog 跑步不能当饭吃 | Fooleap's Blog 将京东移动端详情页链接转为 PC 端 | Fooleap's Blog 不是热就是雨 | Fooleap's Blog 这半月,我跑了 11 个 520 | Fooleap's Blog 跑完流汗一时爽,一直流汗一直爽 | Fooleap's Blog 初夏夜跑 | Fooleap's Blog Electron 中打开 QQ 临时会话 | Fooleap's Blog 春节期间的培隆角 | Fooleap's Blog 从春天跑到夏天 | Fooleap's Blog 晨雾中奔跑 | Fooleap's Blog 漫步春雨中 | Fooleap's Blog 跑在木棉花下 | Fooleap's Blog 我在春节依然坚持跑步 | Fooleap's Blog 伴随着日出跑步 | Fooleap's Blog 没有最好,只有更好 | Fooleap's Blog 电子气温计 | Fooleap's Blog 渡亭小学的金凤花 | Fooleap's Blog 随心而跑 | Fooleap's Blog 2018 跑步小结 | Fooleap's Blog 在 gVim 中使用“非等宽字体” | Fooleap's Blog 动车进汕,喜大普奔 | Fooleap's Blog 雨战汕马,漫步鮀城 | Fooleap's Blog 准备出发汕马 | Fooleap's Blog 环苏溪跑个半马 | Fooleap's Blog 不义之财 | Fooleap's Blog 跑去培隆看日落 | Fooleap's Blog 雨后跑土路 | Fooleap's Blog 秋意渐浓 | Fooleap's Blog 在夕阳下奔跑 | Fooleap's Blog 准备参加 2018 汕马 | Fooleap's Blog 不可立见的 spoiler 标签 | Fooleap's Blog TomTom Spark 表带 | Fooleap's Blog Disqus 支持新浪微博图床 | Fooleap's Blog 暂存 Disqus 匿名评论者邮箱地址 | Fooleap's Blog 组一台迷你主机 DeskMini 310 | Fooleap's Blog 我的个人信息卖给了谁? | Fooleap's Blog 我发了违法短信? | Fooleap's Blog 使用 Python 合并地图瓦片 | Fooleap's Blog 使用 Python 合并瓦片图 | Fooleap's Blog 拆电热水壶 | Fooleap's Blog 使用树莓派做监控显示 | Fooleap's Blog 南方的冷 | Fooleap's Blog 蓝牙耳机 Avantree Jogger Plus | Fooleap's Blog 新厝布网 | Fooleap's Blog 报装移动宽带 | Fooleap's Blog 双十一战绩 | Fooleap's Blog 郁闷的心情 | Fooleap's Blog 像 Disqus 一样获取链接颜色 | Fooleap's Blog Disqus 的 URL 编码问题 | Fooleap's Blog 选择框的全选联动 | Fooleap's Blog 弹出层中的视频全屏问题 | Fooleap's Blog 2016 年台风海马 | Fooleap's Blog 纯 CSS 实现导航图标动画 | Fooleap's Blog 湾头晨跑路线推荐:南湾小学跑道 | Fooleap's Blog Jekyll 显示每一年的文章数 | Fooleap's Blog 湾头晨跑路线推荐:南湾堤顶 | Fooleap's Blog Disqus 的 @ 提及功能 | Fooleap's Blog 近日渡亭堤顶的夕阳 | Fooleap's Blog 使用 Disqus API 上传图片 | Fooleap's Blog Disqus API 评论嵌套问题 | Fooleap's Blog Disqus API 的权限问题 | Fooleap's Blog 湾头晨跑路线推荐:环三湾 | Fooleap's Blog 如何下载 Apple Emoji 的 PNG 图片 公众号文章二维码 | Fooleap's Blog Disqus 的评论预审核 | Fooleap's Blog 湾头最好的跑道 | Fooleap's Blog 结合七牛和高德地图 API 显示照片位置 | Fooleap's Blog Zip 压缩排除特定目录 | Fooleap's Blog 流水涸摸蚬热 | Fooleap's Blog 2017 跨年跑 | Fooleap's Blog Jekyll 的中文字数统计 | Fooleap's Blog 为 Jekyll 文章页添加相关文章 | Fooleap's Blog 为 Jekyll 添加一个标签页面 | Fooleap's Blog 干了这瓶蛇草水 | Fooleap's Blog 在 macOS 上使用 NTFS 差点丢数据 Disqus Moderator Badge Text 已支持中文 为 Jekyll 添加一个简单的 API | Fooleap's Blog 为 Jekyll 加上简单搜索功能 | Fooleap's Blog 解决 Jemoji 的出错 | Fooleap's Blog 检测网络是否能够访问 Disqus | Fooleap's Blog 解决 This socket is closed 问题 更好的 Markdown 插图方式 | Fooleap's Blog 转换 Nike+ 的坐标数据 | Fooleap's Blog 高德地图 API 显示跑步路线 | Fooleap's Blog 善用 Google 搜索工具 | Fooleap's Blog 利用 Nike+ API 获取跑步路线数据 | Fooleap's Blog 七牛 API 生成页面 URL 二维码 旧年 12 月跑步笔记 | Fooleap's Blog 科学使用 Disqus | Fooleap's Blog 培隆角的日出 | Fooleap's Blog
Firefox 的查看源代码功能 | Fooleap's Blog
fooleap · 2015-05-27 · via Fooleap's Blog

小熊猫 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 日 更新,新版本变化

最近更新

猜你喜欢