在 Chrome 中实时重新加载 JavaScript

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21949047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 22:04:39  来源:igfitidea点击:

Live reload JavaScript in Chrome

javascriptgoogle-chromecoffeescriptlivereload

提问by Yang

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.

我知道你可以在 Chrome 开发者工具的 Source 面板中实时编辑 JS,我知道有一些系统可以实时重新加载 CSS,但是你可以从源位置(URL 或本地磁盘,或以某种方式利用工作区,甚至可能作为 Chrome 开发人员工具插件)?特别是这对于从 CoffeeScript 到 JS 的设置非常有用。

回答by namuol

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

考虑到它的强大功能,很难找到其他人尝试这样做。

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

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

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

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

第 5 步是需要自动化的部分,不知何故。

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

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

回答by thatgibbyguy

Yes you can do that with grunt.js, or gulp.js. Other things like Codekit can do this, as can an add-on for Chrome called LiveReload.

是的,你可以用 grunt.js 或 gulp.js 做到这一点。Codekit 之类的其他东西可以做到这一点,Chrome 的附加组件 LiveReload 也可以做到这一点。