使用WebStorm for Firefox进行实时编辑

时间:2016-07-07 19:40:04

标签: javascript css firefox webstorm liveedit

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

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

3 个答案:

答案 0 :(得分:2)

不,Live Edit仅适用于Chrome。请关注WEB-1805了解更新

答案 1 :(得分:1)

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

运行它的最简单方法是:

  1. 将此样板临时添加到您的站点(您不希望它用于生产)
  2. <script>
      document.write('<script src="http://' + 
        (location.host || 'localhost').split(':')[0] +
        ':35729/livereload.js?snipver=1"></' + 'script>')
    </script>
    
    1. 从您的WebStorm控制台:
    2. $ npm install -g livereload
      $ livereload [path of files to watch]
      

答案 2 :(得分:1)

您也可以使用browser-sync

它只需要两个简单的步骤:

  1. 安装npm软件包:npm install -g browser-sync
  2. 启动浏览器同步
  

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