IntelliJ IDEA で coffeescript をデバッグする設定メモ

IntelliJ IDEA で coffeescript をローカルデバッグするまでのメモ。

環境

• OSX 10.8.3
• nodebrew 0.6.2
• node v0.10.4
• CoffeeScript version 1.6.2 ← source maps を作成するには 1.6.1 以上が必須！
• IntelliJ IDEA 12.1.1 ← node.js & coffeescript プラグイン導入済み、node.js & coffeescript PATH 設定済み

設定手順

まず、ざっくりと coffeescript のデバッグどうやるかというと、オリジナルの coffeescript から Source Maps と JavaScript ファイルを作成、その JS ファイル を Run/Debug Configurations で設定して実行する、といった感じ。
あ、もちろん、Breakpoint は coffeescript の CodeEditor 内で設定しますです。
基本的には Debugging CoffeeScript を参照しながらやれば大丈夫だったのですがわりとハマったのでメモ。

File Watchers

まず、File Watchers の設定をしないといけねーです。
Transpiling CoffeeScript to JavaScript 参考です。
IntelliJ IDEA > Preferences > File Watchers （Command ＋ A で File Watchers のがはやいかもね）で Project Settings の File Watchers をひらく。
以下よりただ実行したいだけのときは、CoffeeScript を選択、CoffeeScript Source Map を選択とある。

If you are going to run your CoffeeScript without debugging, choose CoffeeScript. Your code will be just translated to JavaScript.

If you are going to debug your code, choose CoffeeScript Source Map. As a result, the source maps will be created.

デバッグしたいので CoffeeScript Source Map かなっと思ったけどデバッグのときは両方とも選択します。

で、選択云々の前に CoffeeScript や CoffeeScript Source Map がそもそもないので下部の + ボタンから追加します。

CoffeeScript のほうは、コンパイラとして設定するので標準のよいです。

Name	Description	File type	Scope	Program	Arguments	Working directory	Output paths
CoffeeScript	Compiles .coffee files into .js files	CoffeeScript Files	Project Files	/Users/user/.nodebrew/current/bin/coffee	--compile $FileName$	$FileDir$	$FileNameWithoutExtension$.js

CoffeeScript Source Map のほうがちょっとハマりまして、Source Maps を出力できる設定にしてやる必要があり、標準の coffeescript ではなかったのですよ…。
IDE 関係なく、CLI な感じでやるばあい（というかここおさえてから IDE やるべきだよな）はこちらから。Node.js＋CoffeeScript でソースマップを使ってデバッグを楽にする方法 - てっく煮ブログ

Name	Description	File type	Scope	Program	Arguments	Working directory	Output paths
CoffeeScript Source Map	Uses Redux compiler to generate source map for .coffee file	CoffeeScript Files	Project Files	/Users/user/.nodebrew/node/v0.10.4/lib/node_modules/coffee-script-redux/bin/coffee	--source-map -i $FileName$	$FileDir$	$FileNameWithoutExtension$.js.map

Environment variables はどちらも設定していませんので省略してます。オプションもデフォルトのままです。
ファイル変更するたびに tasks 動かないようにもできるはずですがわたしはうまくいってないので Immediate file synchronizastion もチェックしたままです。

Watchers の設定はこれでいけるはずです。

File Watchers で出力させる

適当に coffeescript のファイルを作成してコードを書いてみます。
自動でか、設定によっては Command + S の File ＞ Save All のタイミングで tasks が実行されます。
結果、hoge.coffee の左側に▷みたいな三角ができます。
開くと hoge.js と hoge.js.map ができとりますです。
できてなかったらミスっとります。

hoge.js.map の中身はのぞいてみとくといいかもです。
わたし、coffee-script-redux ではなく普通の coffee を指定していて中身が coffee> になっていました。これはダメですよ。

Run/Debug Configurations

ここまできたらもう少し。
Run/Debug Configurations から Node.js で設定作成。
ポイントになるのは Path to Node App JS File でオリジナルの coffeescript から生成された javascript を指定すること。
coffee とか source maps ではないことに注意です。
また、Run with CoffeeScript plugin をチェックいれないです。 ここまでやってOK。
あとは元の coffeescript で Breakpoint を設定してみて、今設定した設定名を選択、虫のボタン（デバッグボタン）をクリックするとデバッグできます。

終わり。

そのうち、coffee-script-redux も coffeescript 本体に統合されるんでしょうかね。