☰

在 Chrome 中重新加载脚本/样式表

tag-icon • tag-icon google-chrome
在 Chrome 中重新加载脚本/样式表

使用 Chrome 的 devtools，是否可以只重新加载注入页面的一个（或多个）脚本或样式表，而无需重新加载整个页面？那么，如果我在page.html使用script.js和的页面上，是否可以在不刷新 的情况下style.css重新加载，比如说？script.jspage.html

答案1

一个简单的方法应该适用于几乎所有样式表和图像是通过在其 URL 中添加查询来更改文件名。

例如，在超级用户中，css 是：

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07">

将其更改为

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07&refresh">

并获得重新加载的（尽管相同）样式规则。

这可以做成书签或复制到控制台

[].forEach.call(document.querySelectorAll("link[rel=stylesheet]"), function(link) {
   link.href+=(link.href.indexOf("?") > -1) ? "&refresh" : "?refresh";
})

至于脚本，你不应该。几乎所有脚本在加载时修改页面或将自身附加到某个处理程序。您可以轻松加载另一个 js 文件，但前一个文件所做的更改很难撤消。

答案2

我知道这在尝试调试多页表单或由 Ajax 加载以响应一系列问题时很有用；但是，我个人曾多次看到在 Chrome 的开发工具中修改 CSS 或脚本会产生与将相同的更改添加到相应文件并从头开始重新加载页面不同的结果。这种情况并非总是发生，但我已经看到这种情况发生得足够多了，以至于在开发工具中进行多次更改后，我不太相信结果。

我不确定你为什么要这样做，但是，假设这是为了调试一些长链过程，我建议添加一个简单的测试来确定你是否正在调试。根据你的代码设置方式，我会尝试添加像以下粗略示例一样的调试点：

If (current-point != debug-point && debugging === true) Then
   ---code to bypass steps here---
Else
   ---other code to aid the debug process or allow regular execution---
End If

显然，创建一个功能是理想的。设置这个功能可能需要一点努力，而且在上线之前你必须删除它或以其他方式禁用它，但它可以节省反复重新加载页面和重新执行一长串步骤的时间。

如果您的代码非常复杂（通过使用外部库或简单的代码）或者您必须在实时系统上工作，则可能无法做到这一点。但是，如果可能的话，那么自动化或绕过您需要的步骤将使您能够更快地进行调试和工作，并且比依赖 Chrome 的开发工具来准确解释和反映您在页面加载后所做的所有更改更准确。

相关内容