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

Formaでのスクリプト開発生産性向上

先日開催されました技術者交流会にて、クライアントサイドスクリプトを利用したFormaDesignerの画面開発が難しいという声を多くいただきました。 そこで、今回のブログ記事では、交流会の場で挙がった …

no image

セッション管理モジュールのご紹介

この記事では、2017 Springでリリースされたセッション管理モジュールをご紹介させていただきます。 また、2014 Spring から 2016 Winterまでのバージョンでセッション管理モジ …

no image

J2EEフレームワークに関するFAQ

※下記内容は、過去のintra-mart(Ver4.3以前)に関する内容です。最新のintra-martでは、異なる情報であることがありますので、ご注意ください。 J2EEフレームワークに関する技術的 …

no image

ISPの小技

今回は、ISPのスケジュール機能の小技に関して紹介します。 以外に知られていない機能で、Ver7.0、7.1で、スケジュールのコピー機能があります。 マウス操作だけでスケジュールのコピーができますので …

no image

IM-JSDocとQuick Sequence Diagram Editorの連携

こんにちは。開発本部の齊藤悠です。 今回は、業務スケルトンのTipsということで、完全に隠し機能となってしまった機能を紹介します。 —IM-JSDocとQuick Sequence Diagram …