Chrome DevTools中“Content unavailable. Resource was not cached”解析与解决

1. 错误含义与触发场景 #

这个提示表示Chrome DevTools无法找到对应报错资源的本地缓存副本，因此无法在Source标签页加载并显示该资源的代码。常见触发场景包括：

• 浏览器缓存被手动清理或自动过期：比如用户手动清除了浏览器缓存，或者资源的缓存策略设置了短有效期，已被浏览器自动删除
• 资源未被缓存：部分动态生成的脚本或资源未设置缓存响应头，浏览器未将其存入本地缓存
• 资源已被替换：调试过程中刷新页面或重新加载资源，旧版本的资源被新覆盖，原错误对应的旧资源缓存已被清除
• 资源加载不完整：网络中断、资源加载失败等情况导致资源未完整加载，DevTools未获取到完整的缓存副本

2. 查看错误对应源代码的方法 #

• 重新复现错误：刷新页面并重新触发报错，此时新加载的资源会被存入缓存，再点击控制台的错误引用即可正常跳转至Source标签页
• 手动定位资源：根据控制台错误提示的文件名、行号，直接在Source标签页的文件树中找到对应文件，手动导航到指定行号
• 开启请求日志持久化：在DevTools的Network面板勾选「Preserve log」选项，这样页面刷新或跳转时，之前的网络请求记录会被保留，对应的资源缓存也会被留存
• 配置本地文件映射：如果是本地开发项目，使用DevTools的Workspace功能，将远程资源映射到本地项目文件，即使缓存丢失，也能直接打开本地源代码
• 格式化压缩代码：若资源是压缩/混淆后的代码，点击Source标签页中的「Pretty print」（{}图标）格式化代码，结合错误行号手动定位；若网站配置了Source Map，DevTools会自动映射到原始未压缩代码

内容的提问来源于stack exchange，提问作者palsch