谷歌开发者工具 Network：Disable cache 和 Preserve log

2. 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)。作用：每次请求之前，清空缓存，导致请求无缓存可用，并同样地去除浏览器在请求头加上的If-Modified-Since或If-None-Match字段，并加上Pragma: no-cache和Cache-Control: no-cache字段,以便获取最新的资源。如果存在则直接返回；

清除浏览器缓存

很多时候，我们修改代码并保存后，到浏览器看效果，发现并没有更新；刷新页面后也没有更新。 可能是你的缓存开启了，Network 里勾选Disable cache重新加载页面后，会发现浏览器使用缓存了。 打开Disable cache，http请求头会多Cache-Control，Pragma这两个东西 开发过程中，勾选Network 内Disable cache禁止缓存，开发效率和过程会更快更快乐呢！ ...

Chrome DevTools 不是浏览器附加工具，而是现代 Web 开发的底层生产力基础设施。它基于 V8 引擎深度集成，通过 Chrome DevTools Protocol（CDP）实现可编程调试，将传统‘查看-猜测-刷新’流程重构为‘实时干预-精准断点-逆向推演’的工程闭环。其核心能力覆盖 DOM 动态监控、网络请求全链路追踪、JS 执行时空调试、内存与性能量化分析四大维度，支撑 Vue/React 等框架的响应式调试与线上问题根因定位。尤其在 SPA 白屏、接口慢、动画卡顿等高频生产问题中，Ele

选项通过阻止缓存的读取和写入，强制浏览器每次都从服务器获取最新的资源，从而为开发者提供更准确的调试环境。在 Chrome 开发者调试工具的。总之，Chrome 开发者工具中的。

在下次调用的时候只需要在head中添加If-Modified-Since，询问服务器该文件是否被修改了即可，如果文件没有被修改，则服务器会返回一个304 Not Modified，客户端得到该状态之后就会使用本地的缓存文件。但是过一段时间就正常了，客户端缓存就生效了，请求头里面就有If-Modified-Since了，响应状态也是：304 Not Modified了。当请求一个xml文件的时候，开启浏览器缓存的时候，第二次得到的响应状态是：200 OK (from disk cache)；

HTTP涉及的知识点太多，根据搜索、学习的路径做记录。

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。 浏览器缓存主要有两类：缓存协商：Last-modified ，Etag 和彻底缓存：cache-control，Expires。在浏览网页过程中网站开发人员为了给用户带来更佳的浏览体验，使网站加载快速高效往往会在浏览器本地也就是设备上面存储缓存文件，因为网站或者web应用并不是实时大量内容的更新的，而是

上一篇文章我们讲了async/await的用法，了解了其工作原理，接下来我们继续学习浏览器其他功能 chrome开发者工具 chrome开发者工具DevTools是浏览器的调试工具，内嵌于Google的Chrome的浏览器中 开发者工具有很多重要的面板，比如与性能相关的网络面板，Performance面板，内存面板等，与调试相关的Element面板，Source面板，Console面板等 从图中可以看出，它一共包含了 10 个功能面板，包括了 Elements、Console、Sources、NetW.

在前端的开发中，最麻烦的莫过于浏览器的缓存，经常需要清理缓存文件，导致开发效率较低。但Chrome可以一键禁止浏览器缓存，并且在后续的操作中，无论相同的资源请求多少次，都不会缓存到本地，一起来体验下吧。按F12打开调试者工具，在调试者工具的右上角打开菜单选项，选择更多工具（More tools）->网络限制(Network conditions，在界面中勾选“Disable cache”选项...

Google浏览器Provisional headers are shown. Disable cache to see full headers.

打开浏览器的开发工具，这里以 Chrome 浏览器为例，点击 Network 标签页，勾选下方的 "Disable cache" 即可。勾选之后浏览器则会禁用网络请求的缓存，每次都请求服务器。 ...

为什么80%的码农都做不了架构师？>>> ...

开发时建议关闭chrome的缓存[Disable cache(while DevTools open)] 问题：修改了css,JS后，chrome看不到效果

缓存实践 在缓存的介绍中，这位大佬的文章已经有非常详细的介绍 浏览器缓存策略之扫盲篇，而且文章还附有相应的代码，但我在阅读的过程中出现一些问题和一些思考，因此就按照大佬的文章再次验证和补充了一些 缓存 有些介绍 HTTP 的书会简单介绍一下缓存，像图解 HTTP 的缓存一章在 5.3 和 6.3 中有相关的介绍，但是都是一些理论知识，实际上看完之后也不知道怎么去用？所以还得去查一下相关的资料来实践一下。 首先我们要知道浏览器下访问资源的方式，下面是歪马大佬写的 浏览器缓存策略之扫盲篇 的介绍内容 浏览器下访

禁止Chrome浏览器的缓存功能有几种方式： 使用Shift + F5强制刷新缓存。实际使用中我们发现，这种方法对于部分网页的更改并不能做到释放缓存的作用，尤其是无法释放DNS缓存。 使用隐身模式Shift + Control + N. 这种方法只能在打开的页面上消除之前缓存的影响，对于打开隐身模式之后做的任何更改都无法刷新缓存，因此也不甚实用。 在DevTool (Windows：Shift + Control + I ；Mac：Option + Command + I) 中Disable C

强缓存和协商缓存

开发者模式下勾选“禁用缓存”设置无缓存