前言

“我已经把minio上面的excel更新了，但是下载下来的还是以前的呢？” 小杨哥问道。

此时大家的脑洞就开始大开了，有的说是nginx缓存的、有的说是minio缓存的，于是我默默的打开了浏览器，如图：

看到请求就知道咋回事儿了吧？from disk cache 浏览器缓存了。

前端看到了这儿还不死心（当然不是甩锅给前端，只是单纯证明用了浏览器缓存），你上传一个很大的文件试一试呢，看看请求时间。 我说“不用了，看一下图”

把网速限制到3G，如果是从服务器下载，也能看到下载过程，如果是缓存，那么就是瞬间完成了。

所以作为一个后端开发人员，肯定对浏览器的控制台非常的熟悉了，如果你是一名刚入行的后端开发，这篇文章要点赞收藏了

一定要掌握的浏览器控制台技巧网络（Network）

不管是前端开发，还是后端开发，网络这个模块肯定都非常熟悉，下面几点一定要学会使用。

网速设置

可快速将网速设置成3G，或者自定义网速。

主要的使用场景，就是需要模拟慢网速的情况。比如登录时需要观察登录相关的接口，调整成慢网速，这样就方便我们观察接口的情况了。

当然代理设置也是可以的

HAR 导出导入

HAR包下载功能，将当前浏览器的的请求，导出成一个har包，导入har包就会自动在控制台还原这些请求了。

比如我们的测试以及其他同事发现了一些问题，不确定是哪个接口问题的时候，我们就可以将 当前页面的请求导出来，发给我们排查问题的开发人员。

请求重放

对之前发起过的请求进行重新发起。平时工作中，可用于自测接口是否有幂等问题，或者快速创建几条测试数据。

替换和模拟网络响应

修改请求的响应数据。

比如前端需要获取某条数据的状态，对应接口返回值是1,2,3,4。那么前端就不需要让后端给你造数据了。直接改一下请求的响应结果重新请求就行了。

应用（Application）

使用Application面板可以检查、修改和调试 Web 应用的许多方面，包括其清单、Service Worker、存储和缓存数据。

前端开发肯定对local storage 和 Session storage、Cookies 非常的了解。作为后端也是要清楚这几个东西之间的区别和作用的。常常用户信息的token也会保存在local storage．

元素检查 （Elements）

作为一名后端虽然不写前端代码，但是元素检查功能还是经常用到的。 比如：

屏幕截图(Capture)

截图功能大家肯定都熟悉，截图方式肯定也是多种多样，今天也分享一下Goolge devTools 的自带截图功能

输入命令后，4种截图模式都显示出来了。分别是：

区域截图（Capture area screenshot）
整个页面截图（Capture full size screenshot）  
网页节点截图（Capture node screenshot）  
当前页面显示部分截图（Capture screenshot）

总结

本篇文章主要站在后端开发的角度，列出了常用的Chrome DevTools 功能。重点讲的是就是Network 这块，如何模拟慢网速，修改返回结果，请求重放，har包的导入导出。学会使用这些功能，能帮助你在实际工作中去排查接口问题，提高前后端协作效率。

当然 Chrome DevTools 功能远不止于此， Chrome DevTools 还能帮助我们去排查影响页面性能的内存问题，包括内存泄漏、内存膨胀和频繁的垃圾回收等。同时还能在网页的响应、动画和空闲阶段对CPU占用情况分析。

详细见官网：/