很多人觉得浏览器没有什么技巧,不就是个上网的工具嘛。但事实不是这样,拿用电脑来说,会开关机,上网,玩游戏是第一层;懂得各种技巧,熟悉各种操作是第二层,理解操作系统原理和硬件运行机制,进而运用原理更好的使用电脑是第三层……我今天要谈的就是对浏览器的第三层应用。当然,上面还有很多层:)
其实这篇文章的重点不在技巧,而是对网页和浏览器原理的实践。这些技巧都是建立在对这些原理的理解上。文章分三部分。分别是对构成网页文件的介绍、在浏览器中访问这些文件的方法、技巧示例。同时,这篇文章也形成了一个完整的学习过程。也就是:理解基础知识——尝试和实践——探索和应用。
提前剧透一下这篇文章能教会你什么:
- 不使用客户端在大多数音乐网站上下载音乐(比如豆瓣电台,百度音乐盒,酷我等等)
- 破除网络课离开页面自动暂停视频的限制
- 破除网页弹窗强制登记手机号的限制
- 破除网页的文本复制和图片保存限制
- 修改网页内容
事实上,知道了原理,你能做的事情远不止这些。
一、网页
假设你有一台电脑,安装了某个浏览器。你打开浏览器,在地址栏里输入了google.com,按下Enter,显示访问不了。好吧,这不好笑。换个例子,你又重新输了个网址:withlihui.com,也就是我的博客。按下Enter后屏幕上显示出了我的博客的主页。这中间发生了什么?(域名服务器之类的内容就先跳过,跟这篇文章没有太大关系,有机会再写一篇介绍一下。)
总的来说,你输入的地址其实可以看作是一个文件地址(脑海中浮现资源管理器地址栏),只是这个文件存放在我租用的服务器上面。你告诉浏览器要访问的文件地址,然后它读取了这些文件并显示出来。
一般的网页是由HTML文件、CSS文件以及JavaScript文件组成的,这三个文件共同合作,分别负责实现网页的基本内容(content)、页面样式(style)、功能效果(function)。按照知乎用户胖胖小的说法,如果把网页看作一个句子的话,HTML是名词,CSS是形容词,JavaScript是动词。好了,知道这么多就可以了,想知道的更深入一点可以去看w3school(中文)或MDN的文档。
二、浏览器
浏览器其实可以看作是一个文件查看器,事实上,它确实也可以读取本地文件,支持mp3,mp4,txt,pdf等文件。只不过一般用它来它读取构成网页的文件(HTML、CSS、JavaScript等),你在地址栏输入了一个文件地址(网站地址),浏览器找到那个地址上的HTML文件,然后读取相应的CSS和JavaScript文件,把网页显示出来。更重要的是,你还可以通过浏览器查看这些文件,也就是源代码。我下面讲到的技巧都是基于这一点上的。
本文以Chrome为例,其他浏览器方法大致相同。在浏览器界面按下F12,或是右键点击检查( Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)),这时就会打开开发者工具(DevTools),如下图所示:
Chrome开发者工具(devtool)
几个下面示例会用到的标签含义:
Elements:HTML代码(上半部分)和CSS代码(下面的Styles)
Resources:网页文件所用到的资源,包括文件、数据库等。
Network:网页的加载情况,包括加载网页的各项请求和下载的资源,以及相应的时间。
标签左边的两个图标:
箭头:按下这个图标后,再在网页上点击一个元素,会查询到相应的HTML代码。(上图红色圈出)
移动设备:按下这个图标进入移动设备显示模式。
三、技巧示例
保存图片
大多数时候下,我们使用右键另存为来保存图片。可是有的时候,网站为了保护版权或是其他原因而“遮蔽”了这个功能,比如500px上的照片。
500px上的图片
这时我们可以在开发者工具里用小箭头选择这个图片,找到相应的代码位置,在图片代码上点右键选择“Open link in new tab”,然后就可以下载了。
图片对应的html代码
另外,在Resources的Images项里,还可以找到网页上加载的所有图片(大部分不是全尺寸原图)。
网站用到的所有图片
去除文字复制限制
有些网站限制了右键和选择文字的功能,这主要是通过JS代码来实现的。使用开发者工具,可以很容易的破除这种限制。比如在这个网页上,相关的功能都被屏蔽了。打开开发者工具,选择下方Styles标签旁边的Event listener。可以看到下面有很多被监听的事件,其中contentmenu代表右键菜单,selectstart代表选择文字。
event listener
把这两个事件下面的document去掉(点击remove),这时页面就恢复正常了。
保存网页为pdf
有时候我们想把网页存成pdf打印,但电脑又没有连接打印机,刚好也没有安装相应的插件,这时开发者工具就派上用场了。
打印我的博客主页示例
在想打印的页面按下Crtl+P,在预览页面上右键打开检查,找到图中的src属性,复制src的值(比如图中的chrome://print/4/0/print.pdf),然后粘贴在地址栏里打开就可以下载了。
保存音频
有时我们想下载某个音频,网站却没有提供下载选项,除了下载插件,也可以使用开发者工具来完成。在播放音乐之前,打开开发者工具中的Network标签,然后刷新一下页面(F5),开始播放音乐,这时可以看到加载的资源里有一条时间线很长的记录,那个一般就是你要找的音频文件。照旧,在那条记录上点击右键,选择“Open link in new tab”,会开始自动下载和播放。
下载豆瓣FM音乐
对有些使用特殊方法来引用资源的网站无效,目前测试成功的有豆瓣FM、百度音乐、酷我音乐、谷歌翻译录音。
修改网页信息
我们可以在本地修改网页上的信息。打开开发者工具,使用查询箭头点击页面上你要修改的字段,比如说百度首页的“百度一下”,定位到右边HTML代码中相应的位置。
修改百度首页的字段
双击“百度一下”字段,修改它,然后按下Enter键,就变成了下面这样:
修改后
再比如,定位到搜索框上面的图片,然后修改图片的src属性,将后面的值修改成google首页的图片地址(如果想要修改为本地图片的话,可以把网页下载下来,不细说了)。按下Enter就成这样了。
当然,除了和别人开玩笑外太大用处。一刷新就没了。
破除网络课离开页面暂停视频限制
一定有人很期待这个功能吧。如果课很好还是认真听一听(比如周海宏的音乐鉴赏)比较好,很烂的话就往下看吧。方法同样很简单,打开开发者工具后,依然是通过小箭头选择工具选择视频元素,定位到代码。然后清除id的内容,再按下回车就成功了。
双击红圈中的id值,删除后回车
原理就是,通过清除id,切断了页面元素(视频)和控制它的代码的联系(JavaScript),具体下一小节。另外要说明一下的是,刷新后网页代码会还原,所以需要再重新清除一下。
去除叠加窗口
这条还是很有用的,有了前面的基础知识,我们已经知道了网页的基本构成,也学会了如何查看网页的源代码。那么有一天我们想在某网站上下载一个文件,越过层层的障碍,注册了账户,添加了各种信息,结果回到下载页面又让我注册手机号……而且还没有关闭窗口的按钮,太流氓了。不仅如此,还定期显示这个窗口。
某网站上跳出的窗口
我是不会让流氓得逞的。定位到相应的HTML源代码,这些窗口在HTML是一个块(div),通过相应的class或id连接到对应的JS和CSS代码,我用小箭头工具选择填手机号的小窗口,然后发现整个窗口对应(最外层)的class是PhoneCertificationModal,清除掉,按下enter就会发现窗口不见了(如果无效可以再把id的值也清除掉)。
去除窗口
其实窗口并没有去除,只是因为没有了JS和CSS代码的支持,它就失去了页面效果,变成一堆字扭在一起,跑到页脚去了。
失去了css和js支持的孤单的html代码
可是网页这时是一片灰色,遮住了想要点击的内容。这时再用同样的办法,点击小箭头选择这个叠加的窗口,把相应的class清除清空。这时页面就恢复正常了。
和上面的更改网页信息一样,修改了之后只要点击刷新,网页就会恢复到原来的状态,所以不要害怕会玩坏:)
去除WordPress插件限制
比如说显示文章概要的插件会限制你readmore字段的字号,假如你想要设置的话就得花钱升级。这时可以在字段里插入HTML代码,自己设置字号大小。
去除文章概要插件的字号限制
很多论坛的评论就支持少量HTML代码,再早一些,有些网站没有限制评论支持的HTML代码,导致很多搞笑的事情出现,比如说占满整个屏幕的大字……
后记
以上这些内容建立在我现有的知识水平上,所以讲得还不够完善,欢迎指正。希望这篇文章能给感兴趣的人作一把小小的梯子(如果帮到了你,请告诉我)。你可以从下面的链接开始新的学习路程。
进阶
这些地方会给你提供更多帮助:
Chrome DevTools 文档【https://developers.google.com/web/tools/chrome-devtools/】
MDN(Mozilla 开发者网络)【https://developer.mozilla.org/zh-CN/】w3school【http://www.w3school.com.cn/index.html】