JavaScript デバッグのヒント パート I – Google Chrome と Network タブ

Noah Sager

<\/HEAD>

このブログ記事は、デバッグのヒントとコツのシリーズの最初の記事です。 <\/EM>

外はジャングルのようなものです。そして好きか嫌いかに関わらず、あなたのアプリケーションの中もジャングルです。バグを解決するのは、コードの行をゆっくりとふるいにかけるだけでは簡単ではありません。専用のツールと率直な好奇心が必要です。ジャングルでは、ママゴリラは勇気と狡猾さ以外に頼れるものはほとんどありません。しかしウェブ開発者として、あなたにはさまざまなツールが利用可能です。 今日は、Google Chrome の Developer Tools 内の Network タブを見ていきます。

Chrome Developer Tools へのアクセスはショートカットキー（Control + Shift + I）を使うか、ブラウザ右上の三本の灰色の横線をクリックし、「Tools」から「Developer tools」を選択することで簡単に行えます。<\/A>

ママゴリラとは違い、Chrome Developer Tools はあなたとあなたのアプリケーションを気にかけています。あなたのことが好きです。あなたは本当に優れた開発者だと思っています。でもあなたも努力が必要です。それは Esri Support に似ています。私たちはあなたが好きで、助けたいと思っており、あなたが最初の一歩を踏み出した時にそこにいます。

Developer tools が開いている間は、リロードボタンをクリックして押し続けるだけでブラウザキャッシュをクリアできます。この操作で三つの異なるオプションが表示されます：Normal Reload<\/STRONG>、Hard Reload<\/STRONG>、そして Empty Cache and Hard Reload<\/STRONG>。これらのオプションはコードの変更がブラウザに反映されることを保証するために役立ちます。そうしないと、アプリケーションはブラウザのキャッシュから古いコードを読み込む可能性があります。私が気分が落ち込んだ時は、Hard Reload を数回行うといつも効果があります。もし日暮れ近くなら、まずキャッシュを空にすることをお勧めします。<\/A>

キャッシュをクリアしてアプリケーションをリロードしたので、続けましょう。 Firebug や Fiddler のような他の主要ブラウザやスタンドアロンツールと同様に、Chrome の Network タブは現在ブラウザで開いているタブから発生した個々のリクエストを記録します。通常、ページがリフレッシュされると様々なリソースが読み込まれ、ユーザーがページとやり取りしている間にも追加リクエストが実行されます。

Network タブは私のお気に入りです。テストアプリケーションを実行する前には必ずこのタブを開きます。ここではウェブトラフィックを検査してアプリケーションがオンラインサービスとどのようにやり取りしているかを調べることに集中できます。もしアプリケーションに印刷サービスがあれば、Network タブで webmap を JSON として取得し、そのパラメータを REST API と比較して JSON が有効かどうか確認できます。またアプリケーションが消費しているすべてのリソースや、それらリソースがどこにあるかも見ることができます。

アプリケーションで明らかに何か問題が起きている場合、最初に見るべきは完全に失敗したリクエストです。最も一般的なエラーは 403 で、これはリソースへのアクセス権限がないことを示し、404 はリソースが見つからないことを意味します。私自身の経験では、404 エラーはサービスの場所を書き出す際にタイプミスしたことによる場合が最も多いです。私はママゴリラのようにコードを書いてしまうからです。<\/P>

<\/A><\/P>

このスクリーンショットは Network タブが開いていて、localhost というサーバー上で欠落している .css ファイルについてネットワークトラフィック内で 404 エラー（Not Found）が表示されている様子です（私は .css を間違ったフォルダに入れました）<\/EM><\/P>
今回の記事では Chrome Developer tools 内の Network タブへのアクセス方法と使用方法について学びました。このタブはアプリケーションによって開始された個々のリクエストとその成功または失敗を明らかにします。この情報は他にほとんどエラー情報が得られない場合でも、裏側で何が起こっているかやコード内でどこに注目すべきかを開発者に示すことでデバッグ作業を大幅に助けます。これで JavaScript デバッグヒントシリーズのパート1は終了です。次回は実際の例を使って Network タブについてさらに深く掘り下げます。デバッグ頑張ってください！<\/P><\/BODY><\/HTML>

AndresCastillo

Noah Sager‌

It was amazing meeting you at the UC!

You are even cooler than your blogs already make you look.

I hope you don't mind.......I want to share a blog I wrote since it 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