Visual Event谷歌插件 v2.1 免费版

Visual Event谷歌插件 v2.1免费版是一款强大实用的前端调试工具，它能直观显示页面元素的事件绑定。我超喜欢它的事件高亮显示功能。在做前端项目调试时，页面元素多且事件绑定复杂，很难定位哪个元素绑定了哪些事件。而有了这个功能，事件一目了然，能快速找到问题所在，大大提高了调试效率，让前端开发更轻松便捷。

基本简介

chrome的开发者工具固然好用，但也有不尽人意的时候，比如用event listener查看元素绑定的jquery代码时，只能看到比较复杂的原生jquery，并不能看到自己写的代码，用visual event可以帮助你查看鼠标事件触发了什么jquery代码。去google的webstore下载visual event，安装后会看到浏览器右上角有个类似眼睛的小图标，点击这个小图标，会发现绑定事件的页面元素都被圈在蓝色的框框里，鼠标放到蓝色框上，就能看到代码；再点击一下眼睛的图标，页面恢复原状。

使用方法

方法一：.crx文件格式插件安装

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去，但是谷歌考虑用户的安全隐私，在用户松开鼠标后还会给予用户一个确认安装的提示。

5.用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去，安装成功以后该插件会立即显示在浏览器右上角（如果有插件按钮的话），如果没有插件按钮的话，用户还可以通过Chrome扩展管理器找到已经安装的插件。

方法二：文件夹格式插件安装

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序。

3.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。