今天来给大家分享一点「技术流」的东西 —— 浏览器 F12 审查元素 工具。这个工具是几乎每个浏览器都会内置的,用途是方便程序猿们,对网页进行检查和调试。

以 Chrome 为例,在浏览器中按 F12 键,或者在空白处右键选择 「检查」,就可以调出这个工具:

640-25.png

也就是说,有了这个工具,你就是程序猿,可以透过网页的外衣,看到它的结构和本质。也就是说,可以做一些为所欲为的事情

当然,要想用好这个工具,首先得对网站的基本知识有所了解,这个就说来话长了,所以今天就从最通俗易懂的角度,举几个栗子来带大家玩转 F12。 (以下均以 Chrome 浏览器为例,其他浏览器用法差不多 ~)

基本说明

一般打开之后,这个工具默认是嵌在浏览器窗口里的,会显示成窄窄的一条,网页也会挤扁了,非常不便使用,所以我们先把它变成自由独立式,在右上角的三个点处点击,Dock Side 选择为 Separate Window。

640-26.png

此外,简单介绍下顶部的几个常用项目:Elements 会显示出整个网页的 HTML 代码和 CSS 样式,用来分析网页的结构,透过外观看穿网页的本质; Console 是控制台,可以执行 Javascript 代码,主要用于对网页程序逻辑的调试;Network 是网页连接监控,能够看到当前页面向哪些网址请求了哪些资源。

640-22.jpg

下面我们就讲讲,可以利用 F12 来做哪些事情。

篡改页面内容

不管是什么目的,想篡改页面文字内容,还在靠 PS 的话未免有点弱,想 P 得逼真,光找个合适大小和形状的字体就得花点工夫,不如直接 F12 一下,拦路就把网页文字给篡改了。

这是别人的一个支付宝账户:

640-27.png

如果想变身富豪只需三步,第一步,按 F12 调出审查元素工具, 第二步,看到最左边的小箭头图标了吗,点它一下,然后鼠标移向页面的余额,不断调整直到蓝色阴影正好覆盖到余额,点击一下鼠标左键。

这时, Elements 标签下面,这个位置的代码就会被选中。第三步,逐级展开代码结构,直到找到那个数字,双击代码开始修改,改完之后随便点一下其他地方,你的余额立刻就变化了。

640-28.png

好了,还是熟悉的界面熟悉的字体熟悉的配色,你的余额分分钟就翻了……无穷大∞(?)倍……

所以要我说微博下面那些天天刷王思聪发支付宝红包了,PS 痕迹这么明显的,一点技术含量都没有,简直弱爆了。

640-29.png

当然了,这只是个表面工夫,页面一刷新,余额当然又就变回去了,这点 b 数心里还是要有的。

下载页面内容

比如说觉得页面里一张图片挺好,想要下载,但是右键菜单没有下载选项,这时就可以用 F12 来把网页里的资源一网打尽。

拿这个支付宝的 logo 为例,直接右键的话,没有 图片另存为 的选项。

这时技术流的我们当然要 F12 一下,然后选择窗口最左上角的那个小箭头图标,回到网页,想看哪里戳哪里,戳一下支付宝的 logo:

640-23.jpg

虽然左侧代码中显示的是一个 htm 结尾的网页链接,但右侧的 CSS 窗口中,却可以看到 background 的 url 了,双击此处,复制 url,得到一个 png 后缀的网址,打开就是 logo 图片了。

顺便表扬一下在 Console 标签里的一个小彩蛋:

640-24.jpg

支付宝真的很贴心了,为了应对骗子们,这个细节都替大家想到了。它说的是真的,不要随便在控制台粘贴别人发过来的代码什么的哦,你应该已经体会到了 F12 的强大,所以很容易被坏人拿来做文章哦。

查看密码

这个操作有点太骚气了,非常犹豫要不要告诉大家,所以请切勿拿来做任何坏事,人在做,天在看,莫伸手 伸手必被抓!

640-25.jpg

这个事情是这样的,浏览器都有 「记住密码」的功能,常输的密码让浏览器记住,下次访问时就能自动填上了,很省事。而且输密码的窗口里,密码都是显示为 * 的,很是让人放心。

如果忘记了密码,以 Chrome 为例,是可以看到你在 Chrome 里保存的所有密码的,在 设置 - 密码 里就能找到所有记住密码了的网站列表。

640-30.png

你可能会说,想查看密码还得输入 Windows 登录密码,所以还是挺安全的,这就图样图森破了。

接下来的操作,一定不要拿来做坏事哟!!其实我们还用 F12 左上角哪个 「想看哪里点哪里」的万能小箭头,只需三步就能直接看到密码。

第一步打开 F12,第二步用小箭头选中密码框。

看到 <input type="password” 部分了吗?薄弱点就在这里。第三步,双击 password 这块文字,改成 text。

640-31.png

640-26.jpg

这下完了,你以为很安全的浏览器记住密码,其实只要这样一个没有什么技术含量的小技巧,就被人给破解了。

那为什么浏览器没有把这个问题给修复呢?我觉得这里面可能是由于历史遗留问题,定下的标准不太容易改,而且更主要的是,想窃取你密码的人,都能够直接操控你的电脑了,到这个页面以后,直接点击登录就能登录账户了,就好比盗贼都进了你家了,能不能看到大门密码,又有多要紧呢?

想要好好保护,就还得靠更多更安全的验证步骤,在输入密码的基础上,加上手机扫码、收短信验证码、登录密码和支付密码分开等操作。但是,只有大厂的网站才能做到这种更全面的安全保护,数不清的小网站根本没有其他验证方式,甚至改密码也只需提供原密码,这些网站要是密码泄露了什么都没了。

这个给大家的启示是,在公共电脑上,千万不要让浏览器记住密码。

挖掘接口

现在网站广泛采用 ajax 操作了,也就是说当你在页面向服务器传输了数据的时候,无需把整个页面刷新,就能与服务器进行交互。如果想要挖出这个接口,就可以借助 F12 控制台。

640-32.png

比如下图,有个文本编辑网页工具,点击保存按钮后,会弹窗提示保存成功。想查看这个保存工具调用了什么接口,只需要先启动 F12 审查元素工具,然后再点击按钮一次,回到 Network 标签页,就能看到一条网络请求,可以分析请求的地址、Cookie、参数,以及返回值的格式等等。

这个需要更多的网络开发知识,通常用在爬虫之类的工具上。比如有个车票网站,输入筛选条件,可以返回很多条车票结果,你也想爬取它的数据,就可以通过这种方式对接口进行分析。

不过随着网络的发展,爬虫高级了,反爬虫技术也会随之高级,而且很多接口也需要处于登录状态或者传入 token 才能调用,这些就很复杂了,这里只是举个栗子,告诉大家 F12 还有这个作用而已。