UWP アプリのネットワーク使用量を分析するAnalyze Network Usage in UWP Apps

Visual Studio の ネットワーク診断ツールは、Windows.Web.Http API を使用して実行されたネットワーク操作についてのデータを収集します。The Visual Studio Network diagnostics tool collects data about network operations performed using the Windows.Web.Http API. そのデータを分析すると、アクセスや認証の問題、不適切なキャッシュの使用、表示やダウンロードの低パフォーマンスなどの問題を解決するのに役立ちます。Analyzing the data can help you resolve issues like access and authentication problems, incorrect cache-use, and poor display and download performance.

ネットワーク ツールは、UWP アプリのみをサポートします。The Network tool supports only UWP apps. その他のプラットフォームは現時点ではサポートされていません。Other platforms are not supported at this time.

注意

ネットワーク ツールの詳細については、Visual Studio のネットワーク ツールの概要に関する記事をご覧ください。For a more complete description of the Network tool, see Introducing Visual Studio's network tool.

ネットワーク ツール データの収集Collecting network tool data

ネットワーク ツールを実行するには、Visual Studio コンピューター上で開かれた状態の Visual Studio プロジェクトが必要です。You should run the Network tool with an open Visual Studio project on the Visual Studio computer.

  1. Visual Studio でプロジェクトを開きます。Open the project in Visual Studio.

  2. [デバッグ]、[パフォーマンス プロファイラー...] の順にクリックします。[ネットワーク] を選択し、[開始] をクリックします。On the menu, click Debug / Performance Profiler.... Choose Network, and then choose Start.

  3. ネットワーク ツールは、アプリの HTTP トラフィックの収集を開始します。The network tool begins collecting your app's HTTP traffic.

    アプリを実行する際、左側のウィンドウにある [概要] ビューに、キャプチャされた HTTP 操作の一覧が自動的に表示されます。As you run your app, the summary view in the left pane automatically displays a list of captured HTTP operations. 右側のウィンドウにある [詳細] パネルで詳細を確認するには、[概要] ビューの項目を選択します。Select an item on the summary view to see more information in the details panel in the right pane.

  4. [停止] をクリックしてアプリを閉じます。Choose Stop to close the app.

    レポート ウィンドウは次のように表示されます。The report window should look something like this:

    [ネットワーク] ウィンドウThe Network window

データを分析するAnalyzing data

アプリの実行中、またはアプリが閉じられた後でも、[概要] ビューに表示されたいずれかのネットワーク操作を選択すると、キャプチャされた HTTP トラフィックを分析できます。You can analyze captured HTTP traffic while your app is running, or even after the app has been closed, by selecting any of the network operations displayed on the summary view.

[ネットワーク] 概要ビューに、アプリの実行中の各ネットワーク操作のデータが表示されます。The Network summary view shows data for each network operation in the run of your app. 列ヘッダーを選択して一覧を並べ替えるか、コンテンツの種類を選択して [コンテンツの種類] フィルター ビューで表示します。Choose a column header to sort the list, or choose the content types to display in the Content Type filter view.

[Save as HAR] (HAR として保存) を選択すると、Fiddler などのサード パーティ製ツールで使用可能な JSON ファイルを作成できます。Choose the Save as HAR to create a JSON file that can be consumed by third-party tools like Fiddler.

[ネットワーク] の詳細ビューには、[概要] ビューのネットワーク操作に関する詳細情報が表示されます。The Network details views displays more information about a network operation in the summary view.

ネットワーク ツールの詳細ペインNetwork tool details pane

ヘッダーHeaders イベントの要求ヘッダーに関する情報。Information about the request headers of the event.
本文Body 要求と応答のペイロード データ。The request and response payload data.
パラメーターParameters クエリ文字列パラメーター名と値。The query string parameter names and values.
CookieCookies 応答と要求の cookie データ。Response and request cookie data.
タイミングTimings 選択したリソースの取得中のステージのグラフ。A graph of stages in acquiring the selected resources.

ネットワークの [概要] バーは、ある特定の時点で表示されているネットワーク操作の数、転送されたデータの量、データのダウンロードに要した時間、および表示可能なエラー (4xx 応答または 5xx 応答が返された要求) の数を示しています。The Network summary bar shows the number of network operations that are displayed at any given point, how much data was transferred, how much time it took to download them, and how many errors (requests with 4xx or 5xx responses) are visible.

分析のヒントAnalysis tips

このツールは、次のネットワーク関連の分析を実行する際に役立つ特定の領域を強調表示します。This tool highlights certain areas that can be useful when you are running network related analysis:

  1. キャッシュから完全に処理される要求は、[受信元] 列の [(キャッシュから)] に表示されます。Requests that are fully served from the cache are shown as (from cache) in the Received column. これにより、キャッシュを使用して効果的にユーザーの帯域幅を節約しているかどうか、または誤って応答をキャッシュして、アプリケーションのエンド ユーザーに古いデータを提供しているかどうかを判断できます。This can help you determine whether you are using the cache effectively to save user bandwidth, or whether you are caching responses by mistake and providing the end-user of your application with outdated data.

  2. エラー応答 (4xx または 5xx) は、[結果] 列で状態コードが赤い状態で、[概要] バーで強調表示された状態で表示されます。Error responses (4xx or 5xx) are displayed in the in the Results column with a red status code and are also highlighted in the summary bar. これにより、アプリケーションの多くの潜在的な要求の間でエラーを見つけやすくなります。This makes it easy to spot errors among the many potential requests on your application.

  3. ([本文] タブ内の) [応答の整形出力] ボタンは、コンテンツをさらに読みやすくして、JSON、XML、HTML、CSS、JavaScript、および TypeScript の応答のペイロードを解析できるようにします。The response pretty printing button (inside the body tab) can help you parse through JSON, XML, HTML, CSS, JavaScript and TypeScript response payloads by increasing the readability of the content.

参照See Also

デバッガーを使用して、または使用せずにプロファイリング ツールを実行するRun Profiling Tools with or without the Debugger
Visual Studio ブログ: Visual Studio のネットワーク インスペクターの紹介 Visual Studio blog: Introducing Visual Studio's network inspector
Channel 9 ビデオ: Visual Studio 診断ツール - 新しいネットワーク プロファイラーChannel 9 Video: VS Diagnostics tools - New Network Profiler
Visual Studio のプロファイルProfiling in Visual Studio
プロファイリング機能ツアーProfiling Feature Tour