浏览器调试：事件定位与源码查找

　　做为前端人员，浏览器调试是必不可少的工做之一，甚至与页面制做同样重要，试想生产环境以及平常bug中出现的问题，没法重现问题进行调试或者不知道如何下手调试，将对工做产生很消极的影响；经常使用的调试浏览器是chrome和Firefox，自带的和一些安装的插件均可以进行平常页面调试；

 

　　相关的浏览器调试技巧，前端人员基本上都多多少少知道一些，因此这里我也就不从简到复杂一个个列举了，有兴趣的小伙伴能够百度之相关的一些浏览器调试的常识(也许我之后会写也说不定)，我今天说的如标题，主要是事件定位与源码查找；什么意思那？好比有个场景1：在前端工做中，集团官网出了个脚本问题，老板/主管让你去解决，打开网站，恩 代码写的很牛逼，但不是我写的啊(咱们是大天然的维修工，哪里有问题去哪里)，以前的大神不在了等等诸多缘由，这种场景太多了，不少是维护其余人员写的代码，那么就要进行问题(脚本)定位和分析，而后纠错优化改正之；场景2：浏览一些网站时，发现一些不错的效果，想研究下码码之，这也涉及到脚本定位的问题(脚本都找不到研究个毛)；这个时候有同窗会问，这个要找代码很麻烦吗？右键查看源代码，看看引用或者页面上的代码不就好了吗？可是若是这个网站比较大，或者结构乱不够优化那？什么意思，看图：

......

这是个简单的例子，有的网站引用的脚步很是多，并且名字起的你不知道是干吗的，或者是引用一个mini&ugly后的代码，一个一个看源码？

　　好吧前面说了这么多，还没到正题，如何进行事件定位与源码查找，js事件能够理解为触发了某个条件后发生的页面响应，js事件分为通常事件、页面事件、表单事件等，简单理解就是页面click、hover、load、submit、scroll等等这些表明的事件，我这里就以最好理解的页面click来讲，其余事件同样能够延伸；如今页面有个事件，点击某处发生了一个特定的事件，这个事件如何绑定？大体有一下几种方式：

　　1.元素直接绑定方法：<p onclick="addSome()"></p>

　　2.经过id或样式绑定方法：$("#eleId").click(function(){}) or document.getElementById("eleId").click or $(".eleClass").click(function(){})

　　3.查找元素绑定：$("#eleId span em p").click(function(){}) or $(".class span em p").click(function(){})

　　4.经过监听绑定方法：$(document).on("click","#eleId",function(){}) or document.getElementById("eleId").addEventListener(function(){})

　　第一二中应该是比较经常使用的绑定方式，第一种能够直接定位如何绑定的方法了，而后就是定位源码分析代码了，而下面的几种方式，须要借助这个元素的“标记”来定位，好比id、class或者是上级的id、class(这种比较少了，脚本效率不高)，那么这个标记就成了查找绑定事件的关键，咱们须要一个地方能全局搜索全部引用的脚步，下面是chrome的搜索，我使用的是版本 52.0.2743.116 m；如图咱们就实操个人博客中的一个搜索按钮的功能，这个例子比较简单：

　　先经过代码查看，发现这个按钮是写在input中的onclick的，取到方法名，下面进行查找；

如图所示找到sources，经过里面的search全局查找脚本，发现一处，点击显示源区域，而后就找到代码了，注意这里代码区是formatted过的，若是你是查找的是自家的代码，果断去看源码去，若是是网上的，呵呵，只能这样了；这种方式能够查找以上几种介绍过的类型作延伸，基本能够知足脚本查找问题定位了，能够多找些列子试下就熟了；

在Firefox中的查找以下：

 

 　　

　　除了这种方式，chrome还提供一些插件能够定位事件，好比Visual Event，就是这个玩意了

如图进入页面后，点击右上角插件，对，就是那个黑眼睛，插件开始工做，会在页面上有绑定事件的地方显示出绑定的来源，比较方便，不过不能定位代码源，仍是须要手动查找，若是还有其余更好用的插件，也请小伙伴们留言提示；

　　差很少写到这里了，分析一些小技巧，但愿能帮到你。

 

　　原文地址：浏览器调试：事件定位与源码查找，薛陈磊|Share the world