サービスポータルウィジェットのデバッグIssue 概要 この記事は、標準的なサービスポータルウィジェットのデバッグ手法のセットを示しています。情報提供とトレーニングの両方を目的としています。インシデントへの対応は、多くの場合「基本的なテクニック」セクションを理解するだけで十分です。高度にカスタマイズされたインスタンスでの優先度の高いインシデントの場合は、「高度なテクニック」をしっかり把握する必要があります。この記事のテクニックは、現在利用可能な ServiceNow のリソースから収集されたテクニックと、初めて文書化された新しいテクニックをまとめたものです。 この記事のすべてのサンプルは、「グローバルオブジェクトデモウィジェット」と呼ばれるウィジェットで実行されます。記事中のサンプルを実行する場合は、記事末尾の「サンプルテストの実行」セクションを参照して環境をセットアップする必要があります。 Resolution基本的なテクニック 1.JavaScript コンソールへのログ記録 console.log() 関数は、ブラウザの JavaScript コンソールにデータをログ記録します。この手法は、ウィジェットのクライアントスクリプトとサーバースクリプトで機能します。 例 グローバルオブジェクトデモウィジェットのサーバースクリプトの 3 行目と 16 行目を見ると、「input」および「data」オブジェクトがコンソールに記録されていることがわかります。 Chrome デベロッパーツールで JavaScript コンソールを開きます。プレビューペインの表示を更新すると、コンソールに以下の結果が表示されます。 入力オブジェクトは未定義で、データオブジェクトはコンソールに出力されます。 2.Chrome および Firefox で組み込みのデバッガ機能を使用する デバッガ機能はウィジェットのクライアントスクリプトで使用できますが、サーバースクリプトでは使用できません。デバッガ機能の追加は、コードにブレークポイントを挿入し、行ごとのステップ実行を可能にするようなものです。 例 ウィジェットのクライアントスクリプトの 23 行にコードデバッガを追加します。 Chrome デベロッパーツールを開きます。ウィジェットを保存し、プレビューペインの表示を更新します。[server.get({collectionName: "presidents"})] ボタンを押します。JavaScript の実行は「debugger」という単語で停止します。「response」オブジェクトのコンテンツを表示するには、デベロッパーツールの 14 行目にある「response」という単語にカーソルを合わせます。 コード内の次の行にステップインするには、下方向ボタンを使用します。JavaScript の実行を停止せずに続行する許可を付与するには、[スクリプト実行を再開] ボタンを押してください。 3.ウィジェットの「scope」オブジェクトをコンソールに記録します。 Control キーを押しながらウィジェットを右クリックします。[コンソールにログを記録：$scope.data] または [コンソールにログを記録：$scope] を選択します。唯一の違いは、スコープオブジェクト全体をコンソールに記録するか、スコープオブジェクトの data プロパティのみをログに記録するかです。 例 次の URL に移動します。https://.service-now.com/sp?id=demo_widget_example Control キーを押しながらウィジェットを右クリックします。[コンソールにログを記録：$scope.data] を選択します。Chrome デベロッパーツールを開き、コンソールにダンプされるオブジェクトを拡張し、$scope.data.prop1 の値が「Apple」であることを確認します。 高度なテクニック 以下で説明する高度なデバッグ手法は、変更を加えることができない本番インスタンスでのトラブルシューティングに非常に効果的です。以下のすべてのテクニックは、Chrome デベロッパーツールで実行します。 1.コンソールでウィジェットのスコープへの参照を作成する (「操り人形メイン」) この手法は、操り人形を使った人形劇になぞらえることができます。人形遣いは文字列のセットを使って操り人形 (ウィジェット) をアクティブにし、操作します。このケースでは、操り人形向けに 2 番目の文字列セットを作成し、JavaScript のコンソールからウィジェットをアクティブ化して操作します。 この手法では、次のことが行えます。 ウィジェットのスコープデータの変更ウィジェットのスコープ関数の実行ウィジェットのサーバースクリプトの再実行 JavaScript コンソールでウィジェットのスコープへの参照を取得する手順： ウィジェットを右クリックし、[検査] を選択します。デベロッパーツールの [要素] タブで、属性「widget=”widget”」を持つ要素をクリックします。現在検査している要素の上に、いくつかの要素があります。これは、ウィジェットの $0 スクリプティングツールを指しています。Javascript コンソールで、以下のコードを実行します。 var scopeRef = angular.element($0).scope(); ウィジェットのスコープデータを変更する JavaScript コンソールでウィジェットへの参照を取得すれば、ウィジェットのスコープ内にある任意のデータを取得し、変更できるようになります。値を変更した後、スコープで AngularJS $apply() 関数を実行し、変更をページに適用します。 例 コンソールでグローバルオブジェクトデモウィジェットへの参照を取得した後、次のコードを実行します。 scopeRef.data.prop1 = "Pear"; scopeRef.$apply(); コンソールからウィジェットのクライアントコントローラー関数を実行する ウィジェットのクライアントスクリプト (クライアントコントローラー) で定義されたすべての関数は、ウィジェットのスコープから利用できます。つまり、コンソールでウィジェットのスコープへの参照を取得すると、スコープオブジェクトのデータを変更できるだけでなく、どのクライアントコントローラー関数でも実行できます。 例 getPrettyData() 関数は、グローバルオブジェクトデモウィジェットのクライアントスクリプトで定義されます。コンソールにウィジェットのスコープへの参照が得られたので、JavaScript コンソールから関数を直接実行できます。 ウィジェットのサーバースクリプトの再実行 上記の手法でウィジェットのスコープにいくつかの変更を加え、コンソールでウィジェットへの参照を取得した上で、サーバーがクライアントコントローラーに送信されたデータを更新したときに何が起こるかを確認してみます。以下のようにしてコンソールからウィジェットのサーバースクリプトを再実行できます。 scopeRef.server.refresh(); 2.Chrome デベロッパーツールの [ソース] パネルからウィジェットクライアントスクリプトのデバッグと編集を直接実行する ページ上にあるすべてのウィジェットのクライアントコントローラースクリプトは、Chrome デベロッパーツールの [ソース] パネルにあります。下のスクリーンキャプチャを見ると、それらがすべて「トップ」ウィンドウの「(ドメインなし)」セクションにリストされていることがわかります。スクリプトをクリックすると、[ソース] パネルのコードエディターウィンドウでスクリプトが開きます。ほとんどのウィジェットクライアントコントローラースクリプトは .js としてリストされますが、その他はウィジェットの最上位 HTML 要素の id 属性値でリストされます。 デベロッパーツールでクライアントコントローラースクリプトを開けば、そこから直接デバッグを開始できます。 デベロッパーツールからクライアントコントローラーコードにローカルで変更を加える 例 次の URL に移動します。https://.service-now.com/sp?id=demo_widget_example Chrome デベロッパーツールを開きます。 デベロッパーツールの [ソース] パネルをクリックします。 global-objects-demo-widget.js ファイルを開きます。 7 行目と 8 行目の間に、次のコードを追加します。 alert("サーバースクリプトが更新されました"); スクリプトエディターウィンドウで右クリックし、[保存] を選択します。ページを更新しないでください。 ウィジェットの [server.refresh()] ボタンをクリックします。 デベロッパーツールから直接ウィジェットを変更できたことを示すアラートウィンドウがポップアップ表示されます。これは本番インスタンスのデバッグ時に役立つ、強力な手法です。 デベロッパーツール内からウィジェットクライアントコントローラーにブレークポイントを追加する デベロッパーツール内でクライアントコントローラーコードにアクセスする別の利点は、ブレークポイントを追加できることです。ブレークポイントは、[ソース] パネルのコードエディターウィンドウで行番号をクリックすると追加できます。 例 次の URL に移動します。https://.service-now.com/sp?id=demo_widget_example Chrome デベロッパーツールを開きます。 デベロッパーツールの [ソース] パネルをクリックします。 global-objects-demo-widget.js を開きます。 行番号 15 をクリックしてブレークポイントを追加します。 [server.get({collectionName: "presidents"})] ボタンをクリックします。 JavaScript の実行は 15 行目で直接停止します。 15 行目の [データ] にカーソルを合わせて応答を調査します。 コードエディターウィンドウ右側にあるボタンを使用して、JavaScript の実行を再開します。 サンプルテストの実行 この KB 記事には、「グローバルオブジェクトデモウィジェット」というサービスポータルウィジェットと「demo_widget_example」というサービスポータルページを含む更新セットが添付されています。デモページには、デモウィジェットのインスタンスが 1 つ含まれています。 更新セットをテストインスタンスにインポートする方法： アプリケーションナビゲーターで [取得した更新セット] をクリックします。ページ下部にある関連リンク [XML からの更新セットのインポート] をクリックします。[ファイルを選択] をクリックし、KB 記事からダウンロードした更新セットを探して [アップロード] ボタンを押します。[取得した更新セット] のリストから、新しくアップロードされた更新セットをクリックします。名前は「サービスポータルグローバルオブジェクトデモ」です。ヘッダーにある [更新セットのプレビュー] をクリックします。[更新セットの収容] をクリックします。 テスト実行時は、2 つのブラウザタブを開き、片方にウィジェットのコードとプレビューペイン、もう片方にデモページを表示すると便利です。 タブ 1：https://.service-now.com/sp_config?id=widget_editor&sys_id=072cfcbc4f04130050d128201310c7d7&spa=1 タブ 2：https://.service-now.com/sp?id=demo_page ウィジェットエディターでは、プレビューペインを有効にして、ウィジェットに加えた変更をテストできます。これを行うには、エディターの右上にある 3 本線のメニューをクリックし、[プレビューの有効化] を選択します。次に、目のボタンを使用してウィジェットプレビューのオン/オフを切り替えます。 すべてのテストが終了したら、加えた変更をすべて削除し、ウィジェットを再度保存してください。