UWP アプリでの JavaScript のメモリ使用量を分析するAnalyze JavaScript Memory Usage in UWP Apps

Visual Studio に用意されている JavaScript メモリ アナライザーは、メモリ使用量を把握し、JavaScript を使用して Windows 用に開発された UWP アプリのメモリ リークを検出するのに役立ちます。The JavaScript memory analyzer is available in Visual Studio to help you understand memory usage and find memory leaks in your UWP apps built for Windows using JavaScript. サポートされるアプリには、ユニバーサル Windows アプリのアプリが含まれます。Supported apps include apps for Universal Windows Apps.

JavaScript メモリ アナライザーは、次の機能を提供します。The JavaScript memory analyzer can do these things for you:

JavaScript メモリ アナライザーの実行Run the JavaScript memory analyzer

メモリ アナライザーは、動作中の UWP アプリが Visual Studio で開かれているか、Windows 8Windows 8 以降を実行しているコンピューターにインストールされている場合に使用できます。You can use the memory analyzer when you have a working UWP app open in Visual Studio or installed on a computer that is running Windows 8Windows 8 or later.

メモリ アナライザーを実行するにはTo run the memory analyzer

  1. Visual Studio を開きます。Open Visual Studio.

  2. アプリを Visual Studio から実行している場合は、[標準] ツール バーの [デバッグの開始] の一覧から、プロジェクト用にデバッグ ターゲットを選択します (Windows Phone エミュレーター、または UWP アプリの場合はローカル コンピューターシミュレーター、またはリモート コンピューター)。If you're running the app from Visual Studio, in the Start Debugging list on the Standard toolbar, choose the debug target for your project: either a Windows Phone Emulator or, for a UWP app, Local Machine, Simulator, or Remote Machine.

    これらのオプションの詳細については、以下を参照してください。 Run apps from Visual StudioFor more info about these options, see Run apps from Visual Studio.

  3. メニュー バーで、[デバッグ][パフォーマンス プロファイラー...] の順にクリックします。On the menu bar, choose Debug, Performance Profiler....

    既定では、現在のスタートアップ プロジェクトが分析されます。By default, the current startup project is analyzed. 分析ターゲットを変更する場合は、 [ターゲットの変更]を選択します。If you want to change the analysis target, choose Change Target.

    分析ターゲットを変更するChange analysis target

    分析ターゲットに対して、次のオプションを使用できます。The following options are available for the analysis target:

    • [スタートアップ プロジェクト]Startup Project. 現在のスタートアップ プロジェクトを分析します。Analyzes the current startup project. アプリをリモート コンピューターで実行している場合は、既定のこのオプションを選択する必要があります。If you're running the app on a remote machine, you must choose this option, which is the default.

    • [実行中のアプリ]Running App. 実行中のアプリの一覧から UWP アプリを選択できます。Lets you select a UWP app from a list of running apps. このオプションは、アプリをリモート コンピューターで実行している場合は使用できません。You can't use this option when you're running your app on a remote machine.

      このオプションを使用すると、ソース コードにアクセスできないときに、コンピューター上で実行されているアプリのメモリ使用量を分析できます。Use this option to analyze memory usage of apps that are running on your computer when you don't have access to source code.

    • [インストールされているアプリ]Installed App. インストールされている UWP アプリの中から分析するアプリを選択できます。Lets you select an installed UWP app that you want to analyze. このオプションは、アプリをリモート コンピューターで実行している場合は使用できません。You can't use this option when you're running your app on a remote machine.

      このオプションを使用すると、ソース コードにアクセスできないときに、コンピューターにインストールされているアプリのメモリ使用量を分析できます。Use this option to analyze the memory usage of apps that you have installed on your computer when you don't have access to source code. このオプションは、自分が開発に携わっていないアプリのメモリ使用量を分析する場合にも便利です。This option can also be useful when you just want to analyze the memory usage of any app outside your own app development.

  4. [使用可能なツール]で、 [JavaScript メモリ] チェック ボックスをオンにし、 [開始]をクリックします。From Available Tools, select the JavaScript Memory check box, and then choose Start.

  5. メモリ アナライザーの起動時に、Visual Studio ETW Collector.exe を実行するためのアクセス許可を要求するユーザー アカウント制御ウィンドウが表示される場合があります。When you start the memory analyzer, a User Account Control window might request your permission to run Visual Studio ETW Collector.exe. [はい]をクリックします。Choose Yes.

    以降のセクションの説明に従って、アプリを操作して関連するメモリ使用量シナリオをテストし、メモリ グラフを確認します。Interact with the app to test the relevant memory usage scenarios and view the memory graph, as discussed in the following sections.

  6. Alt キーを押しながら Tab キーを押して Visual Studio に切り替えます。Switch to Visual Studio by pressing Alt+Tab.

  7. メモリ アナライザーによって収集されたデータを表示するには、 [ヒープ スナップショットの作成]をクリックします。To view data that the memory analyzer is gathering, choose Take Heap Snapshot. このトピックで後述する「 View a snapshot summary 」を参照してください。See View a snapshot summary later in this topic.

メモリの使用量の確認Check memory usage

JavaScript メモリ アナライザーのさまざまなビューを使用して、メモリ リークを識別することができます。You can try to identify memory leaks by using different views in the JavaScript memory analyzer. アプリでメモリ リークが発生している可能性がある場合には、「 Isolate a memory leak 」を参照して、推奨されるワークフローを確認します。If you already suspect that your app is leaking memory, see Isolate a memory leak for a suggested workflow.

アプリケーションのメモリ リークを特定するには、次のビューを使用します。Use the following views to help identify memory leaks in an app:

  • 実行中のメモリ使用量の概要の表示)。View live memory usage summary. メモリ使用量グラフを使用して、特定の操作によって発生している、メモリ使用量の突然の上昇や継続的な増加がないかどうかを調べます。Use the memory usage graph to look for sudden increases in memory usage or continually increasing memory usage that results from particular actions. 実行中のメモリ使用量の概要ビューを使用して、ヒープのスナップショットを取得します。Use the live memory usage summary view to take snapshots of the heap. スナップショットはメモリ使用量グラフの下にコレクションとして表示されます。The snapshots appear as a collection under the memory usage graph.

    ヒント

    スナップショットを取得すると、メモリ使用量の急な増加がわかります。You will see a spike in memory usage when you take a snapshot. より正確な増加量を確認するには、スナップショットの概要を使用します。Use the snapshot summaries for a more accurate indication of growth.

  • View a snapshot summary)。View a snapshot summary. メモリ プロファイルのセッション中またはその後で、スナップショットの概要情報を表示できます。You can view snapshot summary info during or after a memory profiling session. スナップショットの概要を使用して、スナップショットの詳細とスナップショットの相違ビューをリンクします。Use the snapshot summaries to link to snapshot details and snapshot diff views.

    ヒント

    通常、スナップショットの比較ビューは、メモリ リークに関する有益な情報を提供します。Typically, the snapshot diff views will provide the most useful information about memory leaks.

  • スナップショットの詳細の表示)。View snapshot details. 単一のスナップショットの詳細なメモリ使用量データを示します。Shows detailed memory usage data for a single snapshot.

  • スナップショットの相違の表示)。スナップショット間の差分値を示します。View a snapshot diff. Shows differential values between snapshots. これらのビューは、オブジェクトのサイズや数の違いを示します。These views show differences in object size and object counts.

Isolate a memory leakIsolate a memory leak

以下の手順は、JavaScript メモリ アナライザーをより効果的に使用するために役立つワークフローです。These steps provide a workflow that might help you use the JavaScript memory analyzer more effectively. これらの手順は、アプリケーションでメモリ リークが発生している可能性がある場合に役立ちます。These steps can be useful if you suspect that your app has a memory leak. 動作中のアプリのメモリ リークを識別するプロセスを紹介したチュートリアルについては、「チュートリアル: メモリ リークの検出 (JavaScript)」をご覧ください。For a tutorial that leads you through the process of identifying a memory leak in a working app, see Walkthrough: Find a memory leak (JavaScript).

  1. Visual Studio でアプリを開きます。Open your app in Visual Studio.

  2. JavaScript メモリ アナライザーを実行します。Run the JavaScript Memory Analyzer. 詳細については、「 JavaScript メモリ アナライザーの実行」を参照してください。For more info, see Run the JavaScript memory analyzer.

  3. テストするシナリオでアプリを実行します。Run your app through the scenario that you want to test. たとえばシナリオには、特定のページが読み込まれるときやアプリケーションが開始されるときの DOM の大きな変異などが含まれます。For example, the scenario might involve a large DOM mutation, when a particular page loads, or when the app starts.

  4. シナリオを 1 ~ 4 回追加で繰り返します。Repeat the scenario 1-4 additional times.

    ヒント

    テスト シナリオを数回繰り返すことにより、結果から初期化作業をフィルターで除外することができます。By repeating the test scenario several times, you can help make sure that initialization work can be filtered out of the results.

  5. Visual Studio に切り替えます (Alt + Tab キーを押します)。Switch to Visual Studio (press Alt+Tab).

  6. [ヒープ スナップショットの作成]をクリックして、ベースラインのヒープ スナップショットを作成します。Take a baseline heap snapshot by choosing Take Heap Snapshot.

    次の図は、ベースライン スナップショットの一例を示しています。The following illustration shows an example of a baseline snapshot.

    ベースライン スナップショットBaseline snapshot

    ヒント

    スナップショットのタイミングをより細かく制御する場合は、 Associate source code with memory usage data コマンドをコードで使用します。For more precise control over the timing of snapshots, you can use the Associate source code with memory usage data command in your code.

  7. アプリに切り替え、テストするシナリオを繰り返します (1 度だけ繰り返す)。Switch to your app and repeat the scenario that you are testing (repeat once only).

  8. Visual Studio に切り替え、2 番目のスナップショットを作成します。Switch to Visual Studio and take a second snapshot.

  9. アプリに切り替え、テストするシナリオを繰り返します (1 度だけ繰り返す)。Switch to your app and repeat the scenario that you are testing (repeat once only).

  10. Visual Studio に切り替え、3 番目のスナップショットを作成します。Switch to Visual Studio and take a third snapshot.

    次の図は、2 番目と 3 番目のスナップショットの一例を示しています。The following illustration shows an example of a second and third snapshot.

    2 番目と 3 番目のスナップショットSecond and third snapshot

    このワークフローでベースライン、2 番目、および 3 番目のスナップショットを作成することにより、メモリ リークに関連付けられていない変更をフィルターで除外しやすくなります。By taking a baseline, second, and third snapshot in this workflow, you can filter out changes that aren't associated with memory leaks more easily. たとえば、ページのヘッダーやフッターの更新などがある場合、メモリ使用量には変化があっても、メモリ リークには無関係である場合があります。For example, there might be expected changes such as updating headers and footers on a page, which will generate some changes in memory usage but might be unrelated to memory leaks.

  11. 3 番目のスナップショットから、いずれかの相違表示へのリンクを選択します。From the third snapshot, choose a link to one of the differential views:

    • 相違ヒープ サイズ (ヒープ サイズの左下のリンク)。Differential heap size (left link beneath the heap size). このリンク テキストは、現在のスナップショットのヒープ サイズと前のスナップショットのヒープ サイズとの相違を示しています。The link text shows the difference between the heap size of the current snapshot and the heap size of the previous snapshot.

    • 相違オブジェクト カウント (オブジェクト カウントの右下のリンク)Differential object count (right link beneath the object count). このリンク テキストは、2 つの値を示します (例: +1858 / -1765)。最初の値は、前のスナップショットから追加された新しいオブジェクトの数です。2 番目の値は、前のスナップショットから削除されたオブジェクトの数です。The link text shows two values (for example, +1858 / -1765): The first value is the number of new objects added since the previous snapshot, and the second value is the number of objects removed since the previous snapshot.

      これらのリンクは、ヒープの種類の相違スナップショット詳細ビューを開き、開いたリンクに応じて、保持サイズまたはオブジェクト カウントで並べ替えられます。These links open a differential snapshot details view of types on the heap, sorted either by retained size or object count, depending on which link you opened.

  12. 次のいずれかの スコープ フィルター オプションを選択して、メモリ使用量の問題を特定します。Choose one of the following Scope filter options to help identify memory usage issues:

    • スナップショット #2 から残されたオブジェクトObjects left over from Snapshot #2.

    • スナップショット #2 および #3 の間に追加されたオブジェクトObjects added between Snapshot #2 and #3

    ヒント

    前のスナップショットから残されたオブジェクトのフィルターされたビューを使用して、メモリ リークを調査します。Use the filtered view of objects left over from the previous snapshot to investigate memory leaks. たとえば、相違オブジェクト カウントが +205 / -195 の場合、このビューには 10 個のオブジェクトが残されていることを示しており、メモリ リークの候補となります。For example, if the differential object count is +205 / -195, this view will show the 10 objects left over, and these are likely candidates for memory leaks.

    次の図は、スナップショット #2 から残されたオブジェクトの相違ビューを示しています。The following illustration shows a differential view of objects left over from Snapshot #2.

    種類を示すスナップショットの相違点ビューSnapshot diff view showing types

    前の図では、2 個のオブジェクトが前のスナップショットから残されていることがわかります。In the preceding illustration, we see that two objects are left over from the previous snapshot. この特定のアプリで予期された動作かどうかを調査します。Investigate whether this is expected behavior for your particular app. 予期されない動作の場合は、メモリ リークを示している可能性があります。If not, it might indicate a memory leak.

  13. グローバル オブジェクトが原因でガベージ コレクトされない場合、比較ビューでオブジェクトがそのグローバル オブジェクトをルートとしている場所を調べるには、オブジェクトのショートカット メニューを開き、 [ルート ビューで表示]をクリックします。To see where objects in the diff views are rooted to the global object, which prevents them from being garbage-collected, open the shortcut menu for an object, and then choose Show in roots view. 多数のオブジェクトが、グローバル オブジェクトにルートしている単一のオブジェクト (または少数のオブジェクト) によって参照されるため、メモリに保持されている場合があります。A large number of objects might be retained in memory because they are referenced by a single object (or a few objects) that are rooted to the global object.

  14. 残されたオブジェクトのビューにあるオブジェクトが多すぎる場合、メモリ リークが生じている期間をさらに特定して、3 つのスナップショットを再度作成します。If there are too many objects in the view of objects left over, try to further isolate the period in which the memory leak is occurring, and then retake the three snapshots. さらにメモリ リークを特定するには、 Associate source code with memory usage dataAssociate source code with memory usage data、メモリ アナライザーで使用できるその他のメモリ使用量データを使用します。To further isolate the memory leak, use Associate source code with memory usage data, Associate source code with memory usage data, and other memory usage data available in the memory analyzer.

実行中のメモリ使用量の概要の表示View live memory usage summary

実行中のメモリ使用量の概要ビューは、実行中のアプリおよびすべてのスナップショット概要タイルのコレクションのメモリ使用量グラフを示します。The live memory usage summary view provides a memory usage graph for the running app and a collection of all the snapshot summary tiles. このビューでは、スナップショットの取得、概要情報の分析、他のビューへの移動など、基本的なタスクを実行できます。In this view, you can perform basic tasks like taking snapshots, analyzing summary info, and navigating to other views. データ収集を停止すると、メモリ グラフは表示されなくなり、[ View a snapshot summary ] ビューのみが表示されます。When you stop collecting data, the memory graph goes away and you see only the View a snapshot summary view.

メモリ グラフには、プライベート バイト、ネイティブ メモリ、および JavaScript ヒープを含むアプリのプロセスのメモリのライブ ビューが示されます。The memory graph shows you a live view of the app's process memory, which includes private bytes, native memory, and the JavaScript heap. メモリ グラフは、プロセス メモリのスクロール可能なビューです。The memory graph is a scrollable view of the process memory. 次のように表示されます。Here's what it looks like:

JavaScript メモリ アナライザーのメモリ グラフJavaScript Memory Analyzer memory graph

ユーザー マークがアプリ コードに追加されている場合は (「 Associate source code with memory usage data」参照)、コードの該当セクションにいつ到達したかを示す下向きの三角形がメモリ使用量グラフに表示されます。If you've added user marks to your app code (see Associate source code with memory usage data), an inverted triangle appears in the memory usage graph to indicate when that section of code is reached.

メモリ グラフに示されるメモリの一部は、JavaScript ランタイムによって割り当てられます。Some of the memory shown in the memory graph is allocated by the JavaScript runtime. アプリでこのメモリの使用を制御することはできません。You can't control this memory usage in your app. グラフに表示されるメモリ使用量は、最初のスナップショットを取得したときに増加し、その後は追加のスナップショットを取得するたびに最小限増加します。The memory usage shown in the graph increases when you take your first snapshot, and then increases minimally for each additional snapshot.

View a snapshot summaryView a snapshot summary

アプリのメモリ使用量に関する現在の状態のスナップショットを取得するには、メモリ グラフで [ヒープ スナップショットの作成] をクリックします。To take a snapshot of the current state of your app's memory usage, choose Take Heap Snapshot from the memory graph. スナップショットの概要タイルは、実行中のメモリ使用量の概要 (アプリの実行時) とスナップショットの概要 (アプリの停止時) の両方に表示されます。 このタイルに、JavaScript ヒープに関する情報と、詳細情報へのリンクが示されます。A snapshot summary tile, which appears in both the live memory usage summary (while the app is running) and the snapshot summary (when the app is stopped), provides info about the JavaScript heap and links to more detailed info. 複数のスナップショットを取得した場合、前のスナップショットのデータと比較した追加情報が提供されます。If you take two or more snapshots, a snapshot provides additional info comparing its data to that of the previous snapshot.

注意

JavaScript メモリ アナライザーは、スナップショットを取得する前にガベージ コレクションを強制的に実行します。The JavaScript memory analyzer forces a garbage collection before each snapshot. これにより、実行間における結果の一貫性が高まります。This helps ensure more consistent results among runs.

複数のスナップショットを取得した場合のスナップショットの概要の例を次に示します。Here's an example of a snapshot summary when you take multiple snapshots.

スナップショットの概要Snapshot summary

スナップショットの概要には、次の情報が表示されます。The snapshot summary includes:

  • スナップショットのタイトルとタイムスタンプ。Snapshot title and time stamp.

  • 潜在的な懸案事項の数 (青のアイコン)。Potential issues count (marked by a blue info icon). ノードが DOM にアタッチされていないなど、メモリに関する潜在的な懸案事項がある場合に、その数が表示されます。This number, if present, identifies potential memory issues such as nodes that aren't attached to the DOM. この数値はスナップショットの種類ビューにリンクしています。このビューでは、データが懸案事項の種類に基づいて並べ替えられ、潜在的な懸案事項が強調表示されます。The count links to the Types view of the snapshot, which is sorted by issue type to highlight the potential issues. また、懸案事項のツールヒントが表示されます。A tooltip shows the description of the issue.

  • ヒープ サイズ。Heap size. この数値には、JavaScript ランタイム エンジンによって JavaScript ヒープに追加された DOM 要素およびオブジェクトが含まれます。This number includes DOM elements and objects that the JavaScript runtime engine adds to the JavaScript heap. ヒープ サイズは、スナップショットの種類ビューにリンクしています。The heap size links to the Types view of the snapshot.

  • ヒープ サイズの相違。Differential heap size. この値は、現在のスナップショットのヒープ サイズと前のスナップショットのヒープ サイズとの相違を示しています。This value shows the difference between the heap size of the current snapshot and the heap size of the previous snapshot. メモリが増加している場合は値の後に赤の上矢印が表示され、メモリが減少している場合は緑の下矢印が表示されます。The value is followed by a red up arrow if there is a memory increase or a green down arrow if there is a memory decrease. スナップショットのヒープ サイズに変化がない場合は、数値の代わりに [変更なし] というテキストが表示されます。If the heap size hasn't changed between snapshots, you'll see the text No change instead of a number. 最初のスナップショットの場合は、 [ベースライン]というテキストが表示されます。For the first snapshot, you'll see the text Baseline. ヒープ サイズの相違の値は、スナップショットの相違の [種類] ビューにリンクしています。The differential heap size links to the Types view of the snapshot diff.

  • オブジェクトの数。Object count. この値は、アプリで作成されたオブジェクトのみを示します。 JavaScript ランタイムによって作成された組み込みオブジェクトは除外されています。This count shows only objects created in your app and filters out built-in objects created by the JavaScript runtime. オブジェクトの数は、スナップショットの詳細の種類ビューにリンクしています。The object count links to the Types view of the snapshot details.

  • オブジェクトの数の相違。Differential object count. これは、2 つの値を示します。最初の値は、前のスナップショットから追加された新しいオブジェクトの数です。2 番目の値は、前のスナップショットから削除されたオブジェクトの数です。This shows two values: The first value is the number of new objects added since the previous snapshot; and the second value is the number of objects removed since the previous snapshot. たとえば、この図では、スナップショット #1 以降に、1,859 個のオブジェクトが追加され、1,733 個のオブジェクトが削除されています。For example, the illustration shows that 1,859 objects were added and 1,733 objects were removed since Snapshot #1. オブジェクトの総数が増加している場合はこの情報の後に赤の上矢印が表示され、減少している場合は緑の下矢印が表示されます。This information is followed by a red up arrow if the total object count has increased or a green down arrow if it has decreased. オブジェクトの数に変化がない場合は、数値の代わりに [変更なし] というテキストが表示されます。If the object count hasn't changed, you'll see the text No change instead of a number. 最初のスナップショットの場合は、 [ベースライン]というテキストが表示されます。For the first snapshot, you'll see the text Baseline. オブジェクトの数の相違の値は、スナップショットの相違の種類ビューにリンクしています。The differential object count links to the Types view of the snapshot diff.

  • スナップショットの取得時の画面のスクリーンショット。Screenshot of the screen at the time the snapshot is taken.

スナップショットの詳細の表示View snapshot details

スナップショットの詳細ビューでは、各スナップショットのメモリの使用に関する詳細情報を表示できます。You can view detailed info about memory usage for each snapshot in the snapshot details views.

スナップショットの詳細ビューは、スナップショットの概要ビューでリンクをクリックすると表示されます。From the snapshot summary view, choose a link to see snapshot details. たとえば、ヒープ サイズのリンクをクリックすると、スナップショットの詳細が表示され、既定で種類ビューが開きます。For example, the heap size link opens snapshot details with the Types view open by default.

スナップショットの詳細の [種類] ビューを次に示します。このビューでは、メモリ使用量データが保持サイズに基づいて並べ替えられています。This illustration shows the Types view in a snapshot detail, with the memory usage data sorted by retained size.

考えられる問題を示すスナップショットの詳細ビューSnapshot details view showing potential issues

スナップショットの詳細ビューでは、ツール バーでオプションを選択することで、種類、ルート、またはドミネーター別にメモリ使用量データを確認できます。In the snapshot details view, you can review memory usage data by type, root, or dominator by choosing an option from the toolbar:

  • 種類:Types. オブジェクトの種類別に、ヒープのオブジェクトのインスタンスの数と合計サイズが表示されます。Shows the instance count and total size of objects on the heap, grouped by object type. 既定では、これらはインスタンスの数の順に並べ替えられます。By default, these are sorted by instance count.

    ヒント

    通常、オブジェクト ヒープの種類の相違ビューは、メモリ リークを特定するのに最も有益なビューです。これらのビューは スコープ フィルターを提供し、残されたオブジェクトを特定するのに役立ちます。Typically, diff views of the types on the object heap are the most useful views for identifying a memory leak; these views provide a Scope filter to help identify left over objects.

  • ルート:Roots. ルート オブジェクトから子の参照までのオブジェクトが階層形式で表示されます。Shows a hierarchical view of objects from root objects through child references. 既定では、子ノードは保持サイズ列を基準に、保持サイズが大きいものから順に並べられます。By default, the child nodes are sorted by the retained size column, with the largest at the top.

  • ドミネーター:Dominators. 他のオブジェクトへの排他的参照があるヒープのオブジェクトの一覧が表示されます。Shows a list of objects on the heap that have exclusive references to other objects. ドミネーターは保持サイズ順に並べ替えられます。Dominators are sorted by retained size.

    ヒント

    ドミネーターをメモリから削除すると、そのオブジェクトが保持しているすべてのメモリが解放されます。When you remove a dominator from memory, you reclaim all memory that the object retains. アプリによっては、ドミネーター ビューが、保持メモリ サイズを明確にする場合があります。オブジェクト参照チェーン全体を調査できるからです。For a few apps, the Dominators view might help clarify retained memory sizes, because you can investigate the complete object reference chain.

    3 つのいずれのビューでも同様の種類の値が示されます。All three views show similar value types, including:

  • [識別子]:Identifier(s). オブジェクトを識別する名前。Name that best identifies the object. たとえば、HTML 要素に対しては、ID 属性値が表示されます (使用する場合)。For example, for HTML elements the snapshot details show the ID attribute value, if one is used.

  • [種類]Type. オブジェクトの種類 (HTML の link 要素や div 要素など)。Object type (for example, HTML link element or div element).

  • [サイズ]:Size. オブジェクトのサイズ (参照されたオブジェクトのサイズは含まれません)。Object size, not including the size of any referenced objects.

  • [保持サイズ]Retained size. オブジェクトのサイズと他の親を持たないすべての子オブジェクトのサイズの合計。Object size plus the size of all child objects that have no other parents. 扱いやすいように、この合計はオブジェクトが保持しているメモリの量を表しており、オブジェクトを削除すると指定された量のメモリが解放されます。For practical purposes, this is the amount of memory retained by the object, so if you delete the object you reclaim the specified amount of memory.

  • カウント:Count. オブジェクトのインスタンスの数。Number of object instances. この値は、種類ビューにのみ表示されます。This value appears only in the Types view.

スナップショットの相違の表示View a snapshot diff

JavaScript メモリ アナライザーでは、スナップショットの相違ビューでスナップショットとその前のスナップショットとを比較できます。In the JavaScript memory analyzer, you can compare a snapshot against the previous snapshot in the snapshot diff views.

スナップショットの詳細の相違を表示するには、複数のスナップショットを取得した後で、スナップショットの概要ビューで、異なるヒープ サイズまたは異なるオブジェクトの数のリンクをクリックします。In the snapshot summary view, you can view the differential snapshot details by choosing the differential heap size or differential object count links after two or more snapshots have been taken.

種類、ルート、およびドミネーターに関する相違情報を表示できます。You can view differential info about types, roots, and dominators. スナップショットの相違表示では、2 つのスナップショットの間でヒープに追加されたオブジェクトなどの情報が表示されます。The snapshot diff shows information such as objects that were added to the heap between the two snapshots.

スナップショットの相違の種類ビューを次に示します。This illustration shows the Types view in a snapshot diff.

種類を示すスナップショットの相違点ビューSnapshot diff view showing types

スナップショットの相違ウィンドウでは、[ドミネーター]、[種類]、[ルート] の各ビューは、[ スナップショットの詳細の表示 ] ウィンドウと同じです。In the snapshot diff window, the Dominators, Types, and Roots views are the same as in the View snapshot details window. スナップショットの相違では、スナップショットの詳細と同じ情報に加えて、次の追加の値が表示されます。The snapshot diff shows the same info as the snapshot details, with these additional values:

  • [サイズの相違]。現在のスナップショットと前のスナップショットとの間のオブジェクトのサイズの相違 (参照されたオブジェクトのサイズは含まれません)。Size diff. Difference between the size of the object in the current snapshot and its size in the previous snapshot, not including the size of any referenced objects.

  • [保持サイズの相違]。現在のスナップショットと前のスナップショットとの間のオブジェクトの保持サイズの相違。Retained size diff. Difference between the retained size of the object in the current snapshot and its retained size in the previous snapshot. 保持サイズには、オブジェクトのサイズと他の親を持たないすべての子オブジェクトのサイズが含まれます。The retained size includes the object size plus the size of all its child objects that have no other parents. 扱いやすいように、この保持サイズはオブジェクトが保持しているメモリの量を表しており、オブジェクトを削除すると指定された量のメモリが解放されます。For practical purposes, the retained size is the amount of memory retained by the object, so if you delete the object you reclaim the specified amount of memory.

    スナップショット間で相違情報をフィルターするには、相違ビューの上部でいずれかの スコープ フィルターを選択します。To filter differential info between snapshots, choose one of the Scope filters at the top of the differential views.

  • スナップショット #<number> から残されたオブジェクトObjects left over from Snapshot #<number>. このフィルターは、ヒープに追加されたオブジェクトとヒープから削除されたオブジェクトの相違を、ベースライン スナップショットおよび前のスナップショットと比較して示します。This filter shows the diff between the objects added to the heap and removed from the heap compared to the baseline snapshot and the previous snapshot. たとえば、スナップショットの概要でオブジェクトの数が +205 / -195 を示している場合、このフィルターは、追加され削除されなかった 10 個のオブジェクトを示します。For example, if the snapshot summary shows +205 / -195 in the object count, this filter will show you the ten objects that were added but not removed.

    ヒント

    このフィルターで最も有益な情報を表示するには、以下に説明する手順に従います。 Isolate a memory leakTo show the most useful info in this filter, follow the steps described in Isolate a memory leak.

  • スナップショット #<number> および #<number> の間に追加されたオブジェクトObjects added between Snapshot #<number> and #<number>. このフィルターは、前のスナップショットからヒープに追加されたすべてのオブジェクトを示します。This filter shows all objects added to the heap from the previous snapshot.

  • スナップショット #<number> のすべてのオブジェクトAll objects in Snapshot #<number>. このフィルター設定では、ヒープのオブジェクトはフィルターで除外されません。This filter setting doesn't filter out any objects on the heap.

    現在の [スコープ] フィルターと一致しないオブジェクト参照を表示する場合は、ペインの右上隅にある設定リスト メモリ アナライザーの [設定] ドロップダウン リスト[一致しない参照の表示] を選択します。To show object references that don't match the current Scope filter, select Show non-matching references in the settings list Settings drop-down list in memory analyzer in the upper-right corner of the pane. この設定を有効にすると、一致しない参照が灰色のテキストで表示されます。If you enable this setting, non-matching references are displayed with gray text.

ヒント

Isolate a memory leak 」の手順に従った後、 [スコープ] フィルターで残っているオブジェクトを使用して、メモリをリークしているオブジェクトを特定することをお勧めします。We recommend that you follow the steps in Isolate a memory leak and then use the objects left over Scope filter to help identify objects that are leaking memory.

ドミネーターごとのオブジェクトの表示View objects by dominator

[種類] ビューと [ドミネーター ] ビューでは、オブジェクトをドミネーターの中に折りたたんで表示するかどうかを選択できます (これは [ドミネーター] タブの既定の表示です)。In the Types and Dominators views, you can choose whether to view objects folded into their dominators (this is the default view in the Dominators tab). このビューを選択すると、オブジェクトの最上位のビューにドミネーターのみが表示されます。When this view is selected, only dominators are shown in the top-level view of objects. (非グローバル オブジェクトの下位オブジェクトは、最上位のビューでは非表示になります。)アプリによっては、データのノイズを低減することで、どのオブジェクトがメモリ リークを起こしているかを明確にすることができます。(Objects that are descendants of non-Global objects are hidden from the top-level view.) For some apps, this can clarify which objects are causing a memory leak by reducing noise in the data.

ドミネーターごとにオブジェクトの表示を切り替えるには、 [ドミネーターごとにオブジェクトをおりたたむ] ボタンを選択します。To toggle the view of objects by dominator, choose the Fold in objects by dominator button. オブジェクトをドミネーターに折りたたみFolding objects into their dominators

ドミネーターの詳細については、以下を参照してください。 スナップショットの詳細の表示For more info on dominators, see View snapshot details.

識別子によるデータのフィルターFilter data by identifier

ドミネーター ビューと種類ビューでは、特定の識別子を検索してデータをフィルターで除外できます。In the Dominators and Types views, you can filter out data by searching for particular identifiers. 識別子を検索するには、右上の [識別子フィルター] ボックスに識別子の名前を入力します。To search for an identifier, just type its name in the Identifier filter text box in the upper right. 入力を開始すると、入力した文字を含まない識別子がフィルターで除外されます。When you begin typing, identifiers that don't contain the typed characters are filtered out.

それぞれのビューに独自のフィルターがあるため、別のビューに切り替えるとフィルターは保持されません。Each view has its own filter, so the filter isn't preserved when you switch to another view.

オブジェクト ツリーでのオブジェクトの検索Find an object in the object tree

種類ビューとドミネーター ビューでは、特定のオブジェクトと Global オブジェクトとの関係を表示できます。In the Types and Dominators views, you can see the relationship of a particular object to the Global object. Global オブジェクトをルートとしているオブジェクトに対してガベージ コレクションは行われません。Objects rooted to the Global object will not be garbage-collected. これにより、 Global のオブジェクト ツリーを検索することなく、ルート ビューで簡単に既知のオブジェクトを見つけることができます。You can easily find a known object in the Roots view without searching through the Global object tree. これを行うには、ドミネーター ビューまたは種類ビューでオブジェクトのショートカット メニューを開き、 [ルート ビューで表示]をクリックします。To do this, open the shortcut menu for an object in the Dominators or Type view, and then choose Show in roots view.

共有されたオブジェクト参照の表示View shared object references

種類ビューとドミネーター ビューの下部ペインには、共有された参照を表示するオブジェクト参照の一覧があります。In the Types and Dominators views, the lower pane contains an Object references list that displays shared references. 上部ペインでオブジェクトを選択すると、そのオブジェクトを指すすべてのオブジェクトがオブジェクト参照の一覧に表示されます。When you choose an object in the upper pane, the Object references list displays all objects that point to that object.

注意

循環参照はアスタリスク () および情報提供のツールチップ付きで表示され、展開することはできません。Circular references are shown with an asterisk () and informational tooltip, and cannot be expanded. そうでなければ、参照ツリーをウォークしたりメモリを保持しているオブジェクトを識別したりできなくなります。Otherwise, they would prevent you from walking up the reference tree and identifying objects that are retaining memory.

同等のオブジェクトを識別するのに役立つ追加のヘルプを表示するには、上部ペインの右上隅にある設定リスト メモリ アナライザーの [設定] ドロップダウン リスト[オブジェクト ID の表示] をクリックします。If you want additional help identifying equivalent objects, choose Display object IDs in the settings list Settings drop-down list in memory analyzer in the upper-right corner of the upper pane. このオプションをクリックすると、 [識別子] の一覧のオブジェクト名の横にオブジェクト ID が表示されます (オブジェクト参照の一覧だけでなくすべてのビューに表示されます)。This option displays object IDs next to object names in the Identifier(s) list (the IDs appear in all views, not just the Object references list). 同じ ID を持つオブジェクトは共有された参照です。Objects that have the same ID are shared references.

選択した項目についてのオブジェクト参照の一覧で ID を表示した例を次に示します。The following illustration shows the Object references list for a selected item with IDs displayed.

オブジェクト参照および表示された IDObject references with displayed IDs

組み込みオブジェクトの表示Show built-in objects

ドミネーター ビューと種類ビューには、既定では、アプリで作成するオブジェクトのみが表示されます。By default, the Dominators and Types views show only the objects that you create in your app. これは、不要な情報を除外したり、アプリ関連の問題を特定したりするのに役立ちます。This helps you filter out unneeded info and isolate app-related issues. ただし、JavaScript ランタイムによってアプリ用に生成されたすべてのオブジェクトを表示すると便利な場合もあります。However, at times it might be useful to view all objects that the JavaScript runtime generates for your app.

これらのオブジェクトを表示するには、ペインの右上隅にある設定リスト メモリ アナライザーの [設定] ドロップダウン リスト[組み込み要素の表示] をクリックします。To display these objects, choose Show built-ins in the settings list Settings drop-down list in memory analyzer in the upper-right corner of the pane.

診断セッション ファイルの保存Save diagnostic session files

診断スナップショットの概要とそれに関連する詳細ビューは、.diagsession ファイルとして保存されます。Diagnostic snapshot summaries and their associated details views are saved as .diagsession files. ソリューション エクスプローラー では、前の診断のセッションが診断セッション フォルダーに表示されます。Solution Explorer displays previous diagnostics sessions in the Diagnostic Sessions folder. ソリューション エクスプローラーで、前のセッションを開く操作、ファイルの削除、またはファイル名の変更を行うことができます。In Solution Explorer, you can open previous sessions or remove or rename files.

Associate source code with memory usage dataAssociate source code with memory usage data

メモリの問題があるコードのセクションを特定するには、次の方法に従います。To help isolate the section of code that has a memory issue, use the following methods:

  • 詳細ビューと差分ビューで DOM 要素のクラス名と ID を探します。Look for class names and IDs for DOM elements in the details and differential views.

  • 詳細ビューと差分ビューでソース コードに関連付けられている可能性がある文字列値を探します。Look for string values in the details and differential views that might be associated with your source code.

  • オブジェクト ツリーでのオブジェクトの検索 」コマンドを使用してオブジェクト ツリーをウォークします。Use the Find an object in the object tree command to walk up the object tree. これにより、関連付けられているソース コードを識別できることがあります。This might help to identify the associated source code.

  • メモリ アナライザーのコマンドをソース コードに追加します。Add memory analyzer commands to your source code.

    ソース コードで使用できるコマンドを次に示します。You can use the following commands in your source code:

  • console.takeHeapSnapshot は、JavaScript メモリ アナライザーに表示されるヒープのスナップショットを取得します。console.takeHeapSnapshot takes a heap snapshot that appears in the JavaScript memory analyzer. このコマンドは、 JavaScript Console commands.This command is one of the JavaScript Console commands.

  • performance.mark は、アプリの実行時に概要ビューのメモリ グラフのタイムラインに表示されるユーザー マーク (下向きの三角形) を設定します。performance.mark sets a user mark (the inverted triangle) that appears in the timeline of the memory graph in the summary view while the app is running. このコマンドは、1 つの文字列引数を受け取ります。この引数は、イベントを記述し、メモリ グラフのツールヒントとして表示されます。This command takes one string argument that describes the event and appears as a tooltip in the memory graph. この説明は 100 文字以下にする必要があります。This description must not exceed 100 characters.

ヒント

console.takeHeapSnapshot を使用すると、メモリ使用量シナリオを繰り返す場合に、分析を高速化できます。Use console.takeHeapSnapshot to speed up the analysis when repeating memory usage scenarios.

これらのコマンドをアプリに追加した場合、JavaScript メモリ アナライザー以外でアプリを実行すると例外がスローされます。These commands throw an exception if you add them to your app and run the app outside the JavaScript memory analyzer. ただし、コマンドが存在するかどうかを使用前にテストすることができます However, you can test whether the commands exist before using them. (これらのコマンドはセッションの開始フェーズの時点では存在しません)。takeHeapSnapshot を安全に呼び出すことができるかどうかをチェックするには、次のコードを使用します。(The commands do not exist early in the session startup phase.) To check whether you can safely call takeHeapSnapshot, use this code:

if (console && console.takeHeapSnapshot) {  
    console.takeHeapSnapshot();  
}  

performance.mark を安全に呼び出すことができるかどうかをチェックするには、次のコードを使用します。To check whether you can safely call performance.mark, use this code:

if (performance && performance.mark) {  
    performance.mark("message_string");  
}  

いくつかのユーザー マークが表示されたメモリ グラフを次に示します。現在選択されているユーザー マークに対するツールヒントの performance.mark 文字列引数は "data generated" に設定されています。Here's a memory graph with several user marks and the tooltip for the currently selected user mark, for which the performance.mark string argument is set to "data generated":

プロファイル マークの使用Using a Profile Mark

メモリの問題を識別するためのヒントTips for identifying memory issues

  • メモリ リークの特定」で説明するワークフローに従って、差分ビューの [スナップショット #<number> から残されたオブジェクト] フィルターを使用して、メモリ リークの可能性の高い候補を特定します。Follow the workflow described in Isolate a memory leak and use the Objects left over from Snapshot #<number> filter in a diff view to identify likely candidates for memory leaks.

  • オブジェクト ツリーでのオブジェクトの検索 」を使用すると、オブジェクトがメモリ階層内のどこで参照されているかを確認できます。Use Find an object in the object tree to see where an object is referenced in the memory hierarchy. ルート ビューは、オブジェクトがどのようにグローバル オブジェクトをルートとしているかを示します。これにより、グローバル オブジェクトはガベージ コレクトされなくなります。The Roots view shows how an object is rooted to the global object, which would prevent it from being garbage-collected.

  • メモリに関する問題の原因を特定するのが難しい場合、特にビューに表示される他の多くのオブジェクトへの参照を含む 1 つのオブジェクト (または少数のオブジェクト) を特定するために、さまざまなビュー (種類やドミネーター) を使用して共通点を探します。When the cause of a memory issue is difficult to identify, use the various views (such as Dominators and Types) to look for commonalities, especially to help identify one object (or a few objects) that might contain references to many of the other objects that appear in the view.

  • ユーザーが新しいページに移動した後も誤ってメモリに保持されているオブジェクトを検索します。これは、一般的なメモリの問題の原因です。Look for objects that are retained in memory inadvertently after the user has navigated to a new page, which is a common cause of memory issues. 次に例を示します。For example:

    • URL.CreateObjectUrl 関数の不適切な使用により、この問題が発生する場合があります。The incorrect use of the URL.CreateObjectUrl function can cause this problem.

    • 一部のオブジェクトは dispose メソッドおよび使用の推奨を提供する場合があります。Some objects might provide a dispose method and recommendations for use. たとえば、一覧から dispose メソッドを呼び出して、ページから移動した場合には、 WinJS.Binding.ListcreateFiltered を呼び出す必要があります。For example, you should call dispose on a WinJS.Binding.List if you call the list's createFiltered method and then navigate away from a page.

    • 1 つ以上のイベント リスナーを削除する必要が生じる場合があります。You might need to remove one or more event listeners. 詳細については、「 View DOM event listeners」を参照してください。For more info, see View DOM event listeners.

  • JavaScript メモリ アナライザーについては、この Build 2013 カンファレンスの ビデオ の後半部分をご覧ください。Watch the latter part of this video from the Build 2013 conference about the JavaScript memory analyzer.

  • Managing memory in UWP apps」(UWP アプリでのメモリの管理) をお読みください。Read Managing memory in UWP apps.

  • 問題を特定するためにコードを一時的に変更することを検討してください。Consider temporarily modifying code to isolate problems. たとえば、次の操作を行います。For example, you might want to:

    • メモリ アナライザー用の console.takeSnapshot コマンドと performance.markコマンドを使用しますUse the commands for the memory analyzer, console.takeSnapshot and performance.mark. (「 Associate source code with memory usage data」を参照)。(See Associate source code with memory usage data.)

      これらのコマンドを使用すると、手動でヒープ スナップショットを作成しても特定できない問題を特定するのに役立ちます。You can use these commands to help isolate issues that you can't isolate by manually taking a heap snapshot.

    • JavaScript メモリ アナライザーのビュー (種類ビューなど) でテスト オブジェクトを作成してトレースします。Create a test object and trace it in the JavaScript memory analyzer views, such as the Types view. たとえば、非常に大きいオブジェクトを別のオブジェクトにアタッチすることで、特定のオブジェクトまたは要素に対してガベージ コレクションが行われたかどうかを確認できます。For example, you can attach a very large object to another object to see whether a particular object or element has been garbage-collected.

関連項目See Also

チュートリアル: メモリ リークの検出 (JavaScript)Walkthrough: Find a memory leak (JavaScript)