WebStormでDenoのFreshなデバッグ設定
Denoで公開されたフルスタックフレームワークFresh
Freshなフレームワークが公開されたということで、早速触ってみることにしました。
とはいえ、JS/TSを扱うためになるべくデバッガーのブレークポイントで変数の中身をみたり、挙動を確認しながら作業をしたい。
そしてPHPでは強力なデバッガーXdebugに頼り切って開発しているため、正直デバッガーがないと開発できない体になってしまっています。
そんなわけで、まずはWebStormでデバッガーが動くようにしてみます。
準備
Denoのプラグインをインストールし、Denoの設定します。
設定方法
Denoの素のコマンドを使う
Run/Debug Configurations → +ボタンからDenoを選択肢し、下記を設定します。
※スクショ用にファイルパスを省いていますが、ファイルパスはフルパスで設定
Command部分はこうなります。
run --allow-env --allow-read --allow-net --allow-run --allow-write
- デバッグボタンからデバッグを行う場合、
--inspect-brkオプションが自動で付与される - デバッグでは
--watchオプションは使用できない。そのため--watchはここに記載できないので別途設定を用意する必要がある -
Fileにはbootstrapの役割っぽいdev.tsを指定
ここで設定するコマンドは、deno.jsonにtasksとして登録してある設定を使用しています。
これでブレークポイント使用したデバッグができるようになります。
注意点
いざ、動作確認。
Freshの新プロジェクト作りたてであればカウンターモジュールが入っているので、このファイルislands/Counter.tsxにブレークポイントを仕掛けます。
さて、ここで残念なお知らせです。
islands/配下は、最初のページアクセス時はブレークポイントが動作します。Freshは要求発生時にレンダリングするJust-in-timeレンダリングため、この動作は理にかなっています。
（Just-in-timeレンダリングの詳細は理解できてないですが、おそらくサーバーサイドレンダリングのようなもの？）
しかしislandsは実際のところサーバーサイドレンダリングを行わないプログラム、つまりユーザーのインタラクティブ動作のためのJavaScriptとして出力されています。そのため、このJSの挙動を確認するためのデバッグはこの手法ではできません。
islandsのJSのデバッグを行うためには、ソースマップが必要なのですが出力方法が現状不明です。ソースマップの出力方法やその他デバッグ方法をご存じの方、ご連絡いただけると大変嬉しいです。
終わり
islandsで出力するJSのデバッグ方法は不明ですが、ひとまずサーバーサイドレンダリングが行われる箇所に関してはデバッグできるようになりました。
次回はFreshのプロジェクト作成時のサンプルコードを少し確認してみます。
Discussion