在 Chrome 中测试时如何禁用 HTML 缓存？答案

【问题标题】：How to disable caching of HTML when testing in Chrome?在 Chrome 中测试时如何禁用 HTML 缓存？
【发布时间】：2012-12-16 09:06:06
【问题描述】：

我认为这是因为缓存，但我不完全确定。

我遇到的问题是，当我更改文件并保存它时，它有一段时间没有在我的浏览器中更新。我认为这是因为该文件已缓存在我的浏览器中，并且正在加载以前的版本。由于我正在测试，我需要弄清楚如何禁用它，因为我会经常更改文件。

尝试在网络上搜索此内容，但无法真正找到我要查找的内容。

我目前在 localhost 上运行它，但更改的文件只是 HTML

编辑：

我知道我的文件没有问题，因为如果我在新浏览器中打开它，它会加载新版本的页面。

我正在尝试使用 chrome 进行测试。

EDIT2：

另外，被修改的文件是通过require.js加载的，所以不是URL中输入的直接文件

【问题讨论】：

你运行的是什么浏览器？
如果是缓存问题，那么你的答案是：stackoverflow.com/questions/1341089/…
看到这篇文章。它准确地回答了您的问题 [stackoverflow.com/questions/5690269/… [1]：stackoverflow.com/questions/5690269/…
看到这个问题。它准确地回答了你的问题：[stackoverflow.com/questions/5690269/… [1]：stackoverflow.com/questions/5690269/…
禁用 chrome 开发工具中的缓存仅在开发工具打开时有效stackoverflow.com/questions/5690269/…

标签： html caching testing requirejs

【解决方案1】：

我注意到您在 EDIT2 中的问题中提到您正在使用 require.js。如果不想禁用浏览器缓存，可以设置 RequireJS config urlArgs 选项。 Require.js 有一个配置选项，您可以使用它来禁用正在缓存的文件。

这是 Require.js 文档的摘录：Require.js urlArgs

urlArgs：附加到 RequireJS 的 URL 的额外查询字符串参数用于获取资源。当浏览器或服务器配置不正确。
的示例缓存破坏设置
urlArgs: urlArgs: "bust=" + (new Date()).getTime()

在开发过程中使用它可能很有用，但请务必在部署代码之前将其删除。

下面是一个示例：

requirejs.config({
    urlArgs: "bust=" + (new Date()).getTime(),  
    paths: {
        "jquery": "libs/jquery-1.8.3",
        "underscore": "libs/underscore",
        "backbone": "libs/backbone"
    },
});

require(["jquery", "underscore", "backbone"],
    function ($, _, Backbone) {
        console.log("Test output");
        console.log("$: " + typeof $);
        console.log("_: " + typeof _);
        console.log("Backbone: " + typeof Backbone);
    }
);

【讨论】：

【解决方案2】：

如果您打开 chrome 开发者工具并点击设置按钮（开发者工具面板右下角的齿轮图标），弹出窗口中应该有一个“禁用缓存”选项

【讨论】：

值得注意的是，此设置仅在为给定选项卡打开开发人员工具时适用。
我不再看到齿轮按钮。这是另一种方法：stackoverflow.com/a/36339076/3347858

【解决方案3】：

当我有这种疑问时，我会在 url 的末尾添加一个随机参数。

示例：

http://localhost/foo/bar.html?randomParam=873738424

这会禁用浏览器缓存响应的可能性。这可以手动或以编程方式完成，因为这是一个非常简单的解决方案。

如果存在无法识别的参数，通常应用程序不会出错。

【讨论】：

啊，这是有道理的。这可能是我正在寻找的更多内容，因为我不必更改文件中的任何代码。谢谢！
其实检查edit2。我不认为这个解决方案对我有用。
在开始测试之前，你仍然可以将require js的url在浏览器中用随机参数强制重新加载。否则，您需要一些能够禁用缓存的 firefox/chrome 插件（如 WebDeveloper 插件），请参阅：chrispederick.com/work/web-developer。此外 CTRL+F5 或 CTRL+R 应该重新加载页面，在大多数浏览器中禁用缓存。

【解决方案4】：

如果我们检查文件系统上的脚本而不是本地 Web 服务器，我会选择这个，而不是检查 location.host（在这种情况下是一个空字符串）：

var require.urlArgs = (window.location.protocol == 'file:') ? 'bust='+new Date().getTime() : ''

【讨论】：

【解决方案5】：

包含在头部部分

<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">

【讨论】：

【解决方案6】：

尝试在重新加载页面之前清除浏览器的缓存（ctrl+shift+delete）。

您也可以按 Shift 并单击重新加载，这样文件将被刷新并且不会使用缓存。

【讨论】：

【解决方案7】：

忽略： 使用 r.js 编译时似乎不允许使用函数。 :(

支持 BarDev，这样的事情怎么样：

requirejs.config({
    urlArgs: (function(){
        return (location.host=='localhost') ? 'bust='+(new Date().getTime()) : '';
    }())
});

现在您可以将代码留在其中，而不必担心在生产中无意中破坏缓存。

【讨论】：