html - Rubymine 的实时预览/所见即所得支持或插件？

Question

我在 Windows 上使用 Rubymine 5.4，它总体上令人惊叹，作为 HTML/CSS 编辑器，它的性能与 Visual Studio 一样好 95%，但有一些异常(exception)……主要是缺乏实时预览/所见即所得的能力，即在我输入时我可以实时看到结果预览(除了 VS，DreamWeaver 也有这个功能)。我似乎无法在 IDE、帮助或任何 Google/Stack 搜索中找到类似的东西。

明确地说，我正在寻找一种在 RubyMine 中拥有分屏 View 的方法，我可以在其中在一个 Pane /选项卡中编辑我的 HTML/CSS 并查看它在其中的外观的实时预览另一个选项卡/ Pane 中的浏览器。

理想情况下，这将是:

1. 在 RubyMine 本身中(如上所述使用 native Pane /选项卡)
2. 用户可以配置他们想要在...中查看预览的任何浏览器渲染引擎(Chrome、FF、IE 等...)

...但是，我可以接受以上两个的任何变体，例如使用外部窗口/浏览器简单地与 RubyMine 集成，或者，预览仅适用于有限的渲染引擎(比如只有 Chrome)。

Answer 1

感谢@CrazyCoder 和@LazyOne 的指点...

经过更多的研究，我已经确认并获得了更多细节:

解决方案是使用官方 Jetbrains(RubyMine 的制造商)LiveEdit 插件，您可以在这里找到它:http://plugins.jetbrains.com/plugin/?id=7007

---

详细说明

1. 从此处下载 JetBrains LiveEdit 插件:http://plugins.jetbrains.com/plugin/?id=7007
2. 运行 Rubymine > Settings > Plugins(在搜索中输入“plugins”设置框)
3. 单击列表底部的从磁盘安装插件 按钮
4. 导航到您下载插件的位置并选择/打开它
5. 在插件列表中勾选激活
6. (您可能必须)重新启动 RubyMine
7. 重新启动后，转到菜单栏> View > LiveEdit(随后将选中)
8. 在此处下载 Chrome 的 JetBrains IDE 浏览器扩展:https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon
   • Chrome 扩展支持 WYSIWYG/实时“LiveEdit”在 IDE 之外，在外部 Chrome 窗口中和 JavaScript 调试在实际的 RubyMine IDE 中
   • 我相信还有一个 FireFox 的扩展，我相信它也支持通过 IDE 进行 Javascript 调试。但是，我不确定它是否像 Chrome 扩展一样支持 LiveEdit
9. (启动)调试您的元素
10. 像往常一样编辑

观察/意见

该插件几乎可以无缝运行。我发现它可以显着缩短开发时间，因为不必经常手动重新加载页面，即使用鼠标或键盘将焦点带到浏览器窗口并点击刷新......这次加起来特别是如果你做了很多HTML/CSS 并希望经常检查您的更改。

但是，如果您要执行任何主要的后端/Rails 或 Javascript，我建议您将其关闭，因为由于代码解释/处理，重新加载的时间可能会稍长一些，并且您会在中途遇到错误声明和 LiveEdit 决定在变量未定义或具有不正确的值时刷新。在这种情况下，您通过不必手动刷新而节省的时间可能会丢失(超过 1 倍)b/c 在服务器端或 JS 中创建/呈现内容的频率和时间在客户端上。