Forguncyでアプリを開発していて、
「処理が思った通りに動かない」「SQLの結果がおかしい」と感じたことはありませんか?

Forguncyでは、ブラウザの開発者コンソールを使って、実行された処理内容やSQL、その実行結果を確認できるデバッグ機能があります。

本記事では、デバッグ時に確認できる内容の一覧と、どこを見れば何が分かるのかを整理して解説します。

このページでは以下のことがわかります!

  • Forguncyのデバッグ機能で確認できる内容の全体像
  • ブラウザ開発者コンソールで見るべきポイント一覧
  • 処理内容・SQL・実行結果を確認する具体的な見方

このページの想定読者

  • Forguncyでアプリを開発・運用している方
  • 動作不良やSQLの不整合を自分で切り分けたい方
  • 「とりあえず動かす」から一歩進んで、原因を把握しながら開発したい方

このページの情報はV10以降で動作確認済みです。

「デバッグ機能」で何ができるのか

Forguncyのデバッグ機能を使うと、アプリ操作時に 内部で実行されている処理の内容をブラウザ上で確認できます。

具体的には、ブラウザの開発者コンソールを通して、
以下のような情報を確認することが可能です。

デバッグ機能で確認できる主な内容

  • 実行されたコマンドの処理内容
    • ボタン操作や画面遷移時に、どのコマンドが実行されたか
    • 処理が最後まで実行されているか/途中で止まっていないか
  • サーバーに送信されているSQL
    • 実行された SELECT / INSERT / UPDATE / DELETE 文
    • WHERE 条件やパラメータの実際の値
  • SQLの実行結果
    • 取得できたデータ件数
    • 実際に返ってきたデータの中身
  • エラーや警告情報
    • SQLエラー
    • 処理実行時の例外や警告メッセージ
  • 画面項目や変数の値
    • フォームや画面から送信された値
    • NULL や空文字になっていないかの確認

これらを確認することで、
「なぜこの動きになっているのか」「どこで想定とズレているのか」を
感覚ではなく、事実ベースで切り分けられるようになります。

事前準備:デバッグを見るために必要なこと

事前準備は非常にシンプルです。

  1. Forguncy Builderでアプリをデバッグ実行する
  2. Webブラウザ上(Chrome / Edge )の 開発者ツールを開く
    • Webブラウザ上でF12キーを押す
    • もしくは右クリック→検証(Chrome)、右クリック→開発者ツールで調査する(Edge)

以下のような表示になったら準備完了です。

開発者ツールの基本構成

開発者ツールを開くと様々な情報が一気に表示されるかと思います。

Forguncyのデバッグで主に確認するのは「コンソール」と「ネットワーク」の2つだけです。

Console タブ

Console タブでは、処理実行時のログやエラー情報を確認できます。

主に以下のような内容が表示されます。

  • コマンド実行時のログ出力
  • エラーメッセージや警告
  • 処理が途中で止まっていないかの確認

「ボタンを押しても何も起きない」「処理が動いていない気がする」
といった場合は、まず Console タブを確認すると状況を把握しやすくなります。

Network タブ

Network タブでは、ブラウザとサーバー間の通信内容を確認できます。

Forguncyのデバッグでは、特に以下の点が重要です。

  • 実行された SQL
  • サーバーに送信された リクエスト内容
  • SQLの 実行結果(レスポンス)

ボタン操作や画面操作を行うと通信が発生し、
その中に どんなSQLが流れ、どんな結果が返ってきたか が記録されます。

「SQLの条件が想定と違う」「結果が0件になる」
といったケースでは、Network タブを見ることで原因を特定しやすくなります

デバッグで確認できること・見る場所まとめ

では、具体的にどこをどう見たら何がわかるのか?についてまとめていきます。

今回はForguncyの弁当予約管理テンプレートを利用します。

テンプレートをデバッグ実行して、開発者ツールを開きながらご覧ください。

①実行されたコマンドの流れが分かる

開発者ツールを開いた状態で、アプリを操作すると、上記のようにログが表示されます。

どのコマンドがどの順番で実行されたか、パラメーターの値の推移などが確認できます。

②実行SQLが分かる

一部のSQLについてはここから見ることもできます。

弁当予約では確認できませんでしたが、サーバーサイドコマンドを利用していた場合、実行SQLも確認できます。

以下は公式ヘルプの記載です。

https://docs.forguncy.com/v10/serversidecommandslog.html

③データの取得結果が分かる

ネットワークタブを開いて、「GetTableDataWithOffset」という項目をクリックすると、データを取得した結果が確認できます。

上記は弁当のメニュー情報がしっかり取得できていることが確認できますね。

おわりに

デバッグは難しいものではなく、「何が起きているかを確認する手段を知っているかどうか」の差です。

Forguncyのデバッグ機能とブラウザ開発者コンソールを使えば、アプリの動きをブラックボックスにせず、自分で追えるようになります。

困ったときは、まず Console、次に Network
この順番を習慣にしてみてください。

なお、本機能は基本的にBuilderのデバック実行の時に表示され、発行されたアプリでは見えないのでご安心ください。

【著者】

sasayaki@メシウス社員

すべてのシゴトをデータで繋ぐ!

【メシウス社員です】
Forguncyを作ってる側の人間ですが、このコミュニティでは「いちユーザー」としても楽しみながらお邪魔しています!公式サポートではないですが、知ってることは共有したり、相談に乗ったりできたら嬉しいです。
※あくまで「個人の意見」なので、製品への要望や不具合の報告は、公式のサポート窓口も併せてご利用ください!