JavaScript デバッグのヒント パートII – Google Chrome とコンソールタブ

Noah Sager

<\/HEAD>このブログ記事は、JavaScriptデバッグのヒントとコツのシリーズの第2弾です。最初のセグメントについては JavaScript Debugging Tips Part I 11013 Google Chrome and the Network Tab<\/A><\/STRONG> をご覧ください。

プログラミング課題で最も楽しい部分は、ツールやリソースの山とともに座り、生のコードの塊を叩き始める序盤です。より難しい部分は、アプリケーションを起動しようとしたときに、その緻密に書かれたコードがほどけていき、何晩もコンピュータ画面を見つめることになる時です。しかし、すべてが失われたわけではありません。このブログの主題である、お気に入りのブラウザのDeveloper Tools内のConsoleタブについて、優れたおすすめがあります。

もし気分が落ち込んだり感情的になっているなら、Consoleタブはあなたにぴったりです。家族の誰かが困難な時期を過ごしていて、元気づけが必要かもしれません。Google Chrome Consoleタブ（グルテンフリーオプションもあります）を検討してください。Consoleタブが好きなユーザーはArcGIS API for JavaScriptも楽しめるかもしれません。<\/A>

私は明らかに同形異義語を理解していません<\/P><\/DIV>

Part Iで書いたように、Chrome Developer Toolsへのアクセスはショートカットキー（Control + Shift + I）を使うか、ブラウザ右上のハンバーガーメニューをクリックし、「More Tools」から「Developer tools」を選択することで簡単に行えます。

Developer Toolsが開くと（他のブラウザにも別のDeveloper Toolsがあります）、いくつかのタブが利用可能になります。ここではConsoleに焦点を当てます。Chrome Developer Toolsで直接Consoleタブを開くには、このキーボードショートカットを使います：Control + Shift + J（「J」はjocularの意味です）。さらに便利なヒントについては、公式Googleドキュメントの

Chrome DevTools: Using the console<\/A><\/STRONG>をご覧ください。

Consoleは2つの目的で使用されます：1) アプリケーションのJavaScriptからログ情報を表示する（通常はアプリ開発中）、2) オブジェクトを調査しJavaScriptを対話的に実行することです。このブログでは両方の例を見て、テクニカルサポートで使う追加のヒントやコツについて詳述します。

まずできることは、アプリケーション内に「console.log」ステートメントを追加することです。GitHubでホストされている修正済みサンプルはこちらです：Sample Console Application<\/A><\/STRONG>。ご自宅でぜひ試してみてください。

60-62行目と66行目に、「console.log」ステートメントを追加してFeature Layerに関する情報を表示しています。我々のユースケースはウェブマッピングアプリケーションを作成しており、テスト中にArcGIS Onlineから取得しているデータが地図上に表示する正しいデータかどうか確認したいというものです。そのため、Feature Layerについていくつか重要な情報：レイヤーのタイトルとレイヤーのURLを出力しています。URLプロパティの構文がわからないので、「URL」と「url」を以下のように使っています。

<\/A>

JavaScript console.log ステートメント<\/P><\/DIV>

以下は「console.log」ステートメントの出力スクリーンショットです。期待した関連情報が表示されています。また、「featureLayer.URL」の出力が「undefined」であることにも注意してください。これはコンソール内の項目が大文字小文字を区別するためです。有効なプロパティは「featureLater.url」であり、無効なプロパティはエラーを投げずundefined結果を返します。この問題は捕捉が難しいですが、このブログ後半で対処法について説明します。

<\/A>

console.logからのJavaScriptコンソール出力<\/P><\/DIV>

Consoleが開いたまま、コード内と同じプロパティ値を入力してみましょう：

featureLayer.title<\/STRONG>featureLayer.URL<\/STRONG>featureLayer.url<\/STRONG><\/P>
これらすべてのプロパティが実際の値（または「undefined」さえも）ではなくエラーを返すことに注意してください。これはアプリ初期化後にローカル変数がスコープ外になるため、「featureLayer」オブジェクトさえ認識されなくなるためです。 以下は新しいコンソールステートメント出力のスクリーンショットです。

<\/A>

アプリロード後のJavaScriptコンソール出力<\/P><\/DIV>

もし「featureLayer」をグローバル変数にしていたら、コンソールではオブジェクトに対して「undefined」が返されていたでしょう（変数は認識されるが詳細にはアクセスできない）。ポイントは：スコープ内にある変数だけがコンソールで調査可能ということです。それではコンソールを対話的に使ってプロパティ値を入力できますか？試してみましょう。

次にサンプルアプリに追加できることはコード内への「debugger;」ステートメント追加です。GitHubでホストされている別の修正済みサンプルはこちら：

Sample Console Application2<\/2strong>. ご自宅でぜひ試してください。

60行目に、「debugger;」ステートメントを追加し、コンソールでFeature Layer情報表示支援しています。2222 JavaScript debugger ステートメント22

このステートメントはどのように機能しますか？リンクをクリックしてアプリケーションを実行してください。その後Developer Tools（Control + Shift + I または Control + Shift + J）を開き、アプリケーションをリフレッシュします。アプリケーションは一時停止し、「Paused in debugger」というメッセージが画面上部に表示され、「debugger」行がSourcesタブでハイライトされます：2222%20Paused in debugger%20122

今、アプリケーション 一時停止したので、Consoleタブに戻り、featureLayerのプロパティを再度調べてみましょう。ここで、変数のスコープが適切であることがわかり、出力を確認できます： デバッガーで一時停止中 2

かっこいいですよね？

“debugger”に似た別のオプションを見てみましょう。Sourcesタブに戻ると、コードの左側に行番号が表示されています。行番号を左クリックするとブレークポイントを設定でき、これはコード内に“debugger”を書くのと全く同じ効果があります。同じアプリケーションの56行目、62行目、66行目を左クリックし、その後アプリケーションをリフレッシュしてください。 ブレークポイント 1

アプリケーションは最初のブレークポイントで即座に一時停止します。ここからConsoleタブに戻って変数やプロパティを思う存分調べることができます。それだけでなく、画面上部の再生ボタンの右にある曲がった矢印をクリックすると、アプリケーションをステップ実行してコードがどのように一歩ずつ実行されるかを見ることができます。または、画面上部の再生ボタンをクリックしてアプリケーションを完了まで、または次のブレークポイントまで実行させることも可能です。 ブレークポイント 2

さらにもう一度再生ボタンをクリックすると次のブレークポイントに到達します。 ブレークポイント 3

このブログの目的はConsoleの有用性と機能性を強調することですが、ここでブレークポイント設定の別の使い方も指摘したいと思います。ブレークポイントは開発者に非同期コードがどの順序で実行されるか、関数がどのように動作し、どの部分がスキップされたり失敗したりするかを見る能力を与えます。JavaScriptアプリケーションのデバッグに関する詳細情報については、過去数年の以下の追加リソースをご覧ください：Advanced Debugging With JavaScript（2009年）Debugging JavaScript with Chrome DevTools Breakpoints （2016年）JavaScript Debugging Tips Part I （2014年）
今回の記事では、Chrome Developer tools内のConsoleタブにアクセスし使用する方法を学びました。これによりJavaScriptコード内の変数やオブジェクトのプロパティと値を明らかにできます。この情報はウェブベースアプリケーションのデバッグやコーディングを大いに助けます。これでJavaScript Debugging Tipsシリーズ第2回は終了です。次回はさらにDeveloper Toolsについて深く掘り下げますのでお楽しみに。そして皆さん昇給しましょう。ハッピーデバッグ！Noah S. と John G. - SDK Support Services

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