打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
chrome调试工具高级不完整使用指南(实战一)

三、chrome调试工具实战

 3.1 获取界面对应的HTML和修改样式

 我们以博客园为例子来分析。

 

通过上面的操作就可以定位到对应的HTML代码

左侧菜单显示的就是当前指定元素层叠样式的一个情况

 

上面的图片中的内容是可以随意添加的,但是如果是只操作于一个元素,那么我们直接在最顶层上面添加样式就好。

:hov 按钮可以模拟hofv的操作

:cls 可以给元素添加class

下面我们来演示模拟标题的一个hover事件

3.2 快速定位对应元素上面的事件

 还是以上面的同一个标题为例:

我们把右侧菜单切换到Event Listeners中去,从这界面中我们可以分析到在这个元素上面是没有绑定其他事件的[勘误,上面所说的没有绑定事件特指的是没有绑定click事件]

a标签中的href不属于触发事件的行列之内。

这个操作的一个好处有两点一个就是可以快速的上说别人的代码。另外一个好处就是可以快速定位问题的出处。

 举一个比较复杂的例子。

上面这张图是一个按钮上面的事件绑定情况,如图所示。初步看起来视乎好像上面绑定了很多事件,但是其实不然。

我们展开其中的一个click看下:

从红色的框中,我们可以看到后缀打开可以分成大概三部分的来源:bootstrap.min.js,ace.min.js,VM892:271

其中ace是一个基于Bootstrap的框架中的JS,bootstrap也一个框架,所以我们正常是不可能在其中去编写脚本的。所以脚本的对应位置在VM中。

怎样快速的打开这一段代码, 我们只需要点击图中的蓝色标识就可以了。

这个功能还有另外的一个好处是可以排除触发器之间的干扰。这个对于线上的问题排查尤为有效

假设我们如果就是一个按钮同时触发多个触发器(事件),然后我们可以通过上图中的remove来移除可疑的一些事件,排除事件的干扰。

 

 chrome调试工具高级不完整使用指南(基础篇)

 chrome调试工具高级不完整使用指南(优化篇)

 chrome调试工具高级不完整使用指南(实战一)

 chrome调试工具高级不完整使用指南(实战二)

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
IE6下面的css调试工具
chrome调试工具高级不完整使用指南
谷歌推Web Starter Kit工具,协助多屏幕网页开发
jQuery+bootstrap
免费下载!22个最新的HTML&CSS3 UI工具包
15 个最好的 Bootstrap 设计工具推荐
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服