如何使用 WebStorm IDE 在 Meteor 应用程序中调试 CoffeeScript

Posted

技术标签:

【中文标题】如何使用 WebStorm IDE 在 Meteor 应用程序中调试 CoffeeScript【英文标题】:How can I debug CoffeeScript in my Meteor app using the WebStorm IDE 【发布时间】:2014-09-13 07:38:32 【问题描述】:

我可以使用 javascript 使用此问题 (How can I debug my Meteor app using the WebStorm IDE?) 中的说明在 WebStorm 中进行 Meteor 调试。

但是,我似乎无法在 coffeescript 文件中设置断点。

可以这样做吗?

【问题讨论】:

【参考方案1】:

@Sameer Shemma

为了让你的技巧发挥作用,你需要:

只添加这个新文件夹 .coffeejs 并更改单行 您在 watcherTasks.xml 文件中突出显示或 用你的替换我的整个watcherTasks.xml 文件?

我尝试了第一种可能性,WebStorm 仍然不会停止在 .coffee 文件中放置的大多数断点。

第二个我不知道在我的例子中 name 属性的 "/usr/local/bin/coffee" 路径值的对应关系是什么(Windows 7,Meteor 1.4.1.2,CoffeeScript 包 1.11.1_1,WebStorm 2016.2.3),但在不改变这一点的情况下,WebStorm 仍然不会停止最多断点放置.coffee 文件。

另外,您的技巧是否需要在我正在使用的 Meteor CoffeeScript atomosphere 包 1.11.1_1 中可能包含的编译器之外安装 CoffeeScript 文件监视程序和/或独立编译器?

这是我当前的 watcherTasks.xml 文件:

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="ProjectTasksOptions">
    <TaskOptions isEnabled="true">
      <option name="arguments" value="--output $ProjectFileDir$/.coffeejs/ --map --compile $FileName$" />
      <option name="checkSyntaxErrors" value="true" />
      <option name="description" value="Compiles .coffee files into .js files" />
      <option name="exitCodeBehavior" value="ERROR" />
      <option name="fileExtension" value="coffee" />
      <option name="immediateSync" value="true" />
      <option name="name" value="CoffeeScript" />
      <option name="output" value="$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map" />
      <option name="outputFilters">
        <array />
      </option>
      <option name="outputFromStdout" value="false" />
      <option name="program" value="$ExecutableByFileExt$" />
      <option name="scopeName" value="Project Files" />
      <option name="trackOnlyRoot" value="true" />
      <option name="workingDir" value="$FileDir$" />
      <envs />
    </TaskOptions>
  </component>
</project>

【讨论】:

【参考方案2】:

我终于明白了。

您已经添加了一个文件夹(在我的示例中为“.coffeejs”)来存储转译的 js 和地图文件,您可以随意命名它,但请记住以“.”开头的文件夹名称让 Meteor 的打包器忽略其中的文件。

然后编辑 watcherTasks.xml 文件,您将在项目根目录的 .idea 文件夹中找到该文件,并将“arguments”值更改为以下内容:

--output $ProjectFileDir$/.coffeejs/ --map --compile $FileName$

用咖啡享受流星! :)

【讨论】:

您不应该将文件监视程序与流星一起使用。只需使用“咖啡”流星包即可享受。 @anstarovoyt,没有这个巫术,webstorm 不会在咖啡断点上中断。不幸的是【参考方案3】:

我摆弄了一段时间,但没有取得任何巨大的成功。据我所知,为了让 WebStorm 支持咖啡脚本断点,它需要自己生成转译的 js 和地图文件……这会破坏流星,就像它自己的咖啡脚本编译一样。

最后,我得到的最接近的是:

    使用节点调试器选项运行流星:

    $ NODE_OPTIONS="--debug=47977" 流星

    在 Webstorm 中设置 node.js 远程调试配置,将其指向同一端口 (47977)。

    启动调试会话

    在调试器的“脚本”选项卡中显示的转译 js 文件中设置断点。令人困惑的是,在这些文件上设置断点时,我的 WebStorm (8.0.4) 版本并没有在装订线中显示通常的红色圆圈图标……但它确实设置了断点并在那里中断。

所以不理想,但总比没有好,比使用节点检查器更方便!

【讨论】:

@jonathanmofatt 我试过了,但是 Meteor 仍然因为 Webstorm 制作的 JS 文件而中断

以上是关于如何使用 WebStorm IDE 在 Meteor 应用程序中调试 CoffeeScript的主要内容,如果未能解决你的问题,请参考以下文章

如何在 WebStorm 中抑制 TS2322 警告?

使用IDE之webstorm

IDE02 Webstorm基础配置

使用PhpStorm或WebStorm作为electron IDE

webstorm储存在ide和projectdefault

JetBrains IDE(WebStorm、IntelliJ、Pycharm 等)没有为 Bitbucket 保存密码