在 Chrome 中实时重新加载 JavaScript

2022-01-24 00:00:00 google-chrome javascript coffeescript livereload

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

I know you can live-edit JS from within the Source panel of Chrome Developer Tools, and I know there are systems for live-reloading of CSS, but can you live-reload JS from the source location (either a URL or local disk, or leveraging Workspaces somehow, or possibly even as a Chrome Developer Tools plugin)? In particular this would be insanely useful for CoffeeScript-to-JS setups.

推荐答案

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

It's surprisingly difficult to find anyone else trying to do this, considering how powerful it would be.

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

I've come close to achieving automatic live reloading of JS without page refresh; here's what I do:

  1. 在检查器的 sources 选项卡中，右键单击并选择Add Folder to Workspace..."
  2. 选择包含您要同步的.js的本地文件夹，然后点击[okay].
  3. 右键单击嵌套在新添加的工作区文件夹中的 .js 文件并选择映射到网络资源"，然后选择匹配的 .js 来自页面.
  4. 使用外部编辑器更改本地 .js 文件.
  5. 在inspector中点击.js文件，确保它有焦点；这将触发重新编译和更新"，您的更改应该被注入到页面中.
  1. In the inspector's sources tab, right click and choose "Add Folder to Workspace..."
  2. Select to the local folder containing the .js you want to sync and click [okay].
  3. Right click on the .js file nested inside your newly-added workspace folder and choose "Map to Network Resource", then select the matching .js from the page.
  4. Make changes to the local .js file using an external editor.
  5. Click on the .js file in the inspector, ensuring it has focus; this will trigger a "Recompilation and update" and your changes should be injected to the page.

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

Step 5 is the part that needs to be automated, somehow.

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

If you combine this with a file-watcher that automatically bundles your app into a single .js file, you can come close to automatic reload without refreshing the page.

相关文章