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

时间 2019-11-06

标签 chrome 调试工具高级完整使用指南实战栏目 Chrome 繁體版

原文原文链接

3、chrome调试工具实战

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

经过上面的操做就能够定位到对应的HTML代码chrome

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

上面的图片中的内容是能够随意添加的，可是若是是只操做于一个元素，那么咱们直接在最顶层上面添加样式就好。框架

：hov 按钮能够模拟hofv的操做工具

：cls 能够给元素添加class优化

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

仍是以上面的同一个标题为例：3d

咱们把右侧菜单切换到Event Listeners中去，从这界面中咱们能够分析到在这个元素上面是没有绑定其余事件的[勘误，上面所说的没有绑定事件特指的是没有绑定click事件]调试

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

这个操做的一个好处有两点一个就是能够快速的上说别人的代码。另一个好处就是能够快速定位问题的出处。

举一个比较复杂的例子。

上面这张图是一个按钮上面的事件绑定状况，如图所示。初步看起来视乎好像上面绑定了不少事件，可是其实否则。

咱们展开其中的一个click看下：

从红色的框中，咱们能够看到后缀打开能够分红大概三部分的来源：bootstrap.min.js，ace.min.js，VM892：271

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

怎样快速的打开这一段代码，咱们只须要点击图中的蓝色标识就能够了。

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

假设咱们若是就是一个按钮同时触发多个触发器（事件），而后咱们能够经过上图中的remove来移除可疑的一些事件，排除事件的干扰。