開発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

intra-mart Advent Calendar 2013 第23日:iWP/iAFでJSP1ファイルだけで、任意の画面を呼び出す方法

この記事は、intra-mart Advent Calendar 2013 第23日の記事です。 Accel Platformの機能紹介を行ってきたintra-mart Advent Calender …

no image

iCEC2011 IM-Workflow

4/26に開催された「intra-mart Certified Evangelist Conference 2011(iCEC2011)」での講演資料を公開します。 IM-Workflow 04_IM …

no image

統合検索モジュール(ConceptBase連携)について

※下記内容は、過去のintra-mart(Ver4.3以前)に関する内容です。最新のintra-martでは、異なる情報であることがありますので、ご注意ください。 ベースモジュールver2.2(または …

no image

intra-martで作成したアプリケーションに対するプログラムパスの張り方について

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

no image

画面アイテム開発中♪

IM-FormaDesigner パッチ2のリリースに向けて現在、続々と画面アイテムを開発しております。 パッチ2では、以下の11個の画面アイテムを提供できる予定です。 カテゴリ アイテム名 概要 I …

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

RSSRSSRSSRSS