JavaScriptのデバッグ
JavaScriptコードのデバッグ方法
Chromeデベロッパー・ツール(またはお使いのブラウザーの開発者ツール)を利用して、Retoolで記述したJavaScriptコードの検査、ブレークポイントの設定およびデバッグを容易に行うことができます。
JavaScriptコードの検索
query2
という名前のRun JS Code
クエリーがあるとします。最初にやるべきことは、開発者ツールを開くことです。
今回の例ではChromeを使用します。ブラウザーによってキーバインドが異なる場合がありますが、今回の手順は同様に機能します。
- Chromeでコンソールを開くには、Cmd + Option + J(Macの場合)またはCtrl + Shift + J(Windowsの場合)のキーボード・ショートカットを使用します。別の方法として、Webページ上で右クリックしてから「検証」をクリックすると、開発者コンソールを開くことができます。
-
ページが読み込まれてから少なくとも1回はクエリーまたはTransformerを必ず実行します。これにより、RetoolはChromeに対しJavaScriptコードを記録し、それに特定のファイル名を設定するように指示することができます。まったく実行したことがなければ、JavaScriptを見つけることはできません。
-
ファイルを検索します。Cmd + P(Macの場合)またはCtrl + P(Windowsの場合)を押します。検索バーが開いたら、
{query_name}.js
を検索します。例えば、Retoolでquery2
という名前を付けたクエリーであれば、query2.js
を検索します。
Retoolが実行するJavaScriptコードを検索できました。
JavaScriptコードのデバッグ
Retoolが実行しているJavaScriptを見つけたら、行番号をクリックして、ブレークポイントを設定するなど、通常どおりにデベロッパー・ツールを使用することができます。また、Retoolで作成したJavaScriptコード内にdebugger
と書くことでも、同様のことを行うことができます。
ブレークポイントを設定したら、クエリーを再実行してみてください。注意: Run
をクリックしたときだけでなく、Retoolがこのコードを実行したときにはいつでも、このブレークポイントが作動します(すなわち、このクエリーを別のクエリーがトリガーした場合やテーブルの行を選択したときにも、ブレークポイントにヒットします)。
デバッグが中断/停止している状態なので、コンソールを試してみます。Retoolのクエリー・エディターで書いた文をデベロッパー・ツールのコンソールで実行することができるはずです。
Updated almost 4 years ago