Question

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

Chrome的等效内容为：https://plugins.jetbrains.com/plugin/7007。

Answer 1

不，Live Edit仅适用于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
启动浏览器同步

基本用途是观看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"

使用WebStorm for Firefox进行实时编辑

3 个答案: