ReScript のデバッグ

Native

目標

コンパイル済み JavaScript にブレークポイントを設定し、実行をステップ実行することで ReScript コードをデバッグします。

前提条件

  • JavaScript Debugger プラグイン --- WebStorm にはバンドル済み。IntelliJ IDEA Ultimate では別途インストール可能。Community Edition では利用不可。

  • Node.js --- コンパイル済み JavaScript の実行に必要

手順

1. Ensure the build is running

コンパイル済み JS ファイルを最新の状態に保つため、ReScript ビルドを watch モードで開始します:

  • ReScript Build の Run Configuration を使用するか、

  • ターミナルから rescript build -w を実行する

下部のステータスバーウィジェットに現在のビルド状態（成功/エラー/警告）が表示されます。

2. Open the compiled JavaScript

.res ファイルを開いた状態で、Alt+Shift+J を押すか（または Tools > ReScript > Open Compiled JS を使用して）、対応するコンパイル済み JavaScript ファイルを分割エディタで開きます。

これにより、実行時に実際に実行されるコードを正確に確認できます。

3. Create a JavaScript Debug configuration

  1. Run > Edit Configurations を開く

  2. + をクリックし、JavaScript Debug（ブラウザアプリの場合）または Node.js（サーバーアプリの場合）を選択する

  3. エントリポイントを設定する:

    • Node.js の場合: JavaScript ファイルのパスを設定する（例: src/Main.res.js）

    • ブラウザの場合: 開発サーバーの URL を設定する（例: http://localhost:5173）

4. Set breakpoints in the compiled JS

コンパイル済みの .res.js ファイルを開き、ガターをクリックしてブレークポイントを設定します。コンパイル済み JS は ReScript のソース構造を忠実に反映しているため、対応するコードを簡単に見つけることができます。

// src/App.res.js
function make(props) {
  var count = React.useState(function () {  // <-- set breakpoint here
    return 0;
  });
  // ...
}

5. Run the debug configuration

Shift+F9 を押して（または Debug ボタンをクリックして）デバッグを開始します。デバッガはブレークポイントで停止し、以下の操作が可能です:

  • Step Over（F8）--- 現在の行を実行する

  • Step Into（F7）--- 関数呼び出しの中に入る

  • Evaluate Expression（Alt+F8）--- 実行時の値を検査する

  • View Variables --- Debug パネルでローカル変数とクロージャ変数を確認する

期待される結果

コンパイル済み JavaScript のブレークポイントで実行を一時停止し、変数の値を検査し、コードをステップ実行して問題を診断できます。

ヒント

  • コンパイル済み JS は ReScript の関数名と変数名を保持しているため、対応関係が直感的です

  • JS Preview ツールウィンドウ（View > Tool Windows > ReScript JS Preview）を使用すると、別ファイルを開かずにリアルタイムの横並びビューを表示できます

  • 現在 ReScript コンパイラはソースマップを生成しないため、ブレークポイントは .res ソースではなくコンパイル済み JS に設定する必要があります