使用 WebStorm for Firefox 进行实时编辑 [关闭]答案

【问题标题】：Live Edit using WebStorm for Firefox [closed]使用 WebStorm for Firefox 进行实时编辑 [关闭]
【发布时间】：2016-07-07 19:40:04
【问题描述】：

是否有一个 WebStorm 插件可以方便 Firefox 的实时编辑？

Chrome 的等价物是：https://plugins.jetbrains.com/plugin/7007。

【问题讨论】：

标签： javascript css firefox webstorm liveedit

【解决方案1】：

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

【讨论】：

【解决方案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]

【讨论】：

【解决方案3】：

您也可以使用browser-sync。

只需要两个简单的步骤：

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

一个基本的用途是监视css目录下的所有CSS文件并更新如果发生更改，连接的浏览器。导航您的终端窗口到一个项目并运行相应的命令：

静态网站

如果您只使用 .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"

【讨论】：