Volt Introduction and Docs

デバッグ

ソースマップ

Volt は (Opal によって) ソースマップがデフォルトで有効になっています。そのため、Chrome や Firefox の開発者ツールでスタックトレースを確認することが可能で、Ruby のファイル名と行番号が表示されます。ファイル名をクリックすることで、オリジナルの Ruby ファイルを確認することができます。また、通常の JavaScript の場合と同じように、ブレークポイントを設定してステップ実行することが可能です。ブラウザ内の irb も動作します。

Volt 0.9.5.pre3 以降では、development モードではソースマップがデフォルトで有効になっています。もしこれを無効にしたい場合は以下のようにします:

MAPS=false bundle exec volt server

パフォーマンス上の理由から、Opal と Volt のコードはマッピングされません。これはページの読み込み時間の短縮のためです。すべてのファイルに対してマッピングを有効にしたい場合は以下のようにします:

MAPS=all bundle exec volt server

フレームワークのブラックボックス化

ソースマップを利用するとき、ステップ実行の際に大量の余計なファイルがスタックトレースに現れることがあります。フレームワークのブラックボックス化によって、Volt や Opal をネイティブコードのように扱うことができるので、それらのファイルを無視することができます。以下のブラックボックスのチェックを追加すれば、Volt と Opal がブラックボックス化されます。

/assets/volt/volt/app\.js$|/assets/js/volt_watch\.js$|/assets/js/volt_js_polyfills\.js$