在移动端轻松查看网页源代码:View Source 2.0
如果你是一名站长或 Web 开发者,在浏览器中查看网页源代码(HTML、CSS 与 JavaScript)是每天必不可少的操作,这个在桌面端轻而易举的操作到了移动端却变成了一件麻烦事。如今有了 View Source 对 iOS 8 Extensions 的巧妙利用,在移动端对网页源代码进行浏览与操作将变得很轻松。
安装 View Source 后,通过 Safari 分享按钮打开 View Source 开关,这样就可以显示当前网页源代码,如果你不想这么做,也可以把 View Source 作为一个独立应用去打开想要查看的网站源码,当然,在这种情况下,View Source 不会显示网页内容,而是直接显示页面源代码。
这里可以看见关于少数派网页的源代码,例如通常的 SEO 人员会去为网页定义 Title 以及 Meta 标签的 Keywords,以保持搜索引擎对于网站更好的抓取。
View Source 中通过 DOM 节点树可以很直观的看到当前网页的结构,用来查找和访问节点变得很容易。另外很酷的一点是 View Source 还可以通过 inject JS 来编写自定义 JS 代码,退出插件时会在 Web 页面显示输出的 JS 效果。例如在少数派页面下 Script 中输入:
退出插件就可以在 Safari 中显示关于少数派网站 Title 标签的 alert 弹窗,效果如图。
当然,如果你想在弹窗中显示一句话的话,可以在 Script 中输入:
当然,这些只是普通的 JavaScript alert 代码,如果你有更有趣的玩法或者更实用的功能,也可以在评论中告诉我。
通过右上角更多的选项可以调用更多的功能,例如将代码复制至剪切板在其他应用上继续编辑,也可以发送邮件、选择高亮与更多主题,这里不妨多说一下,View Source 提供了很多高亮的主题以供选择,笔者个人比较倾向于 Blue Screen 这个主题。
View Source 目前可以从 App Store 下载,售价 6 元。
网络解密:怎么查看一个网页的源代码?
源代码一般情况下分为两种,一种是程序功能页的源文件或叫源代码,可以修改网页功能及显示效果,往往由技术人员自己掌握。另一种则是由系统编译之后生成的HTML源代码,这些源代码一般是给浏览器看的,通过HTML超文本编辑语言设计网页的色彩、布局、宽高、样式、动态效果等内容。在建设网站的过程中也可以用来调试页面显示异常及问题分析。
一般上网者看到的网页都包含有HTML源代码吗,这些代码告诉浏览器应该以哪种方式展现网页内容,可以理解为机器代码,是开发者与浏览器达成共识的呈现,并非用于普通浏览者识别。那么如果想要查看网页源代码应该如何操作呢?第一种方法:在当前网页点右键“查看网页源代码”:
第二种方法:如果点右键没有如上菜单,可以直接使用快捷键“ALT+V+C”,也可以在弹出的菜单里找到“查看网页源文件”选项。一般出现在当前网页的右上角。
以上二种方法是常用的查看网页源代码的方法,一般是为了便于分析HTML代码,技术人员专用。普通浏览者看到的则是一堆代码,除了汉字完全就看不明白是什么。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。