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:

  • 앱에서 메모리 사용 문제를 신속하게 찾을 수 있도록 관련성이 가장 높은 데이터를 강조합니다.Help you quickly find memory usage issues in your app by emphasizing the most relevant data.

    이 데이터는 두 스냅숏의 차이점 설명과 더 자세한 보기 링크가 있는 스냅숏 요약에서 찾을 수 있습니다.You get this data in snapshot summaries that show the differences between two snapshots and provide links to more detailed views.

  • 문제를 격리하는 데 도움이 되는 지배자, 형식 및 루트 뷰를 제공합니다.Provide views of dominators, types, and roots to help isolate issues.

  • JavaScript 힙 데이터에서 사용할 수 없는 정보를 줄입니다.Reduce non-actionable info in the JavaScript heap data.

    앱 코드에서 직접 만들지 않은 개체는 자동으로 필터링됩니다. 또한 개체 이름으로 데이터를 필터링할 수 있습니다.Objects that aren't created directly in your app code are automatically filtered out. You can also filter data by object name.

JavaScript 메모리 분석기 실행Run the JavaScript memory analyzer

작업 중인 UWP 앱이 Visual Studio에서 열려 있는 경우 메모리 분석기를 사용할 수 있습니다.You can use the memory analyzer when you have a working UWP app open in Visual Studio.

메모리 분석기를 실행하려면To run the memory analyzer

  1. Visual Studio를 엽니다.Open Visual Studio.

  2. Visual Studio에서 앱을 실행하는 경우 표준 도구 모음의 디버깅 시작 목록에서 프로젝트에 대한 디버그 대상을 로컬 컴퓨터 또는 장치 중에서 선택합니다.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 Local Machine or Device.

  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. 앱으로 전환하고 테스트 중인 시나리오를 반복합니다(한 번만 반복).Switch to your app and repeat the scenario that you are testing (repeat once only).

  8. Visual Studio로 전환하고 두 번째 스냅숏을 작성합니다.Switch to Visual Studio and take a second snapshot.

  9. 앱으로 전환하고 테스트 중인 시나리오를 반복합니다(한 번만 반복).Switch to your app and repeat the scenario that you are testing (repeat once only).

  10. Visual Studio로 전환하고 세 번째 스냅숏을 작성합니다.Switch to Visual Studio and take a third snapshot.

    다음 그림에서는 두 번째 및 세 번째 스냅숏의 예를 보여줍니다.The following illustration shows an example of a second and third snapshot.

    두 번째 및 세 번째 스냅숏Second and third snapshot

    이 워크플로의 기본, 두 번째 및 세 번째 스냅숏을 작성하여 메모리 누수와 관련이 없는 변경 내용을 보다 쉽게 필터링할 수 있습니다.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. 세 번째 스냅숏에서 다음과 같은 차이 뷰 중 하나에 대한 링크를 선택합니다.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). 링크 텍스트는 두 값(예: +1858/-1765)을 보여줍니다. 첫 번째 값은 이전 스냅숏 이후에 추가된 새 개체의 수이고, 두 번째 값은 이전 스냅숏 이후에 제거된 개체 수입니다.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

    앞의 그림에는 이전 스냅숏에서 남은 개체 두 개가 표시됩니다.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. 남아 있는 개체 뷰에 개체가 너무 많으면 메모리 누수가 발생하는 기간을 추가로 격리한 후 스냅숏 세 개를 다시 만들어 보세요.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 data, Associate 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. 두 값을 보여줍니다. 첫 번째 값은 이전 스냅숏 이후에 추가된 새 개체의 수이고, 두 번째 값은 이전 스냅숏 이후에 제거된 개체 수입니다.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,859개의 개체가 추가되고 스냅숏 #1부터 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.

    세 가지 뷰 모두 값 형식은 유사합니다.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. 스냅숏 차이는 두 스냅숏 사이의 힙에 추가된 개체와 같은 정보를 보여 줍니다.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 leak에 설명된 단계를 따르세요.To 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가 표시됩니다(개체 참조 목록뿐 아니라 모든 뷰에 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.

표시된 ID가 있는 개체 참조Object 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. 이 명령은 이벤트를 기술하는 하나의 문자열 인수를 사용하며 메모리 그래프에 도구 설명으로 나타납니다.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 메모리 분석기 외부에서 응용 프로그램을 실행하면 명령이 예외를 throw합니다.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 문자열 인수는 "데이터 생성됨"으로 설정되어 있습니다.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 to identify 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.

  • 메모리 문제의 원인을 식별하기 어려울 때는 여러 가지 뷰(예: 도미네이터 및 형식)를 사용하여 공통점을 찾습니다. 이는 특히 뷰에 표시된 여러 다른 개체에 대한 참조를 포함할 수 있는 하나의 개체(또는 몇 가지 개체)를 식별하는데 도움이 됩니다.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.List 에서 createFiltered 를 호출해야 합니다.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.

    • 하나 이상의 이벤트 수신기를 제거해야 할 수 있습니다.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.

  • UWP 앱에서 메모리 관리를 참조하세요.Read Managing memory in UWP apps.

  • 임시로 코드를 수정하여 문제를 격리하는 방법도 있습니다.Consider temporarily modifying code to isolate problems. 예를 들어, 다음을 수행합니다.For example, you might want to:

    • 메모리 분석기용 명령인 console.takeSnapshotperformance.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.