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

逃离我推掉我的手 2022-01-11 17:07 228阅读 0赞

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

## 查看资源 ##

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

![Center][]点击Open link in resources panel菜单后显示如下页面：![Center 1][]

## Event Listeners属性 ##

如下图

![Center 2][]

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

## 使用打印日志功能调试 ##

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

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

console.log(data);

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

[Center]: https://img-blog.csdn.net/20130720111115234?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuX2Rr/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220110/cb48e30162f74237acefe7de6410e985.png
[Center 2]: /images/20220110/4e8e07ef24e64bc9bff053fbb71eeee5.png