JavaScript 元素代码解析

对于某些不了解的页面，如果可以查看元素对应的js代码是如何工作的，可以求助于Chrome。原理大致是调试器帮助我们将页面的元素解析，我们选中页面元素，通过“审查元素”，很快就能定位到该元素的页面代码，还帮我们对这些页面元素对应的样式、js脚本等进行跟踪解析，让我们了解页面结构化、功能化的实现，这样给我们分析页面源码带来了很多方便。

解析元素方法

我们选择页面元素...后，右侧的菜单条Event Listeners是该元素对应的事件，调试器帮我们找到了对应的引用方法，甚至是css样式对应的事件也能帮我们解析出来（以前都是一行行代码搜索或者跟踪的，现在一步到位的定位出来，的确节省了许多时间）。我们看到红色框标记有个过滤器，我们点击拉下，可选中“Selected Node Only”，这样就过滤出我们选中的页面元素对应的事件。代码进一步透明化了，带来了许多方便，节省了许多时间。

调试

和其他脚本语言类似，调试的话有两种方法，一是设断点调试，二是通过打印日志的方法，js内置对象console，如下调用：

若变量data为对象时，使用如下方法打印日志信息
console.log(data);

然后，就可以在调试器中查看调试信息。