JavaScript デバッグのヒント パートIII – 高度な Google Chrome Developer Tools

Noah Sager

<\/HEAD>このブログ投稿は、JavaScriptのデバッグのヒントとコツのシリーズの第3回目です。以前のセグメントについては、 JavaScript Debugging Tips Part I <\/A><\/STRONG> および JavaScript Debugging Tips Part II<\/A> <\/STRONG><\/EM>をご覧ください。<\/EM>

過去2回のEsri SupportブログでのJavaScriptデバッグヒント投稿では、Google Chrome Developer Tools<\/A><\/STRONG>の一部としてNetworkタブとConsoleタブを見てきました。ほとんどの最新ブラウザには何らかの開発者ツールがありますが、ここでは例としてChromeを使用します。

このシリーズの第3回目のブログ投稿の目的は、より高度なヒントとコツを紹介し、JavaScriptコードのデバッグとトラブルシューティングをより効果的に行えるようにすることです。具体的には、コンソールへのメッセージ強化、実行時に指定された条件を使ったブレークポイント設定の改善、およびブラックボックス化という方法を用いたSourcesタブでのブレークポイントステップ処理の効率化に焦点を当てます。パート1: Console.table<\/STRONG><\/SPAN>

Console.logは主なデバッグ関数ですが、この関数の出力は（特に大量のデータを見る場合）少し読みづらいことがあります。コンソールログメッセージを強化し、データをより簡単に表示する方法の一つは、オブジェクトのリストをテーブルとして表示することであり、これはconsole.table <\/STRONG>関数を使って実現されます。この関数は必須引数として配列またはオブジェクトを取り、追加でオプションパラメータを1つ取ることができます。配列内の各要素がテーブルの行となります。

次にConsole Tableサンプル<\/A><\/STRONG>を見てみましょう。

1. ショートカットキー（Windows: Control + Shift + I、Mac: Command + Option + I）でChrome Developer Toolsを開くか、ブラウザ右上隅の3つの灰色縦ドットをクリックし、「その他ツール」>「Developer tools」を選択します。

2. コンソールタブを選択します。

3. サンプルアプリケーションで「Perform Query」をクリックします。これはコネチカット州内のすべての郡を表示するクエリタスクを実行します。コードは結果を下記のようにテーブルで表示するためにconsole.table<\/STRONG>を使用しています。<\/A>

console.table<\/P><\/DIV>

テーブル内の各行は特定の郡に対するすべての属性を示しています。次に、console.logとconsole.tableを比較するためにconsole.log<\/STRONG>を使用します。この関数はオブジェクト配列が含まれる行を出力します。

<\/A>

console.log<\/P><\/DIV>

配列を展開すると、オブジェクトがリスト形式で表示されます。

<\/A>

console.log 展開後<\/P><\/DIV>

属性を見るにはリスト内のオブジェクトを展開する必要があります。

<\/A>

属性付きで展開された console.log<\/P><\/DIV>console.logでは単一フィーチャーの属性にアクセスできますが、console.tableではすべてのフィーチャーのすべての属性を一度に見ることができます！以下の画像は両方の関数がコンソールウィンドウに表示されている様子です。

<\/>

ブレークポイント式

5. 「Contact:」に「test」と入力し、「Update incident info」をクリックすると、ブレークポイントに到達し、アプリケーションが一時停止します。 条件が満たされました

これらの条件付きブレークポイントは、データが正しくサーバーに送信されていることを確認したいテスト時や、エラー処理コードに任せるのではなく、関心のあるオブジェクトを検査するためにアプリケーションを一時停止させたい場合に役立ちます。パート3：ブラックボックス化

ブレークポイントを設定することはコードを理解しやすくする素晴らしい方法ですが、このプロセスは時々、関心のあるファイルから別のソースファイルやサードパーティのJavaScriptライブラリに移動してしまうことがあります。

例えば、サンプルを見てみましょう。

1. Query SceneLayerView sample を開いてください（これは developers.arcgis.com にあるサンプルと似ています）。

2. Chrome Developer Tools を開き、Sources タブを選択し、49行目を左クリックしてブレークポイントを設定します。

3. ページをリフレッシュするとデバッガーが49行目で一時停止します。ここで、「Paused in debugger」というメッセージが（「Play」ボタンと「Step Over」ボタンの隣に）表示されます。以下のスクリーンショットをご覧ください。49行目で一時停止

4. 「Step Over」ボタンを約5回クリックすると、メインの.htmlファイルから抜け出し、ArcGIS API for JavaScript の init.js ファイルに入ります。init.js ファイルを調べることもできますが、私たちは自分で書いたコードに集中したいので、「Play」ボタンをクリックして元の場所に戻りましょう。init.js ファイル内のデバッガー

ここで登場するのがブラックボックス化です。ブラックボックス化はデバッガーからファイルやライブラリを除外する方法であり、関心のあるファイルに集中できるようにします。ArcGIS API for JavaScript ライブラリをブラックボックス化して、メインの関心ファイルだけをステップ実行できるようにする方法を見てみましょう。

1. Developer Tools を開いた状態で、ウィンドウ右端の縦三点リーダーをクリックし、「Settings」を選択します。Developer Tool 設定Developer Tool 設定

2. ウィンドウ左側で「Blackboxing」をクリックし、「Framework Blackbox Patterns」を開きます。ブラックボックス化

3. 「Add pattern…」ボタンをクリックし、このフレームワークパターンを入力します：js.arcgis.com.*\.jsブラックボックスパターン

4. 「Add」をクリックし、パターン入力上の「Blackbox content scripts」のチェックボックスをオンにします。

5. 設定ウィンドウを閉じて Sources タブに戻ります。

6. ページをリフレッシュしてデバッガーが49行目で一時停止するようにします。

7. 「Step Over」ボタンを約５回クリックすると、メインの.htmlファイルから抜け出し debugger:///VM ファイル（これは無害な空関数で無視して問題ありません。また詳しくは こちら を参照）にも入り、その後もう１回「Step Over」を実行してアプリケーション内に戻ります。これで不要な補助ライブラリのデバッグではなく、自分が書いたコードや理解したいコードのデバッグに集中できます。

最後に付け加えると、ブラックボックス化はブラウザ全体に適用されるため、対象ウェブページやウェブアプリだけではありません。テスト終了後はブラックボックス化したパターンを削除して通常のウェブ閲覧体験に戻してください。

これで ArcGIS API for JavaScript の例とともに Google Chrome Developer Tools の高度な使い方ブログは終了です。上記のヒントがお役に立ち楽しんでいただけたなら幸いです。JavaScript アプリケーションのデバッグヒントについてさらに知りたい方は、過去数年分の追加リソースもご覧ください：追加リソース知らなかったかもしれない便利なJavascriptデバッグヒント (2015)Chrome Dev Tools, deb.jsなどを使ったJavascriptデバッグヒント (2015)(Mozilla) debugger.html の紹介 (2016)JavaScriptデバッガーを使ったデバッグ (2017)JavaScriptソースファイルのブラックボックス化次回もぜひご参加ください。Developer Toolsをさらに深く掘り下げ、貴重なレッスンを学びましょう。ハッピーデバッグ！</span>Artemis F. と Noah S. - Esri SDKサポート

AndresCastillo

Here is a blog I wrote that is along the same lines of teaching techniques on how to approach web development:

How to customize a web app using JavaScript, the DOM, Chrome DevTools, and Chrome's debugger
Blog Post created by Andres Castillo on Jul 24, 2019
https://community.esri.com/people/andrescastillo08/blog/2019/07/24/how-to-customize-an-app-using-javascript-the-dom-chrome-devtools-and-chromes-debugger