Chrome DevTools编辑本地CSS后，刷新出现CSS不加载、偶发乱码问题

故障场景 #

• 纯静态网页项目包含独立外部CSS文件、无任何JavaScript逻辑，开发阶段直接通过file://协议在Chrome打开本地HTML文件测试，初始加载时样式完全正常
• 使用Chrome开发者工具的Sources标签页在线修改CSS文件内容后，会触发持续性异常：
  • 常规刷新页面时所有CSS样式全部加载失败，必须在Sources面板对对应CSS文件做极轻微修改（哪怕仅在文件末尾添加一个无意义换行），样式才能临时恢复加载
  • 偶发刷新时，Sources标签页展示的CSS文件内容会变成无意义的随机乱码
• 已通过CSS语法校验工具确认代码本身无语法错误，排除代码层面问题

问题诱因 #

这个问题和CSS代码质量无关，是Chrome对本地file://协议的调试机制冲突导致的，很多刚接触网页开发的朋友很容易踩这个坑：

• Chrome的Sources面板在线编辑本地文件后，默认会把修改内容暂存到浏览器本地的调试映射缓存中，不会自动将修改同步写回磁盘上的原始CSS文件，很多人以为改完就直接存盘了，实际上浏览器根本没动你磁盘上的文件
• 当浏览器缓存了Sources面板的编辑暂存内容，但没有和磁盘上的真实文件完成同步时，会给该路径的CSS文件打上待更新标记；但本地file协议没有HTTP协议下的正式缓存校验流程，这个待更新标记会和浏览器的本地文件内存缓存产生读写竞争，偶发出现缓存块读取错乱，就会出现看到乱码的情况
• 每次在Sources面板添加换行的操作，本质是触发了一次临时的缓存校验流程，让暂存的编辑内容和内存缓存完成临时同步，所以样式会短暂恢复，等下次刷新时缓存竞争问题又会复现

落地解决步骤 #

• 第一步：解除错误的调试映射缓存
  1. 打开Chrome开发者工具，切换到Sources标签页
  2. 在左侧边栏找到Overrides分类，右键点击当前项目对应的映射项，选择Remove folder from overrides，断开浏览器对本地文件的错误改写映射
  3. 按下Ctrl+Shift+R强制刷新页面，验证样式是否恢复正常加载
• 第二步：调整本地调试操作习惯，规避机制冲突
  • 不要依赖Sources面板直接编辑本地磁盘的CSS文件——Sources面板的在线编辑本质是浏览器层面的内存临时映射，不是直接修改磁盘上的真实文件，长期使用这个方式调整样式，非常容易触发缓存竞争异常
  • 需要调整样式时，直接在本地代码编辑器中修改CSS文件，保存后再回到浏览器刷新页面，不会触发上述缓存问题
• 第三步：如果需要长期使用Chrome的调试同步能力，正确配置工作区
  • 将项目文件夹正式挂载到Chrome的Workspaces工作区，让Sources面板的编辑内容自动同步写回磁盘上的原始文件，从根源上避免浏览器暂存缓存和磁盘文件内容不一致的问题
  • 不要对本地file://路径的静态文件使用Overrides功能——Overrides机制原本是针对线上URL的响应内容改写，对本地file路径的兼容本身存在已知bug，很容易触发缓存错乱
• 针对偶发的乱码显示问题
  乱码是Chrome本地文件缓存块损坏导致的，在Chrome设置的隐私选项中，选择清除“缓存的图片和文件”选项即可修复，不需要重新编写CSS代码

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