巧用网页开发者工具F12 审查、修改元素、去除广告、屏蔽遮罩

每当打开一个网页的时候，是否为页面有很多广告而烦恼；是否为要操作页面（例如观看超清视频），请先注册登录等等事情而麻烦；是否对网页加锁的视频懊恼？今天为大家分享一个技巧，本文只提供思路，更多好玩有趣的东西有待朋友们开发！

不过也要提醒开发者在做遮罩层的时候注意这些问题！

  • 好了切入正题，先说某某学院视频，如图，视频本身是加锁的，点击会弹出登录框！

  • 这时候要做的就是 F12打开开发者工具，找到弹出层的元素然后将其display：none；这样比较麻烦是吧，还有更简单的一种方法，笔者用的是UC流浪器，右击弹出层会提示如图：

  • 这时我们只要点击拦截此元素后，出现的是一层遮罩，如图：

  • 再次右击遮罩在此拦截此元素，

  • 然后即可在未登陆的情况下打开视频.

  • 在看一个chrome流浪器下的例子：
  • 此网站未登陆时不能进行任何操作的，如图

  • 这时候我们要做的就是找到此弹框的display属性将其干掉！然后也是剩下遮罩层，然后只要把它的遮罩层干掉就ok啦！

  • 好了，大功告成，如图可以看出来在未登录页面的情况下输入了文字，未登录可以正常操作访问页面！

  • 如下一个是去广告的例子，就不细说了，简单上几张图！
  • 去广告前,
  • 去广告后：
  • 好好好例子就这么多，这只是一个思路，开发者工具中更多好玩有趣的东西有待我们共同探索，同时在这里笔者也要提前广大开发者在制作遮罩时给与相应的对策！

博客主页：http://www.cnblogs.com/bc8web/

巧用网页开发者工具F12 审查、修改元素、去除广告、屏蔽遮罩的更多相关文章

  1. chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存？

    目录 chrome浏览器 开发者工具F12中某网站的sources下的源码如何批量保存 1. 常用保存Sources源码的两种方法 1.1单个文件 1.2 单个页面 2. 问题 3.解决方案 chro ...

  2. 浏览器开发者工具----F12 功能介绍

    笔者技巧: 看了些其它回答,有些是用来扒图片的,有些是写爬虫的(这个不要看Elements,因为浏览器会对一些不符合规范的标签做补全或者其它处理,最好是Ctrl+U). 图片的话就不要看Network ...

  3. chrome浏览器开发者工具之同步修改至本地

    相信好多小伙伴喜爱webpack的热加载技术,省时而又不繁琐,讨厌F5或者Ctrl+F5. 嘿嘿,现在介绍大家一个在浏览器中修改直接同步到本地代码修改的方法--- (程序员都是从0开始数数的!) 第0 ...

  4. 巧用chrome开发者工具

    说明:截图中的Chrome版本为52,不同版本可能略有区别. 常用设置 开发时消除静态资源缓存不能立刻更新的困扰,勾选Disable cache即可 切换颜色显示格式 修改默认颜色显示格式,在Sett ...

  5. IE11 全新的F12开发者工具

      我讨厌debug,相信也没多少开发者会喜欢.但是当代码出错之后肯定是要找出问题出在哪里的.不过网页开发的时候遇到 BUG 是一件再正常不过的事情了,我们不能保证自己的代码万无一失,于是使用浏览器的 ...

  6. 企业IT管理员IE11升级指南【17】—— F12 开发者工具

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  7. 神器——Chrome开发者工具(一)

    这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下 ...

  8. Chrome 开发者工具(DevTools)中所有快捷方式列表

    Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每个快捷键在Windows/Linux及Mac中的对应键.其中一些快捷键对于Dev ...

  9. Chrome （开发者工具）快捷键

    https://9iphp.com/web/javascript/chrome-devtools-shortcuts.html https://www.cnblogs.com/davidwang456 ...

随机推荐

  1. 20165233 实验二 Java面向对象程序设计

    20165233 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步 ...

  2. 好记性不如烂笔头-linux学习笔记3mysql数据库导入导出

    1 数据库文件导出 mysqldump -uroot -p123456 test > 1.sql 2数据库文件导入 mysql -uroot -p123456 test <1.sql 3 ...

  3. WPF 出现“调用线程无法访问此对象，因为另一个线程拥有该对象”

    引起这种错误多半是由于在非UI线程刷新界面,解决此问题可以使用Dispatcher this.Dispatcher.Invoke(new Action(() => { UpdateUI(stri ...

  4. python 黑魔法 ---上下文管理器（contextor）

    所谓上下文 计算机上下文(Context)对于我而言,一直是一个很抽象的名词.就像形而上一样,经常听见有人说,但是无法和现实认知世界相结合. 最直观的上下文,莫过于小学的语文课,经常会问联系上下文,推 ...

  5. MS SQL Server 无法添加、更新或删除从msx服务器上发起的作业（或其步骤或调度）

    因为 服务器 的名字 更改过 use   msdb     go         SP_CONFIGURE   'ALLOW UPDATES',1   RECONFIGURE   WITH   OVE ...

  6. Spring cloud @RefreshScope使用

    参数 @RestController @RefreshScope public class HomeController { @Value("${foo}") String foo ...

  7. Spring cloud 两种服务调用方式(Rest + Ribbon) 和 Fegin方式

    1:Rest + Ribbon @Bean @LoadBalanced RestTemplate restTemplate() { return new RestTemplate(); } @Auto ...

  8. Hadoop之MapReduce学习笔记（二）

    主要内容: mapreduce编程模型再解释: ob提交方式: windows->yarn windows->local : linux->local linux->yarn: ...

  9. 一些js知识点总结

    1. 函数声明与函数表达式 解析器在像执行环境中加载数据时,会先读取函数声明,并使其在执行任何代码之前都可以访问,对于函数表达式,必须等到解析器执行到它所在的代码行,才会真正被执行. 例: alert ...

  10. js输出/获得Cookie

    js输出/获得Cookie //方法 1 function setCookie(name, value) { var Days = 365; var exp = new Date(); exp.set ...