《浏览器F12开发者工具的妙用》

  • 浏览器的有趣玩法
  • 前端相关小技巧 ^-^

下面的几种用法本人都——试过,还是挺有意思的,安利一下。

一:复制不可复制的文字

  • 例子(比如我在某乎分享过一篇文章,我设置了不可转载,那么如果别人想复制我的文字时,就会出现下面这个标识【禁止转载】,也就是别人没法复制我的文章。)
  • 我们按下F12,或者右击鼠标选择【审查元素】,点一下下边弹出框左上角鼠标,然后去点击页面你想要的文字,下面框代码中亮的部分,看不到文字就点击箭头展开,看到文字,双击或者右键copy
    在这里插入图片描述

二、下载不能右击鼠标选择保存的图片

  • 例子(比如说某库网需要vip才能下载的图片)
  • 首先我们打开不能直接下载图片的网站,然后使用快捷键F12,或者右击鼠标选择【审查元素】,然后选择【 network】,再选择【 Img】,刷新页面就看得到下面有图片资源了,大部分网页是这样结构,有些图片会在【 sources】那里打开左侧栏(请求回来的图片资源),总之能找到图片的资源所在位置就可以了。
    在这里插入图片描述

三、当然还有作弊截假的数据图(修改余额,也可以修改页面的任意文字)

  • 例子(更改网页登录某宝显示的余额——修改的是网页请求来展示到页面数据,刷新即可恢复正常)
  • 我现在使用F12打开开发者工具,点一下下边弹出框左上角鼠标,然后去点击页面你想要修改的账号余额下面双击文字,马上就可以改一个数值,回车,关闭下面弹出框或者按F12关闭,然后截图炫耀去了。
    在这里插入图片描述

四丶使用浏览器截取整个网页。

  • 使用浏览器自带的截屏功能截取超过一个屏幕的网页
  • F12或 Ctrl+ Shift+ I打开开发者工具,在任意 tab上按 Ctrl+ Shift+ P,在弹出的输入框里输入 Capture full size screenshot(其实不需要输入完整,可以自动补全),然后按回车即可
    在这里插入图片描述
  • 例子:
    在这里插入图片描述

五丶查看网页登陆的隐藏的密码

  • 我现在使用F12打开开发者工具,点一下下边弹出框左上角鼠标,然后去点击页面你想要看到的密码,或者鼠标放到密码上右键审查元素/检查也可以,找到行内的文本框类型:type=“password”,改为type="text"回车,就可以了
    在这里插入图片描述
    在这里插入图片描述

六、简易计算使用浏览器计算即可

  • 我现在使用F12打开开发者工具,点一下下边弹出框console,然后输入8*5按下回车即可

在这里插入图片描述

  • 10
    点赞
  • 100
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
F12开发者工具是一款内置在现代浏览器中的调试工具,它提供了许多有用的功能,可以帮助开发人员进行网页开发和调试。以下是一个简单的F12开发者工具教程: 1. 打开F12开发者工具: - 在大多数浏览器中,你可以使用快捷键F12来打开开发者工具。 - 在Chrome浏览器中,你还可以通过右键点击页面,然后选择“检查”来打开开发者工具。 2. 导航面板: - 开发者工具通常由不同的面板组成,例如元素、网络、控制台等。 - 你可以使用选项卡或快捷键在这些面板之间进行导航。 3. 元素面板: - 元素面板显示了当前页面的HTML结构。 - 你可以通过在页面上选择元素来查看和编辑其相关的CSS和属性。 - 这对于调试和修改页面布局非常有用。 4. 网络面板: - 网络面板显示了当前页面加载的所有网络请求。 - 你可以查看请求的详细信息,包括请求头、响应内容和加载时间等。 - 这对于优化网页加载速度和调试AJAX请求非常有用。 5. 控制台面板: - 控制台面板用于显示网页的JavaScript日志、错误和调试信息。 - 你可以在控制台中执行JavaScript代码,以及查看输出结果。 - 这对于调试JavaScript代码和查找错误非常有用。 6. 其他功能: - F12开发者工具还提供了许多其他有用的功能,例如调试器、性能分析器、应用程序存储等。 - 你可以根据需要探索这些功能,并根据具体情况使用它们。 请注意,不同的浏览器可能会有略微不同的界面和功能。这只是一个基本的教程,你可以根据自己的需求和浏览器来进一步学习和掌握F12开发者工具的使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值