三、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. 本地创建Duplicate数据库

    本地创建Duplicate数据库,新创建的文件路径与目标数据库不同,并且辅助实例的初始化參数DB_NAME与目标数据库不能同样. 1.创建辅助实例的秘钥文件 [oracle@linux5 dbs]$ ...

  2. 学习vi和vim编辑器（5）：越过基础的藩篱

    本章将对之前学习的编辑命令如" c "." d "." y "等命令进行总结,并学习一些新的知识:其它进入vi的方法,利用缓冲区来存储拖曳或 ...

  3. Md5加密秘钥加密哈希加密

    加密通用类: public class EncryptClass { /// <summary> /// 返回MD5加密字符串 /// </summary> /// <p ...

  4. 【SqlServer系列】语法定义符号解析

    1   概述 在数据库函数定义中,经常用到这些符号:<>,::=,[],{},|,..,(),!!   .这篇文章简要概述这些符号. 2   具体内容 2.1  <> < ...

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

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

  6. 翻译：MariaDB RENAME TABLE语句

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  7. 转：Natas Wargame Level28 Writeup(EBC加密破解)

    From:http://alkalinesecurity.com/blog/ctf-writeups/natas-28-getting-it-wrong/ Now that I knew it was ...

  8. 将java项目打包为jar

    打开Eclipse,点击file,选择export 选择java,选择其中的JAR file并点击next 选择需要的到处的项目,并在下方输入将项目保存为的目录,文件名字. 如果,已经将项目打包为一个 ...

  9. Mac OS 终端利器 iTerm2

    之前一直使用 Mac OS 自带的终端,用起来虽然有些不太方便,但总体来说还是可以接受的,是有想换个终端的想法,然后今天偶然看到一个终端利器 iTerm2,发现真的很强大,也非常的好用,按照网上配置了 ...

  10. node作为客户端请求第三方

    var http = require('http'); let util = require('util'); http.get('http://www.imooc.com/u/card',funct ...