简单实用的前端调试技巧

1. XHR Breakpoints

作用：用于找到某个请求是谁发送的

右侧调试区有一个 XHR Breakpoints，点击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求，输入内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。根据堆栈，就可以找到调用的地方。

2. 查看重定向的请求

在重定向后，network中的url被清空，无法查看请求跳转的详情

勾选network中的Preserve log，保留请求日志

3. 在Application页签查看cookies，localStorage，sessionStorage的信息

4. 如何查看浏览器已经缓存了什么文件

在url中输入：chrome://cache

可以查看到哪些请求从缓存中获取

5. 根据关键字，在代码中搜索关键字的位置

6. 查看打开页面发送的请求数，加载耗时时间，加载的数据大小。及时发现当前页面的性能问题。

注意：首次打开，和有缓存的情况下，请求数是不相同的。

优化的方向：

有些冗余请求，可以延迟加载，需要的时候再加载

多个js，打包合并为一个js

多张小图标合并为一个图标

大图标，不要使用样式缩放，直接减少尺寸

清理不必要的js或css

未完待续。。。