blob: 899055fb55c93a7008c356e8f1436b32a29e2c79 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
---
title: Network Monitor
slug: Tools/Network_Monitor
tags:
- 가이드
- 개발자도구
- 네트워킹
- 데브툴
- 디버깅
- 툴
- 파이어폭스
translation_of: Tools/Network_Monitor
---
<div>{{ToolsSidebar}}</div>
<p>네트워크 모니터는 파이어폭스가 페이지를 로드할 때나 <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>로 인해 행해진 모든 네트워크 요청들의 소요 시간 및 세부사항을 나타냅니다.</p>
<h2 id="네트워크_모니터_열기">네트워크 모니터 열기</h2>
<p>네트워크 모니터를 여는데 몇 가지 다른 방법이 있습니다:</p>
<ul>
<li>다음 키를 누릅니다: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> ( Mac 에서는 <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> 누릅니다).</li>
<li>웹 개발자 메뉴 (OS X 및 Linux의 도구 메뉴의 서브 메뉴)에서 "네트워크"를 선택하십시오.</li>
<li>기본 툴바 또는 햄버거 메뉴(<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">) 아래에 있는 렌치 모양 아이콘(<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">)을 클릭 한 다음 "Network"를 선택하세요.</li>
</ul>
<p>네트워크 모니터가 브라우저 창 하단에 나타납니다. 처음 네트워크 모니터를 열었을 때, request 정보가 보이지 않고 아래와 같이 나타납니다. <img alt="" src="https://mdn.mozillademos.org/files/16854/network_monitor_new.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
<p>두 가지 액션 모두, 네트워크 모니터가 네트워크 활동 모니터링을 시작하게 합니다. 도구가 네트워크 요청들을 모니터링하면 화면에 다음과 같이 표시됩니다.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16245/network_monitor.png" style="border: 1px solid black; display: block; height: 541px; margin: 0px auto; width: 800px;" title=""></p>
<p>네트워크 모니터는 도구 상자가 열려있을 때면 네트워크 모니터가 선택되지 않아도 네트워크 요청들을 기록합니다. 따라서, 네트워크 활동을 보기 위해서 Console을 보고 있어도 Console을 Network 모니터로 전환함으로써 페이지를 새로고침할 필요 없이 디버깅을 시작 할 수 있습니다.</p>
<h2 id="UI_overview">UI overview</h2>
<p>UI는 크게 네 부분으로 나뉩니다:</p>
<ul>
<li>메인 화면에는 <a href="/en-US/docs/Tools/Network_Monitor/Toolbar">toolbar</a>, <a href="/en-US/docs/Tools/Network_Monitor/request_list">network request list</a>, <a href="/en-US/docs/Tools/Network_Monitor/request_details">network request details pane</a>이 있습니다:</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/16246/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin: 0px auto; width: 800px;" title=""></p>
<ul>
<li>The <a href="/en-US/docs/Tools/Network_Monitor/Performance_analysis">performance analysis</a> view는 별도의 화면입니다:</li>
</ul>
<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/16276/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 1382px;" title=""></p>
<h2 id="Working_with_the_network_monitor">Working with the network monitor</h2>
<p>The following articles cover different aspects of using the network monitor:</p>
<ul>
<li><a href="/en-US/docs/Tools/Network_Monitor/Toolbar">Toolbar</a></li>
<li><a href="/en-US/docs/Tools/Network_Monitor/request_list">Network request list</a></li>
<li><a href="/en-US/docs/Tools/Network_Monitor/request_details">Network request details</a></li>
<li><a href="/en-US/docs/Tools/Network_Monitor/recording">Network traffic recording</a></li>
<li><a href="/en-US/docs/Tools/Network_Monitor/Performance_Analysis">Performance analysis</a></li>
<li><a href="/en-US/docs/Tools/Network_Monitor/Throttling">Throttling</a></li>
</ul>
|
