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

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

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

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

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

 

一、网页

假设你有一台电脑，安装了某个浏览器。你打开浏览器，在地址栏里输入了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），如下图所示：

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

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

 

三、技巧示例

保存图片

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

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

 

另外，在Resources的Images项里，还可以找到网页上加载的所有图片（大部分不是全尺寸原图）。

去除文字复制限制

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

把这两个事件下面的document去掉（点击remove），这时页面就恢复正常了。

 

保存网页为pdf

有时候我们想把网页存成pdf打印，但电脑又没有连接打印机，刚好也没有安装相应的插件，这时开发者工具就派上用场了。

在想打印的页面按下Crtl+P，在预览页面上右键打开检查，找到图中的src属性，复制src的值（比如图中的chrome://print/4/0/print.pdf），然后粘贴在地址栏里打开就可以下载了。

 

保存音频

有时我们想下载某个音频，网站却没有提供下载选项，除了下载插件，也可以使用开发者工具来完成。在播放音乐之前，打开开发者工具中的Network标签，然后刷新一下页面（F5），开始播放音乐，这时可以看到加载的资源里有一条时间线很长的记录，那个一般就是你要找的音频文件。照旧，在那条记录上点击右键，选择“Open link in new tab”，会开始自动下载和播放。

 

对有些使用特殊方法来引用资源的网站无效，目前测试成功的有豆瓣FM、百度音乐、酷我音乐、谷歌翻译录音。

 

修改网页信息

我们可以在本地修改网页上的信息。打开开发者工具，使用查询箭头点击页面上你要修改的字段，比如说百度首页的“百度一下”，定位到右边HTML代码中相应的位置。

双击“百度一下”字段，修改它，然后按下Enter键，就变成了下面这样：

再比如，定位到搜索框上面的图片，然后修改图片的src属性，将后面的值修改成google首页的图片地址（如果想要修改为本地图片的话，可以把网页下载下来，不细说了）。按下Enter就成这样了。

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

 

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

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

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

 

去除叠加窗口

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

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

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

可是网页这时是一片灰色，遮住了想要点击的内容。这时再用同样的办法，点击小箭头选择这个叠加的窗口，把相应的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】