3

浏览器使用技巧

 3 years ago
source link: https://greyli.com/browser-tips-and-tricks/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

浏览器使用技巧

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

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

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

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

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

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

devtool

Chrome开发者工具（devtool）

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

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

三、技巧示例

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

500px

500px上的图片

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

pic code

图片对应的html代码

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

所有图片

网站用到的所有图片

去除文字复制限制

有些网站限制了右键和选择文字的功能，这主要是通过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），通过相应的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】


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK