三、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. 最短路算法之Dijkstra算法通俗解释

    Dijkstra算法 说明:求解从起点到任意点的最短距离,注意该算法应用于没有负边的图. 来,看图. 用邻接矩阵表示 int[][] m = { {0, 0, 0, 0, 0, 0}, {0, 0, ...

  2. VisualStudio程序运行后控制台窗口一闪就没了

    这个虽然是千查万查出来的,但也不是原创的.希望对大家有所帮助. 方案一:网上最常见的解决方案是,在程序结尾的 return 0; 之前加 system("pause") 或 get ...

  3. Woody的Python学习笔记1

    Python 是一种解释性语言:这意味着开发过程中省去了编译这个环节,类似于PHP\Perl. Python 是交互式语言:这意味着你能够在一个python提示符,直接互动运行写你的程序. Pytho ...

  4. 第五章——定时器Timer序言

    定时器很重要. 上家公司有用的,是用来做定期数据同步的. 以前老同学有用到,曾经就定时器讨论过一次,还给过一次他我关于spring-task的总结. 但是并没有意识到定时器与多线程的关系,或者说,上一 ...

  5. 基于Metronic的Bootstrap开发框架经验总结（18）-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

    在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...

  6. 七、Spring Boot Servlet 使用

    Web开发使用 Controller 基本上可以完成大部分需求,但是我们还可能会用到 Servlet.Filter.Listener.Interceptor 等等. 当使用spring-Boot时,嵌 ...

  7. linux 安装tensorflow（gpu版本）

    一.安装cuda 具体安装过程见我的另一篇博客,ubuntu16.04下安装配置深度学习环境 二.安装tensorflow 1.具体安装过程官网其实写的比较详细,总结一下的话可以分为两种:安装rele ...

  8. 结对编程-四则运算GUI的实现

    一.项目成员以及coding地址: 洪灏捷(本人)201321122020  coding地址:https://git.coding.net/hoje/The-GUI-operation.git 白至 ...

  9. Highway LSTM 学习笔记

    Highway LSTM 学习笔记 zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouwan  2016-4-5   声明 1)该Dee ...

  10. spring boot + druid + 封装JdbcTemplate

    本源码内容如下: spring boot项目 用的druid连接池 druid监控页面配置 数据操作用spring jdbctemplate 进一步封装spring jdbctemplate支持用对象 ...