如何在 chrome 开发者工具中重新加载单个文件

Posted 2023-03-07

【中文标题】如何在 chrome 开发者工具中重新加载单个文件

【英文标题】：How to reload single file in chrome developer tools

【发布时间】：2018-01-02 17:55:53

【问题描述】：

我正在一个复杂的网站上工作，该网站有大量的 css 文件和 js 文件加载到每个页面上。我正在使用 Chrome 的开发人员工具处理单个 css。一旦 css 在开发者工具中大部分是正确的（元素选项卡，样式侧栏），css 就会被复制到本地 css 文件，然后上传到 Web 服务器。由于仅修改了单个 css 文件，因此重新加载单个 css 文件会更快，而不是硬刷新和重新加载整个站点，包括图像、js 和 css 等。

该站点可以选择缩小 css 文件并将其与其他 css 文件合并，创建一个非常大的 css 文件。该选项在开发模式下被关闭。将版本号添加到 css 文件名不是我正在寻找的技巧。

是否可以在 Chrome 开发人员工具中单击源文件并仅刷新该文件？

【问题讨论】：

在新选项卡中打开该 CSS 文件并在那里进行硬刷新。

... 然后正常刷新网站页面。

【参考方案1】：

据我所知，我认为只有实时编辑是您正在寻找的唯一可能方式。没有办法刷新单个 css 文件。

【参考方案2】：

这有点小技巧，但我认为它适用于您的场景。

当我最初加载示例页面时，您可以看到三个 CSS 请求：

我想刷新devsite-googler-buttons.css 文件，所以我在我的 DOM 树中找到它：

(Command+F 在 Mac 上或 Control+F 在 Windows / Linux 上打开该搜索面板在 Elements 面板的底部...可以更轻松地在大型 DOM 中查找内容）

右键单击，选择编辑为 HTML，然后在链接末尾附加一个随机查询字符串：

在网络面板中，您可以看到文件已重新下载：

另请参阅：Konrad's answer 提供了一些方便的代码，通过Snippet 自动执行此操作。

【讨论】：

我认为这仍然行不通。至少在带有 Blazor WebAssembly 的 Chrome 80 中没有。

【参考方案3】：

在您的情况下，将其自动化一点可能会很方便：

function reloadCSS() 
  const links = document.getElementsByTagName('link');

  Array.from(links)
    .filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
    .forEach(link => 
      const url = new URL(link.href, location.href);
      url.searchParams.set('forceReload', Date.now());
      link.href = url.href;
    );


reloadCSS();

此函数的作用是通过将当前时间附加到它们的 URL 来强制重新加载所有 CSS 文件。

您可以修改它以针对特定文件。您可以从控制台运行它，通过 DevTools 'snippets' 功能或将其添加到扩展中。

【讨论】：

@wmertens 建议link.href = link.href 就足够了（虽然没有亲自尝试过）

@KayceBasques 这是一个不错的技巧，但它只能工作一次（随后调用 reloadCSS 什么都不做）并且在 FF 中根本不起作用。

@KonradDzwinel 您的 sn-p 有效。对我来说，它每次运行时都会重新加载 css 文件。请注意，当重新加载所有 CSS 时，它确实会导致屏幕“闪烁”。我可以把它拨到我需要的一个文件。 +1 以获得好的答案，如果我可以同时接受两个答案，我会接受。

【参考方案4】：

如果您不介意刷新页面，但又不想重新下载所有资源，请尝试以下操作。

在新选项卡中打开 css 文件。 （您可以在 Chrome 开发者工具中右键单击 css 文件并选择“在新标签页中打开”）； 硬刷新此选项卡（ctrl/cmd + f5）； 软刷新页面（f5 或 ctrl/cms + r）。