3

我在 Windows 上使用 Rubymine 5.4，它总体上非常棒，与 Visual Studio 一样好 95% 作为 HTML / CSS 编辑器，但有一些例外......主要是缺乏实时预览 /WYSIWYG 能力，即我输入我可以看到生成的预览直播（除了VS，DreamWeaver 也有这个功能）。我似乎在 IDE、帮助或任何 Google/Stack 搜索中都找不到类似的东西。

需要明确的是，我正在寻找一种在 RubyMine 中具有分屏视图的方法，我可以在其中在一个窗格/选项卡中编辑我的 HTML / CSS，并查看它在浏览器中的样子的实时预览另一个选项卡/窗格。

理想情况下，这将是：

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

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

4

1 回答 1

5

感谢@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（在设置的搜索框中输入“插件”）
  3. 单击Install Plugin from disk列表底部的按钮
  4. 导航到您下载插件的位置并选择/打开它
  5. 通过在插件列表中选中它来激活
  6. （您可能必须）重新启动 RubyMine
  7. 重新启动后，转到menubar > View > LiveEdit（然后将被检查）
  8. 在此处下载适用于 Chrome 的 JetBrains IDE 浏览器扩展：https ://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon
    • Chrome 扩展支持在 IDE外部、外部 Chrome 窗口中的所见即所得/实时“LiveEdit”和实际 RubyMine IDE 内部的JavaScript 调试
    • 我相信 FireFox 也有一个扩展，我相信它也支持通过 IDE 进行 Javascript 调试。但是，我不确定它是否像 Chrome 扩展一样支持 LiveEdit
  9. （启动）调试您的项目
  10. 像往常一样编辑

观察/意见

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

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

于 2013-09-01T16:13:14.110 回答