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.

네트워크 도구는 Windows 유니버설 플랫폼 앱만 지원합니다.The Network tool supports only Windows Universal Platform apps. 지금은 다른 플랫폼이 지원되지 않습니다.Other platforms are not supported at this time.

참고

네트워크 도구에 대한 자세한 설명은 Introducing Visual Studio's network tool(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.

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.
쿠키Cookies 응답 및 요청 쿠키 데이터입니다.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 Video: VS Diagnostics tools - New Network Profiler(Channel 9 비디오: VS 진단 도구 – 새 네트워크 프로파일러)Channel 9 Video: VS Diagnostics tools - New Network Profiler
Visual Studio의 프로파일링Profiling in Visual Studio
프로파일링 기능 둘러보기Profiling Feature Tour