三、chrome调试工具实战

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

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

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

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

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

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

:cls 可以给元素添加class

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

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

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

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

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

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

举一个比较复杂的例子。

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

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

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

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

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

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

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

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

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

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

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

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

chrome调试工具高级不完整使用指南(实战一)的更多相关文章

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

    3.3 给页面添加测试脚本 在现实的工作中,我们往往会遇到一些问题在线上就会触发然后本地就触发不了的问题.或者是,要给某个元素写一个测试脚本.这个时候如果是浏览器有提供一个添加脚本的功能的话,那么我们 ...

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

    一.前言 本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作 二. ...

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

    上一篇文章我们说了chrome调试工具的一些比较基础功能的用法,接下来我们要在这一篇文章中说一说,其他一些chrome调试工具的使用方法 2.1.5 Network模块 在netWork模块中,大致上 ...

  4. Chrome调试工具简单介绍

    作为前端开发者都知道,快捷键F12可以打开chrome调试工具.firefox可以打开firebug工具.“工欲善其事,必先利其器”,对调试工具的掌握,能大大提高我们调试代码的效率.因为我平常chro ...

  5. 高级Bash脚本编程指南(27):文本处理命令(三)

    高级Bash脚本编程指南(27):文本处理命令(三) 成于坚持,败于止步 处理文本和文本文件的命令 tr 字符转换过滤器. 必须使用引用或中括号, 这样做才是合理的. 引用可以阻止shell重新解释出 ...

  6. 不常见但很有用的chrome调试工具使用方法

    前面的话   对于chrome调试工具,常用的是elements标签.console标签.sources标签和network标签.但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率.本文将 ...

  7. Jenkins高级用法 - Jenkinsfile 介绍及实战经验

    系列目录 1.Jenkins 安装 2.Jenkins 集群 3.Jenkins 持续集成 - ASP.NET Core 持续集成(Docker&自由风格&Jenkinsfile) 4 ...

  8. 高级Bash脚本编程指南《Advanced Bash-Scripting Guide》 in Chinese

    <Advanced Bash-Scripting Guide> in Chinese <高级Bash脚本编程指南>Revision 10中文版 在线阅读链接:http://ww ...

  9. Xshell高级后门完整分析报告

    Xshell高级后门完整分析报告 from:https://security.tencent.com/index.php/blog/msg/120 1. 前言 近日,Xshell官方发布公告称其软件中 ...

随机推荐

  1. vue init失败解决方案-终极版

    //由于windows系统的某方面问题,vue脚手架安装可能会出现第一证书丢失 // 报错:vue-cli · Failed to download repo vuejs-templates/webp ...

  2. Java基础—标识符及命名规范

      什么是标识符符? 凡是可以由自己命名的地方都称为修饰符. 例: 项目名 ,包名 ,类名 .方法名 2.   命名规范. ①    不可使用java关键字和保留字,但是可以包含关键字和保留字. ②  ...

  3. 10.0.0.55训练赛 Writeup

    From LB@10.0.0.55 Misc 0x01 misc100(图片隐写) 首先用binwalk扫了一下,发现没毛病. 然后就搜了一下jpg的文件尾FFD9,如下图,看到了png格式的标志IH ...

  4. Android 防内存泄露handler

    Android 防内存泄露handler 1.使用弱引用 WeakRefHander /** * 作者: allen on 15/11/24.感谢开源作者https://coding.net/u/co ...

  5. UVA 11324 The Largest Clique(强连通分量+缩点DAG的DP)

    题意:给定一个有向图,求出一个最大的结点集,这个节点集中的随意两个点之间至少一个能到达还有一个点. 思路:假设一个点在这个节点集中,那么它所在的强连通分量中的点一定所有在这个节点集中,反之亦然, 求出 ...

  6. 【cogs 597】【dp】交错匹配

    597. 交错匹配 ★☆ 输入文件:crossa.in 输出文件:crossa.out 简单对照 时间限制:1 s 内存限制:128 MB [问题描写叙述] 有两行自然数. UP[1..N] . DO ...

  7. JAVA入门[16]-form表单,上传文件

    一.如何传递参数 使用 @RequestParam 可以传递查询参数.例如:http://localhost:8092/category/detail?id=1 @RequestMapping(&qu ...

  8. JAVA入门[15]-过滤器filter

    一.过滤器 过滤器是可用于 Servlet 编程的 Java 类,可以实现以下目的: 在客户端的请求访问后端资源之前,拦截这些请求. 在服务器的响应发送回客户端之前,处理这些响应. 参考:http:/ ...

  9. 一.windows环境下rabbitMQ的的安装和配置

    rabbitMQ是AMQP 0-9-1(高级消息队列协议)的一个实现,使用Erlang语言编写,利用了Erlang的分布式特性.用它来实现分布式消息队列. 1.因为是用Erlang编写的,所以首先要安 ...

  10. HTML5 Canvas:初始Canvas

    Canvas ,HTML 5中引入它,可以做很多事情:画图.动画.游戏开发等等. Canvas 元素 Canvas 中文翻译为:画布. <canvas id=”yourCanvasId” wid ...