三、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. Java爬虫——人人网模拟登录

    人人网登录地址:http://www.renren.com/ 此处登录没有考虑验证码验证码. 首先对登录方法进行分析 有两种方法. 一)在Elements中分析源码 发现登录点击后的事件是http:/ ...

  2. javascript变量：全局？还是局部？这个得注意

    在JS中.是没有块级作用域的 举两个个样例: if语句块:     if (true){ var name='Ling'; } alert(name); 输出:Ling for语句块; for(var ...

  3. iOS 获取导航栏和状态栏的高度

    CGRect rect = [[UIApplication sharedApplication] statusBarFrame]; 状态栏的高度: float status height =  rec ...

  4. url特殊字符转义及解决方法

    URL特殊字符需转义 1.空格换成加号(+) 2.正斜杠(/)分隔目录和子目录 3.问号(?)分隔URL和查询 4.百分号(%)制定特殊字符 5.#号指定书签 6.&号分隔参数 转义字符的原因 ...

  5. 浅谈Android数据库DBFlow

    一.项目配置 1.根目录下的build.gradle 中添加 maven { url "https://www.jitpack.io" } 如下: classpath 'com.n ...

  6. C# 委托详解(一)

    1.委托简单例子 class eeProgram { // 声明delegate对象 public delegate string CompareDelegate(int a, int b); // ...

  7. 写给自己的web总结——css篇（1）

    上一篇写了关于html的知识,算是小试牛刀,这次来尝试写一下css. 初步了解css css的全称为cascading style sheet-- 层叠样式表,通过编入代码来对html里的标签做出各种 ...

  8. android studio 环境变量配置

    1.需要添加path环境变量: 2.真机调试或模拟器调试需要启动adb adb kill-severadb -start-server可能有端口冲突--重启或者修改端口 创建密匙http://blog ...

  9. 《跟我学IDEA》五、快捷键（编码利器）

    上一篇博文,我们学习了idea的一些模版配置,但是只有模版是不行的,一款编辑器如何能为我们灵活的使用,快捷键的功劳不用多说大家也明白.今天我们就来学习快捷键的配置以及一些常用的快捷键的介绍,为让家能更 ...

  10. PHP随机函数【上】

    随机函数应用的场景很多,比如验证码,token,订单号等.由浅入深了解常用随机函数 1.rand 常用的随机数字函数,默认生成[0,getrandmax()]之间的随机数(包括边界值),因性能问题已被 ...