如何在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打开了Elements面板底部的搜索面板...可以更容易地在大DOM中查找内容)

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

在" 网络"面板中,您可以看到该文件已重新下载:

另请参阅:Konrad的答案提供了一些方便的代码,用于通过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的片段功能从控制台运行它,也可以将其作为扩展名.