页面脚本（js、css等）调试技巧介绍

许多浏览器都支持页面源码的查看、调试功能，使用chrom浏览器自带的调试器简洁、方便、功能强大。原理大致是调试器帮助我们将页面的元素解析，我们选中页面元素，通过“审查元素”，很快就能定位到该元素的页面代码，还帮我们对这些页面元素对应的样式、js脚本等进行跟踪解析，让我们了解页面结构化、功能化的实现，这样给我们分析页面源码带来了很多方便，不用一行行代码去阅读枯燥的页面。一般常见的页面分析、调试技巧很简单，就不做多说了，介绍一些不太注意到，但功能很强的操作。

查看资源

可以查看各种资源（如图片）的详细信息，不用打开浏览器浏览。


点击Open link in resources panel菜单后显示如下页面：

Event Listeners属性

如下图



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

使用打印日志功能调试

js脚本调试一般方法是设断点调试，也可以通过打印日志的方法，js内置对象console，如下调用：

若变量data为对象时，使用如下方法打印日志信息

console.log(data);

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