工具 | 简单实用的前端调试技巧

242 阅读1分钟

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

未完待续。。。