開発Blog

Formaスクリプトのデバッグについて

投稿日:2015-08-04 更新日:

今回のブログ記事では、開発したスクリプトをデバッグするためのTipsを紹介します。

TipsはクライアントサイドJavaScriptの開発一般におけるテクニックを紹介するものであり、製品サポートの対象外となります。

目次

  1. Chromeデベロッパー・ツール
  2. debuggerステートメントを利用したデバッグ
  3. consoleオブジェクトを利用したログ出力
  4. コンソールを利用したスクリプトの即時実行
  5. 注意事項

1. Chromeデベロッパー・ツール

  • ブラウザの開発者ツールを利用することで、Formaの画面に読み込まれるスクリプトについても、ステップ実行を行うことが可能です。
  • 開発者ツールはいくつか選択肢がありますが、今回はChromeデベロッパー・ツールを利用した手順をご紹介します。
  • Chromeデベロッパー・ツールでは、スクリプトのソースコード上にブレークポイントとなるステートメントを記述することで、指定した箇所からのステップ実行・各変数のデータの確認等が簡単に行えます。

2. debuggerステートメントを利用したデバッグ

ブレークポイントの設置

  • ステップ実行したいソースコードの箇所にdebuggerステートメントを記述します。
  • Chromeデベロッパー・ツールの起動中であれば、設置された箇所からデバッグが自動で開始されます。
  • debuggerステートメントの詳細についてはこちら を参照してください。

サンプルコード

ステップ実行

デバッグを開始します

  1. Google Chromeから対象のアプリのURLを表示します。

  2. Google Chromeから対象のアプリのURLを表示します。

  3. Chromeデベロッパー・ツールを起動します。

  4. Chromeデベロッパー・ツールを起動します。

    • ショートカットキーを押下します。
      • Windowsの場合 : F12キー
      • Macの場合 : Command+Option+Iキー
    • もしくは、メニューから「その他のツール」-「デベロッパー ツール」を押下します。

  5. スクリプトが実行される操作を実施します。
  6. Chromeデベロッパー・ツールがデバッグモードとなり、Sourcesパネルが表示されます。ブレークポイントが設置された箇所がフォーカスされます。

  7. Chromeデベロッパー・ツールがデバッグモードとなり、Sourcesパネルが表示されます。

変数を操作します

  1. 変数の状態を確認します。
    • Scopeには、ローカル・クロージャー・グローバルの各スコープの変数の内容が表示されます。
    • 配列の各要素・オブジェクトの各プロパティを確認することも可能です。


    変数の状態を確認します。

  2. 変数の状態を変更して動作確認します。
    • Scopeに表示された各変数の値を変更することで、後続の処理を変更した状態で実行することが可能です。


    変数の状態を変更して動作確認します。

  3. 変数をブックマークして監視します。
    • 変数をブックマークすることで、Watch Expressionsに常に表示された状態となります。


    変数をブックマークして監視します。

  4. CallStackには、スタックに積まれた呼び出し元の関数の情報が表示されます。関数を選択することで、Scopeに表示される変数が切り替わります。

ステップ実行します

  1. Sourcesパネルの上部に位置する3つのボタンより、それぞれステップイン/ステップオーバー/ステップアウトが実行できます。

  2. ステップ実行

  3. ステップ実行中のソースコードにチェックを付けることで、debuggerステートメントの記述箇所以外にもブレークポイントを設置することが可能です。

3. consoleオブジェクトを利用したログ出力

  • ステップ実行の他に、consoleオブジェクトを利用したログ出力方法をご紹介します。
  • consoleオブジェクトには複数のメソッドが用意されていますが、今回はよく利用されるlogとtraceをご紹介します。
  • consoleオブジェクトの詳細についてはこちら を参照してください。

console.log(args)

  • 引数に出力したい対象を指定することで、Chromeデベロッパー・ツールのコンソールにその内容が出力されます。

サンプルコード

ログ出力結果

ログ出力結果

console.trace()

  • 実行した時点でのスタックトレースが、Chromeデベロッパー・ツールのコンソールに出力されます。

サンプルコード

ログ出力結果

ログ出力結果

4. コンソールを利用したスクリプトの即時実行

  • ログ出力に続いて、Consoleパネルでインタラクティブにスクリプトを実行する方法をご紹介します。

Consoleパネルの表示

  • ショートカットキーを押下します。
    • Windowsの場合 : Ctrl + Shift + Jキー
    • Macの場合 : Command+Option+Jキー
  • もしくは、メニューから「その他のツール」-「デベロッパー ツール」を押下し、Consoleパネルを選択します。

スクリプトの実行・確認

  • Consoleパネルのコマンドイランからスクリプトを入力します。
  • 複数行入力する場合には、Shift + Enterキーで改行します。

  • スクリプトの実行結果確認1

  • 結果がコンソールに出力されます。

  • スクリプトの実行結果確認2

  • スクリプトは実際にブラウザ上で実行されるため、表示している画面の状態の変更も可能です。

5. 注意事項

  • 本記事で紹介したdebuggerステートメント・consoleオブジェクトはデバッグ用の記述のため、本番環境にデプロイするソースコードからは除外してください。
  • Chromeデベロッパー・ツールの利用方法は、Google Chromeのバージョンによって若干異なりますが、本記事ではGoogle Chrome 44にて動作確認を行っております。

-開発Blog
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Facadoとintra-martページベース開発モデルとの連携

  ※下記内容は、過去のintra-mart(Ver4.3以前)に関する内容です。最新のintra-martでは、異なる情報であることがありますので、ご注意ください。   リッチク …

no image

FormaDesigner「正方形/長方形」を使って帳票っぽい画面を作る♪

FormaDesignerのパッチ1が1/27にリリースされました。 そのパッチ1で追加された画面アイテム「正方形/長方形」を使って、帳票っぽい画面を作ってみました。     上記 …

no image

最近のトラブル事例から - Oracle11でDATE型が正しく表示できない –

毎年、4月になると、年度末で開発を終えたシステムが運用を開始して、さまざまなお問い合わせがくる季節で、今年も、例年と同じく、さまざまなご相談を弊社サポートサイトを中心に対応させていただきました。そこで …

no image

EWS2017 「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」講演内容のご紹介

この記事では、EWS2017 Technology Track「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」での講演内容 …

no image

log4jdbcを使ったSQL(JDBC)のトレース

こんにちは、開発本部の榎本です。 開発中にデータベースに対してどのようなクエリが流れているのか確認してみたいことありませんか? 以前、山寺さんが紹介していたResinのログで取得するなど、いろいろな方 …

まだデータがありません。

RSSRSSRSSRSS