如何让Chrome重新加载源代码映射？

Question

我正在使用 Chrome Dev 27，并在 Dev 工具设置中勾选了 "禁用缓存"。当我重新加载页面时，Chrome 正确地重新加载地图页面使用的所有资源，包括 .js 文件。但是，它没有自动重新加载相应的 源映射 .map 文件。监视 Chrome 和我的应用程序之间的 HTTP 流量，在随后的页面加载中，我没有看到 Chrome 请求 .map 文件。如何让 Chrome 重新加载源映射呢？

Chrome 不重新加载 .map 文件的问题在于它也不会重新加载生成 .js 的文件，而在我的情况下，这个文件是 CoffeeScript 文件（.coffee），这意味着在调试时，即使新代码（来自 .js）正在运行，我在 "Sources" 标签中看到的是旧版本的 .coffee 文件。

- avernet

Answer 1

今天我也遇到了同样的问题。解决方法是在“Sources”下关闭coffee文件的标签页，然后进入网络选项卡，右击并选择“清除浏览器缓存”。

这个方法对我有效。

不过，映射的文件并不总是会被“卡住”，只有偶尔会发生。当它们出现问题时，清除缓存的技巧可以解决问题。

- Philip Thrasher

---

即使在Chrome中TypeScript文件（*.ts）不刷新时也能正常工作。感谢这个。 - sboisse

是的，有时候似乎会出现卡顿的情况... 两年后，使用TypeScript和VisualStudio仍然遇到了同样的问题... 这应该就是答案，因为它有助于解决缓存堵塞的问题。 - Piotr Kula

曾经参与过一个 SASS 项目，其中 CSS 能够刷新，但是重新加载 source-map 却一直失败，即使重启浏览器也无法解决。他们需要修复这个问题。 - mindplay.dk

Answer 2

我遇到了同样的问题，并找到了一些额外的解决方案：

根据这个提交和这个针对Chromium的bug报告，问题已经得到解决，并且不应影响下一个版本。

相较于清除整个浏览器缓存，这个问题的一个简单解决方案是：

在浏览器标签页中打开源代码映射文件并执行强制刷新（取决于操作系统，请尝试按CTRL+F5）。这会刷新文件并保留浏览器缓存。

另一种方法，也许是一种好的实践，是通过添加参数（如?build=12345）来操纵源代码映射的生成。请参考您的构建工具以了解如何操作源代码映射的文件名。

如果您可以访问服务器配置或.htaccess，则可以为源代码映射扩展名（如'.js.map'）设置头文件Cache-Control: no-cache。

- Trendfischer

---

就我个人经验而言，在最近的Chromium中，我遇到了过时的源代码映射问题。强制重新加载并没有起作用，但是清除浏览器缓存中最近一个小时的数据却解决了问题。虽然我还没有尝试过你提到的技巧，但根据你提供的错误报告链接，脚本和源代码映射之间的机制已经发生了变化。 - Torsten Bronger

Answer 3

我通过删除.map文件并执行硬重载（CTRL-F5）来解决了这个问题。 我不想失去所有的历史记录！

- madannes

---

如果你告诉我们那个文件在哪里，会很有帮助的。 - undefined

Answer 4

前往设置 -> 显示高级设置 -> 清除浏览数据 -> 只勾选“缓存的图像和文件” -> 点击“清除浏览数据”

这将清除在浏览器中缓存的源映射，而不会删除所有的cookies。

- Joao Franco

---

讨厌失去所有的历史记录！ - madannes

以上代码会导致你的历史记录丢失，@madannes。 - Arjan

抱歉..我应该表述得更清楚。我的意思是，我喜欢这个答案，因为我不想失去所有的历史记录，如果使用“清除浏览器缓存”就会发生这种情况。太糟糕了，我看不到如何编辑我的先前评论 =) - madannes

你不会失去历史记录，只会清除缓存。这就是我说“仅检查…”的原因。 - Joao Franco

@madannes 你不能编辑它，但是你可以删除它。 - Antony Hatchkins