如何使用浏览器的开发者工具(f12)

Elements panel

Styles

在开发过程中调试样式的场景，可以在开发者工具(以下简称f12)中尝试不同的样式，调整好后将f12中的样式代码复制到css文件的代码中。避免为了调试某个样式，不断修改css，不断刷新浏览器网页。

image.png

Computed

image.png

在样式调试过程中，可能会出现自定义的样式没有生效的情况，使用此工具可以看到为什么自己写的样式没有生效，生效的样式是怎么定义的。

EventListeners

这个工具在目前Ext框架下的开发场景下不太有用，所有事件都被ext代理了，看到的监听器代码都是Extjs里的，调试不太方便。

Network panel

Headers

image.png
这里可以看到http请求到底发的是什么请求。有时候页面上的数据和你的预期不符，第一步是先查请求数据的http请求是不是发对了，而不是看后台代码。

Preview

image.png
如果页面上的数据和你的预期不符，经过第一步检查，假如http请求没有问题，第二步是查看响应的数据是否符合预期。如果响应数据符合预期，说明是前端js的问题，如果响应数据不符合预期，肯定是后端代码的问题。

XHR initiator

image.png

Sources panel

image.png

使用f12断点调试，可以避免“修改js刷新页面”的循环操作。