使用 WebStorm for Firefox 进行实时编辑

Question

是否有用于 Firefox 的实时编辑的 WebStorm 插件？

Chrome 的等效项是：https://plugins.jetbrains.com/plugin/7007。

Answer 1

不，实时编辑仅适用于 Chrome。请关注 WEB-1805 获取更新

Answer 2

我找到了使用名为 livereload 的 JS 包的解决方法。它会在保存您的 WebStorm 项目时自动刷新 Firefox（或任何浏览器）。

运行最简单的方法是：

暂时将此样板文件添加到您的站点（生产环境中不需要它）

<script>
  document.write('<script src="http://' + 
    (location.host || 'localhost').split(':')[0] +
    ':35729/livereload.js?snipver=1"></' + 'script>')
</script>

从您的 WebStorm 控制台：

$ npm install -g livereload
$ livereload [path of files to watch]

Answer 3

您也可以使用 browser-sync.

只需要两个简单的步骤：

安装 npm 包：npm install -g browser-sync
开始浏览器同步

A basic use is to watch all CSS files in the css directory and update connected browsers if a change occurs. Navigate your terminal window to a project and run the appropriate command:

静态站点

如果您只使用 .html 文件，则需要使用 服务器模式 。 Browsersync 将启动一个小型服务器并提供一个 URL 来查看您的站点。

browser-sync start --server --files "css/*.css"

动态站点

如果您已经是运行具有 PHP 或类似功能的本地服务器，则需要使用 代理模式 。 Browsersync 将使用代理 URL 包裹您的虚拟主机以查看您的网站。

browser-sync start --proxy "myproject.dev" --files "css/*.css"

您可以将其他文件类型添加为逗号分隔列表

--files "*.html, css/*.css"

使用 WebStorm for Firefox 进行实时编辑

Live Edit using WebStorm for Firefox

javascript

css

firefox

webstorm

liveedit