怎么调试HTML缓存机制中的响应头-html教程-PHP中文网

需在Chrome DevTools Network面板中定位HTML请求，点击后于Headers标签页下拉至Response Headers，核验Cache-Control、Expires、ETag等字段是否符合配置，结合状态码（304或200）及Request Headers中的校验头判断缓存机制是否生效。

怎么调试html缓存机制中的响应头

怎么看 HTML 请求的响应头是否生效

直接在 Chrome DevTools 的 Network 标签页里验证最可靠。打开页面后刷新，找到 index.html（或对应 HTML 文件）那一行请求，点击它，在右侧 Headers 面板下拉到 Response Headers 区域。

重点盯这几个字段：

Cache-Control：值是不是你配的，比如 no-cache, must-revalidate, max-age=0 或 public, max-age=300
Expires：如果是 Thu, 01 Jan 1970 00:00:01 GMT，说明 expires epoch 生效了
ETag 或 Last-Modified：存在且非空，代表协商缓存有依据；如果被设为空字符串（""），说明你主动禁用了 ETag 校验
没有出现意外的 Cache-Control: public, max-age=31536000 —— 这种是 CDN 或反向代理偷偷加的，会覆盖你自己的配置

注意：如果看到 Status 是 304 Not Modified，说明协商缓存走通了；如果是 200 OK 但带 from disk cache，那可能是强缓存没关干净。

Nginx 中 HTML 响应头常配错的写法

Nginx 对 HTML 文件的缓存控制最容易翻车的地方，是把 location 块写得太宽或太窄：

错误：用 location / { ... } 统一配 add_header Cache-Control "no-cache"
→ 问题：这个指令不会继承进子 location，且可能被其他更具体的块覆盖

正确做法是精准匹配 HTML 文件：

location = /index.html {
  add_header Cache-Control "no-cache, must-revalidate, max-age=0";
  add_header ETag "";
  expires epoch;
}

如果你有多个 HTML 入口（如 /about.html、/contact.html），别一个个写，改用正则：

location ~* \.html$ {
  add_header Cache-Control "no-cache, must-revalidate, max-age=0";
  expires epoch;
}

⚠️ 注意：add_header 在 Nginx 中默认不继承，如果你在 server 块里写了，又在 location 里写了同名 header，后者会完全覆盖前者 —— 不是合并。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

为什么加了 `Cache-Control: no-cache` 还看到旧内容

no-cache 不等于“不缓存”，而是“每次用前必须校验”。浏览器仍会把 HTML 存在本地，只是下次请求时自动带上 If-None-Match 或 If-Modified-Since 头去问服务器：“我这个版本还有效吗？”

所以常见假象：

你改了 HTML，但服务器返回了 304 → 浏览器继续用旧缓存
后端没正确实现 ETag 或 Last-Modified 逻辑 → 总是返回 304，哪怕文件已变
CDN 或中间代理返回了 200 且带强缓存头 → 它根本没把你的 no-cache 透传给浏览器

验证方式：在 DevTools 的 Network 里点开 HTML 请求，看 Request Headers 里有没有 If-None-Match；再看响应状态是不是 304。如果是，问题不在浏览器，而在服务端校验逻辑或中间层拦截。

开发阶段临时绕过缓存的实操技巧

调试时不想反复改服务器配置，这几个办法见效最快：

在 Chrome DevTools 的 Network 标签页勾选 Disable cache → 所有请求跳过本地缓存（仅当前 DevTools 开着时有效）
强制刷新：Windows 按 Ctrl + F5，Mac 按 Cmd + Shift + R → 忽略强缓存，但协商缓存仍可能触发 304
URL 加扰动参数：比如把 @#@#@#@#@#@#@#@#@#@0 改成 @#@#@#@#@#@#@#@#@#@1 → 浏览器视为全新 URL，彻底绕过所有缓存
禁用 Service Worker：在 DevTools 的 Application → Service Workers 里点 Unregister，否则它可能劫持 fetch 并返回旧 HTML