在 Chrome 中实时重新加载 JavaScript

Posted 2023-02-22

【中文标题】在 Chrome 中实时重新加载 JavaScript

【英文标题】：Live reload JavaScript in Chrome

【发布时间】：2014-03-23 19:55:48

【问题描述】：

我知道您可以从 Chrome 开发者工具的源代码面板中实时编辑 JS，并且我知道有用于实时重新加载 CSS 的系统，但是您可以从源位置（URL 或本地磁盘，或以某种方式利用工作区，甚至可能作为 Chrome 开发者工具插件）？特别是这对于 CoffeeScript-to-JS 设置非常有用。

【问题讨论】：

你的意思不是重新加载页面吗？目前尚不清楚如何在不重新加载其他脚本的情况下重新加载一个脚本的全局状态。

@jfriend00：没有重新加载全局状态，这是热代码交换。我的意思是该机制已经存在并在您的 Sources 面板中工作：编辑脚本，保存，现有的闭包使用新代码。 （蛮力手动方法是编译你的新 JS，然后复制并粘贴到那里。）

解决问题的另一种方法可能是使用像 COLT 这样的实时编码工具，它可以与外部编辑器一起使用。

【参考方案1】：

考虑到它的强大程度，很难找到其他人尝试这样做。

我已经接近实现JS的自动实时重新加载而无需刷新页面；这就是我所做的：

在检查器的sources 选项卡中，右键单击并选择“Add Folder to Workspace...” 选择包含您要同步的.js的本地文件夹，然后点击[okay]。 右键单击嵌套在新添加的工作区文件夹中的.js 文件并选择“映射到网络资源”，然后从页面中选择匹配的.js。 使用外部编辑器更改本地 .js 文件。 在inspector中点击.js文件，确保它有焦点；这将触发“重新编译和更新”，您的更改应该被注入到页面中。

第 5 步是需要以某种方式自动化的部分。

如果您将它与自动将您的应用捆绑到单个 .js 文件中的文件观察器结合使用，您可以接近自动重新加载而无需刷新页面。

【讨论】：

如果你（像我一样）希望它允许实时编辑 JS，它不会起作用。您将收到“工​​作空间映射不匹配错误”。但是我发现了这个：***.com/questions/29351513/…

我想知道自从一年多前的这篇文章以来，你们中的任何一个人是否在这方面取得了任何进展。我仍在苦苦挣扎，即使 npm livereload 提供了这个选项： applyJSLive 告诉 LiveReload 在后台重新加载 javascript 文件而不是重新加载页面。默认值为 false。将此设置为 true 仍会刷新页面。

小添加。如果您从本地文件加载它确实有效，您必须通过网络服务器运行本地文件，例如 python -m http.server 在您的 .html 存在的文件夹中，否则与本地文件匹配的选项永远不会出现，然后您可以保存并重新加载功能。我之所以提到它，是因为我通过阅读帖子没有发现问题

【参考方案2】：

是的，您可以使用 grunt.js 或 gulp.js 做到这一点。 Codekit 等其他东西可以做到这一点，Chrome 插件 LiveReload 也可以。

【讨论】：

我已经在使用 grunt-livereload。它仅适用于 CSS，无需刷新；在 JS 更改时，它会为我重新加载整个页面。