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

Question

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

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

Chrome Developer工具是否可以点击源文件并仅刷新该文件？

Answer 1

这有点像黑客攻击，但我认为它适用于你的场景。

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

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

Mac上的

（ Command + F 或Windows / Linux上的 Control + F 打开了该搜索面板位于元素面板的底部...可以更轻松地在大型DOM中查找内容。

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

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

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

Answer 2

在你的情况下，自动化它可能会很方便：

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”功能从控制台运行它，也可以将其作为扩展名。

Answer 3

据我所知，只有实时编辑是我想要的唯一可能的方式。无法刷新单个css文件。

Answer 4

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

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