Visual Studio の新しいネットワーク ツールのご紹介

先週リリースが発表された Visual Studio 2015 RC には、Windows Phone、HoloLens、Xbox など、さまざまな Windows デバイスで Windows アプリを開発する際に発生したネットワーク関連の問題を診断する新しいツールが含まれています。この新しいネットワークツールは、既存の [Performance and Diagnostics] ハブ (英語) の一部です。以下のスクリーンショットでは、実際の使用例を示しています。

従来、Web 開発者がネットワーク診断を行う場合には、ブラウザー ベースのツールを利用してきました。しかし、アプリ開発者の場合は、開発ワークフローに統合されたツールが存在しなかったために、より手間のかかる作業となっていました。Visual Studio の新しいネットワーク ツールでは、HTTP 要求ヘッダーと応答ヘッダー、要求ペイロードと応答ペイロード、Cookie、詳細なタイミング情報など、WinRT HttpClient API (英語) によって実行されたすべての HTTP ネットワークの処理に関する情報を簡単に記録することができます。ただし、以前の .NET HttpClient API (機械翻訳) によって実行された処理は記録されません。

このツールを利用して、以下のような一般的な質問に対する回答を得ることができます。

• 認証関連の問題 (例: アプリからリソースにアクセスできないのはなぜか?)
• キャッシュ関連の問題 (例: アプリが古いバージョンのリソースを取得するのはなぜか?)
• ペイロードの問題 (例: ダウンロード済みのバイト数は? ボトルネックが発生しているのはどこか?)

ネットワークツールを使用する

ネットワーク ツールにアクセスするには、Visual Studio 2015 で [Diagnostics Tools] ウィンドウを開き、[Debug] メニューから [Start Diagnostic Tools without Debugging] を選択します (または、Alt+F2 キーを押します)。

診断ページで、[Analysis Target] を選択し (分析ターゲットとして、スタートアップ プロジェクトが既定で選択されていますが、インストール済みまたは実行中のアプリにターゲットを変更することも可能です)、[Network] を選択して [Start] をクリックします。また、このツールは [Performance and Diagnostics] ハブの一部であるため、追加のツールを組み合わせてセッションを実行することも可能です。

アプリのプロファイリングを開始すると、アプリの HTTP ネットワーク トラフィックが自動的に取得され、概要ビューに表示されます。

概要ビュー

概要ビューは、取得されたすべての HTTP 処理を簡潔に表示するテーブル型のインターフェイスです。

概要ビューの各列では、以下の情報を確認できます。

• [Name] – 要求されたリソースの名前と URL パス
• [Protocol] – このリソースの要求時に使用されたプロトコル (例: HTTP または HTTPS)
• [Method] – 要求に使用された HTTP メソッド (例: GET、POST、PUT など)
• [Result] – サーバーによって返された応答ステータス コードとテキスト メッセージ
• [Content type] – サーバーによって返された応答の MIME の種類
• [Received] – サーバーによって返された応答ペイロードの合計サイズ。現時点では、チャンク エンコードされた応答は空欄になります。
• [Time] – 最初に要求が送信されてからリソースをダウンロードするまでにかかった時間
• [Timings] – ネットワーク アクティビティが発生したタイミングを示すグラフ。このグラフ (ウォーターフォール チャート) には、リソースが要求されたタイミングとダウンロードが完了したタイミングが表示されます。

開発者の生産性向上を目的として、以下のように設計を行いました。これにより、デバッグに関する重要な詳細が見やすく表示されます。

• 既定では、要求は時系列順に表示されますが、別の列ヘッダーをクリックして、他の順序に並べ替えることもできます。
• キャッシュのみを使用して処理された要求の場合、[Received] 列に “(from cache)” と表示され、すべてのキャッシュ応答を簡単に把握することができます。これにより、ユーザーの帯域幅の使用を削減するためなどにキャッシュを効果的に使用できているか、または、誤って応答をキャッシュしてアプリケーションのエンドユーザーに古いデータを提供していないか、といったことを確認できます。
• 4xx または 5xx などのエラーは、[Results] 列に赤字のステータス コードで表示されるほか、概要バーにも表示され、解決が必要な可能性のある問題について注意を喚起します。これにより、アプリケーションの多数の要求の中から問題を簡単に特定し、解決することができます。
• 概要バーには、要求数、合計データ量、所要時間に関する情報がまとめられています。

ツール バー

ネットワーク関連の問題をデバッグするときに、ネットワーク トレースを他のユーザーと共有してデバッグに関する所見を共有したり、Fiddler などのサードパーティ製ツールにインポートしてパフォーマンス分析を実行したりする必要がある場合があります。こうしたシナリオに対応するために、取得されたネットワークトラフィックを JSON ベースの HAR 形式にエクスポートできるエクスポート ボタンを追加しました。これにより、JSON ベースの HAR ファイルを使用してネットワークトレースをデバッグまたは分析するさまざまなサードパーティ製ツールを活用できます。

また、ツール バーを使用して、取得されたトラフィックのサブセットを表示することもできます。たとえば、画像が表示されなかったり、最新の画像が取得されなかったりなど、画像関連の呼び出しの問題を診断する場合には、[Content type] フィルターを開き、利用可能なフィルターの一覧から [Images] を選択して、画像関連以外のコンテンツを非表示にすることができます。この機能により、関係のない多数のネットワーク呼び出しを無視して、画像関連の呼び出しのみに集中できるため、生産性が向上します。

フィルターを適用すると、ページ下部の概要バーが更新され、新しい指標が反映されます。ここには、概要ビューに現在表示されている取得済みのネットワーク トラフィックの概要が表示されます。ネットワークエラー (4xx または 5xx のステータス コードが表示された応答)、表示中の要求数、転送された応答データ量、ダウンロードの所要時間に関する情報をひとめで確認できます。この機能は、特定のシナリオで使用されたデータ量を測定したり、特定のリソースをダウンロードするための所要時間の見当を付けたりする場合に特に役立ちます。

詳細パネル

要求の詳細を確認するには、概要ビューの要求列をクリックします。詳細パネルが開き、その要求に関連するすべての情報が提示されます。

詳細パネルは、以下のセクションに分かれています。

• [Headers] – 要求ヘッダーと応答ヘッダーの詳細に加えて、URL、メソッド、ステータス コードなど、要求と応答の重要な要素の概要が表示されます。
• [Body] – 要求ペイロードと応答ペイロードの本文が表示されるほか、コンテンツを読みやすいように「整形出力」するオプションが提供されます。
• [Parameters] – クエリ文字列のパラメーターを読みやすい形式に分割します。
• [Cookie] – 要求 Cookie と応答 Cookie のデータが表示されます。
• [Timings] – 各リソースを取得したタイミングの段階が表示されます。リダイレクトはリソースのダウンロード時間に影響するため、このセクションには、リソースが別のリソースからリダイレクトされたか、別のリソースにリダイレクトしたかという情報も表示されます。

まとめると、Visual Studio 2015 では生産性向上に役立つ新しいネットワーク ツールを使用できるようになりました。ほとんどのネットワーク関連の問題を Visual Studio IDE から直接デバッグできるツールが提供されます。また、Windows ストア アプリと Windows 10 を対象としたユニバーサルアプリの JavaScript、マネージ アプリ、ネイティブ アプリで発生したネットワーク関連の問題をデバッグすることも可能です。

今後のブログ記事では、ネットワーク ツールを使用して、アプリの開発時に発生する可能性のある問題を解決する方法についてご説明します。下記のコメント欄または Send-a-Smile (英語) から、皆様のご意見をお聞かせください。

Ruben Rios (Visual Studio プログラム マネージャー) @Ruben_J_Rios Ruben は、Visual Studio のデバッグ ツールや Microsoft Edge の F12 開発ツールを開発するチームでプログラム マネージャーを務めています。マイクロソフトに入社する前は Web 開発のプロフェッショナルとして活躍しており、ユーザー エクスペリエンスの向上について常に熱心に取り組んできました。