浏览器使用技巧

很多人觉得浏览器没有什么技巧,不就是个上网的工具嘛。但事实不是这样,拿用电脑来说,会开关机,上网,玩游戏是第一层;懂得各种技巧,熟悉各种操作是第二层,理解操作系统原理和硬件运行机制,进而运用原理更好的使用电脑是第三层……我今天要谈的就是对浏览器的第三层应用。当然,上面还有很多层:)

其实这篇文章的重点不在技巧,而是对网页和浏览器原理的实践。这些技巧都是建立在对这些原理的理解上。文章分三部分。分别是对构成网页文件的介绍、在浏览器中访问这些文件的方法、技巧示例。同时,这篇文章也形成了一个完整的学习过程。也就是:理解基础知识——尝试和实践——探索和应用

提前剧透一下这篇文章能教会你什么

  • 不使用客户端在大多数音乐网站上下载音乐(比如豆瓣电台,百度音乐盒,酷我等等)
  • 破除网络课离开页面自动暂停视频的限制
  • 破除网页弹窗强制登记手机号的限制
  • 破除网页的文本复制和图片保存限制
  • 修改网页内容

事实上,知道了原理,你能做的事情远不止这些。

 

一、网页

假设你有一台电脑,安装了某个浏览器。你打开浏览器,在地址栏里输入了google.com,按下Enter,显示访问不了。好吧,这不好笑。换个例子,你又重新输了个网址:withlihui.com,也就是我的博客。按下Enter后屏幕上显示出了我的博客的主页。这中间发生了什么?(域名服务器之类的内容就先跳过,跟这篇文章没有太大关系,有机会再写一篇介绍一下。)

总的来说,你输入的地址其实可以看作是一个文件地址(脑海中浮现资源管理器地址栏),只是这个文件存放在我租用的服务器上面。你告诉浏览器要访问的文件地址,然后它读取了这些文件并显示出来。

一般的网页是由HTML文件、CSS文件以及JavaScript文件组成的,这三个文件共同合作,分别负责实现网页的基本内容(content)、页面样式(style)、功能效果(function。按照知乎用户胖胖小的说法,如果把网页看作一个句子的话,HTML是名词,CSS是形容词,JavaScript是动词。好了,知道这么多就可以了,想知道的更深入一点可以去看w3school中文)或MDN的文档。

 

二、浏览器

浏览器其实可以看作是一个文件查看器,事实上,它确实也可以读取本地文件,支持mp3mp4txtpdf等文件。只不过一般用它来它读取构成网页的文件(HTMLCSSJavaScript等),你在地址栏输入了一个文件地址(网站地址),浏览器找到那个地址上的HTML文件,然后读取相应的CSSJavaScript文件,把网页显示出来。更重要的是,你还可以通过浏览器查看这些文件,也就是源代码。我下面讲到的技巧都是基于这一点上的。

本文以Chrome为例,其他浏览器方法大致相同。在浏览器界面按下F12,或是右键点击检查( Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)),这时就会打开开发者工具(DevTools),如下图所示:

devtool

Chrome开发者工具(devtool)

几个下面示例会用到的标签含义:
ElementsHTML代码(上半部分)和CSS代码(下面的Styles
Resources:网页文件所用到的资源,包括文件、数据库等。
Network:网页的加载情况,包括加载网页的各项请求和下载的资源,以及相应的时间。

标签左边的两个图标:
箭头:按下这个图标后,再在网页上点击一个元素,会查询到相应的HTML代码。(上图红色圈出)
移动设备:按下这个图标进入移动设备显示模式。

 

三、技巧示例

保存图片

大多数时候下,我们使用右键另存为来保存图片。可是有的时候,网站为了保护版权或是其他原因而“遮蔽”了这个功能,比如500px上的照片。

500px

500px上的图片

这时我们可以在开发者工具里用小箭头选择这个图片,找到相应的代码位置,在图片代码上点右键选择“Open link in new tab”,然后就可以下载了。

 

pic code

图片对应的html代码

另外,在ResourcesImages项里,还可以找到网页上加载的所有图片(大部分不是全尺寸原图)。

所有图片

网站用到的所有图片

去除文字复制限制

有些网站限制了右键和选择文字的功能,这主要是通过JS代码来实现的。使用开发者工具,可以很容易的破除这种限制。比如在这个网页上,相关的功能都被屏蔽了。打开开发者工具,选择下方Styles标签旁边的Event listener。可以看到下面有很多被监听的事件,其中contentmenu代表右键菜单,selectstart代表选择文字。

event listener

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就成这样了。

效果2

当然,除了和别人开玩笑外太大用处。一刷新就没了。

 

破除网络课离开页面暂停视频限制

一定有人很期待这个功能吧。如果课很好还是认真听一听(比如周海宏的音乐鉴赏)比较好,很烂的话就往下看吧。方法同样很简单,打开开发者工具后,依然是通过小箭头选择工具选择视频元素,定位到代码。然后清除id的内容,再按下回车就成功了。

video example

双击红圈中的id值,删除后回车

原理就是,通过清除id,切断了页面元素(视频)和控制它的代码的联系(JavaScript),具体下一小节。另外要说明一下的是,刷新后网页代码会还原,所以需要再重新清除一下

 

去除叠加窗口

这条还是很有用的,有了前面的基础知识,我们已经知道了网页的基本构成,也学会了如何查看网页的源代码。那么有一天我们想在某网站上下载一个文件,越过层层的障碍,注册了账户,添加了各种信息,结果回到下载页面又让我注册手机号……而且还没有关闭窗口的按钮,太流氓了。不仅如此,还定期显示这个窗口。

窗口示例

某网站上跳出的窗口

我是不会让流氓得逞的。定位到相应的HTML源代码,这些窗口在HTML是一个块(div),通过相应的classid连接到对应的JSCSS代码,我用小箭头工具选择填手机号的小窗口,然后发现整个窗口对应(最外层)的class是PhoneCertificationModal,清除掉,按下enter就会发现窗口不见了(如果无效可以再把id的值也清除掉)。

去掉窗口

去除窗口

其实窗口并没有去除,只是因为没有了JSCSS代码的支持,它就失去了页面效果,变成一堆字扭在一起,跑到页脚去了。

去除样式的效果

失去了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

 

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*

*