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

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

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

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

基本说明

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

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

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

篡改页面内容

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

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

（对其实就是我的账户，请给我打钱谢谢：

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

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

好了，还是熟悉的界面熟悉的字体熟悉的配色，你的余额分分钟就翻了……无穷大∞（？）倍……

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

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

下载页面内容

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

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

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

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

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

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

查看密码

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

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

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

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

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

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

看到inputtype="password”部分了吗？薄弱点就在这里。第三步，双击password这块文字，改成text。

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

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

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

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

挖掘接口

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

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

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

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

想学习更多骚操作，可以加入宅菌的「知识星球」。星球里会分享实用工具、神奇技能、精品资源，还可以就编程、软件之类的各种问题，向宅菌发起提问，与大家一起交流。

星球原价￥50，现在只需￥20即可订阅一年。为避免退款过程很麻烦，识别下面







































北京最好的白癜风医院地址
治白癜风的外用药


欢迎转载,转载请注明原文网址：http://www.xxpx365.com/clfl/51410.html