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

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

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

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

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

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

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

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

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

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

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

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

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

时间: 2024-12-19 07:03:40

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

IE11 全新的F12开发者工具

我讨厌debug,相信也没多少开发者会喜欢.但是当代码出错之后肯定是要找出问题出在哪里的.不过网页开发的时候遇到 BUG 是一件再正常不过的事情了,我们不能保证自己的代码万无一失,于是使用浏览器的开发者工具调试是我们解决问题最快捷的方法了.微软在 Windows 8.1 预览版中带来了全新的 IE11 浏览器,不光加入了诸如 WebGL 支持等功能,还将F12开发者工具进行了重新设计,这是IE有史以来开发者工具最大的的更新. 随着网站复杂程度的增加,原有的IE开发者工具已经渐渐不能满足开发者的需

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

http://segmentfault.com/a/1190000000683599 原文地址 这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下的firebug.本文将会详细讲述如何使用Chrome开发者工具,希望里面有些让你感到惊艳的东西!即使你不用Chrome,那么文中的某些内容也会相当有用. 首先啰嗦一下如何打开开发者工具吧.可以直接在页面

http://segmentfault.com/a/1190000000683599神器——Chrome开发者工具(一)

这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下的firebug.本文将会详细讲述如何使用Chrome开发者工具,希望里面有些让你感到惊艳的东西!即使你不用Chrome,那么文中的某些内容也会相当有用. 首先啰嗦一下如何打开开发者工具吧.可以直接在页面上点击右键,然后选择审查元素:或者是打开Tools--Developer Tools:或者是用快

chrome开发者工具使用的总结

开发者工具的打开 直接在页面上点击右键,然后选择审查元素: 或者是打开Tools--Developer Tools: 或者是用快捷键 Command Option + I 打开: 然后会在上方看见八大工具: Elements: 允许我们从浏览器的角度看页面,也就是说我们可以看到chrome渲染页面所需要的的HTML.CSS和DOM(Document Object Model)对象.此外,还可以编辑这些内容更改页面显示效果: Network: 可以看到页面向服务器请求了哪些资源.资源的大小以及加载

接口测试-开发者工具操作

1.打开开发者工具 F12 或者 右键选择检查 2.抓包 重点关注 原文地址:https://www.cnblogs.com/zhangshan33/p/12419449.html

利用google浏览器开发者工具调试网页(详)

前端程序员或者在校大学生正在开发网页,如果想要测试或者通过测试优化网页结构,该怎么办呢?这就需要用到一款工具,chrome浏览器的开发者工具?本文写给尚不熟悉这个开发者工具的同学们或者同行们,话不多说,先看文章 怎样打开Chrome的开发者工具? 你可以直接在页面上点击右键,然后选择审查元素: 或者在Chrome的工具中找到: 或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12. 打开的开发者工具就长下面的样子: 不过我一般

巧用开发者工具的控制台来调试页面中的js语句

因为要弄某网页的一个自动登陆工具,所以需要对此网页中的元素利用js进行选取和操作,复杂的js选取如果直接在头脑中想很容易出错,而且一旦出错也不好判断错误原因. 而浏览器带的开发者工具的控制台功能,就给我们提供了一个像在本地开发工具中调试程序一样便捷的功能. 比如要调试博客首页,鼠标右键选择页面中对应的元素,弹出的菜单选择审查元素: 假设我们要选取图中标题的a标签元素,它的id为homepage1_HomePageDays_DaysList_ctl00_DayList_TitleUrl_0,那么我

结合IE9的开发者工具取得动态网页的html代码

最近在做一个项目,要得到网页中的一些数据,静态的页面比较容易做,只要解析网站的URL地址就可以得到HTML代码,但是有些网页是动态生成的,比如翻页过程中,地址栏中的URL地址都不会发生变化,所以得到这种网页的内容就相对麻烦些.下面我以https://honors.libraries.psu.edu/browse/author/all/这个网站的翻页动作为例子,说明一下动态网页HTML代码的获取过程. 1.用IE9打开这个网站:https://honors.libraries.psu.edu/br

网页开发者调式工具Firefox插件

在调试HTML等时,我用的是Firefox,下述是它常用的插件: 毫无疑问,比起其他浏览器,Chrome虽有着明显的优势,但是它的劲敌Firefox却是很多前端攻城师和研发人员的挚爱,为了尽可能地提高用户体验,Firefox的社区在插件开发和运用上有着丰富的经验,说它是网站开发者的首选浏览器也并不为过. 本文集合了20款为开发者而生的优质插件,在这些插件的帮助下,网页开发者可以创造出令人惊艳.极富创意的网站页面.接下来,让我们一起看看这些插件吧. 1.Firebug 作为开发领域最著名的插件,F