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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
---
title: Подробиці мережних запитів
slug: Інструменти/Network_Monitor/request_details
translation_of: Tools/Network_Monitor/request_details
---
<p>{{ToolsSidebar}}</p>
<p><span class="tlid-translation translation"><span title="">Панель </span></span>подробиць мережних запитів викликається при виборі (натисканні) <span class="tlid-translation translation"><span title="">мережного запиту у списку.</span> <span title="">Ця панель надає більш детальну інформацію про запит.</span></span></p>
<h2 id="Подробиці_мережних_запитів">Подробиці мережних запитів</h2>
<p><span class="tlid-translation translation"><span title="">Натискання на рядку відображає нову панель у правій частині Монітора мережі, яка надає більш детальну інформацію про запит.</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16261/network_request_details.png" style="display: block; height: 741px; margin-left: auto; margin-right: auto; width: 930px;"></p>
<p><span class="tlid-translation translation"><span title="">Вкладки у верхній частині цієї області дозволяють переключатися між наступними сторінками:</span></span></p>
<ul>
<li><strong>Заголовки (Headers)</strong></li>
<li><strong>Куки (Cookies)</strong></li>
<li><strong>Параметри (Params)</strong></li>
<li><strong>Відповідь (Response)</strong></li>
<li><strong>Кеш (Cache)</strong></li>
<li><strong>Розклад (Timings)</strong></li>
<li><strong>Безпека (Security) </strong>(тільки для захищених сторіок)</li>
<li><strong>Трасування стека (Stack trace)</strong> ( <span class="tlid-translation translation"><span title="">тільки коли запит має трасування стека, наприклад,</span> <span title="">скрипт, викликаний іншим сценарієм</span></span>). <span class="tlid-translation translation"><span title="">Ця інформація доступна починаючи з </span></span>Firefox 55.</li>
</ul>
<p><span class="tlid-translation translation"><span title="">Натискання крайньої правої піктограми на </span></span><a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a> ховає <span class="tlid-translation translation"><span title="">панель подробиць.</span></span></p>
<h3 id="Заголовки_(Headers)">Заголовки <strong>(Headers)</strong></h3>
<p><span class="tlid-translation translation"><span title="">На цій вкладці наведено основну інформацію про запит:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16262/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>Ця інформація містить:</p>
<ul>
<li><strong>Запит URL (Request URL)</strong></li>
<li><strong>Спосіб запиту (Request method)</strong></li>
<li><strong>Віддалена адреса (Remote IP address)</strong> і <strong>port</strong></li>
<li><strong>Код стану (Status code</strong>) <span class="tlid-translation translation"><span title="">з піктограмою знаку запитання, що посилається на документ MDN, щоб отримати докладнішу інформацію (якщо вона доступна)</span></span></li>
<li><strong>Заголовки запиту</strong> і <strong>заголовки відповіді</strong> <strong>(HTTP request</strong> and <strong>response headers</strong>) що були передані</li>
<li>Кнопка <strong>Редагувати і надіслати заново</strong> (<strong>Edit and Resend</strong>) що викликає відповідну <a href="/uk/docs/Tools/Network_Monitor/request_list/#Edit_and_Resend">команду</a></li>
<li>Кнопка <strong>Необроблені заголовки (Raw headers)</strong> для відображення необроблених заголовків запитів і відповідей</li>
</ul>
<p><span class="tlid-translation translation"><span title="">Ви можете відфільтрувати відображені заголовки:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16266/network_headers.png" style="border: 1px solid black; display: block; height: 295px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p><span class="tlid-translation translation"><span title="">Поруч із кожним заголовком у рядку коду статусу з'явиться піктограма знаку питання - це посилання на додаткову інформацію про цей код статусу в <a href="/uk/docs/Web/HTTP/Headers">документації MDN заголовків HTTP</a>.</span></span></p>
<h3 id="Куки_(Cookies)">Куки (Cookies)</h3>
<p><span class="tlid-translation translation"><span title="">На цій вкладці наведено повну інформацію про всі файли cookie, надіслані разом із запитом або відповіддю:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16265/network_cookies.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p>
<p><span class="tlid-translation translation"><span title="">Як і у заголовках, тут можна відфільтрувати список файлів куків, що потрібно показати.</span> <span title="">Відображається повний список атрибутів кука (див. Наведений нижче знімок екрана з прикладів cookie Response з додатковими атрибутами).</span></span></p>
<p><img alt="cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite" src="https://mdn.mozillademos.org/files/16108/highlight-samesite-attribute.png" style="display: block; height: 394px; margin: 0px auto; width: 1047px;"></p>
<p><span class="tlid-translation translation"><span title="">Атрибут </span></span><code>samesite</code> <span class="tlid-translation translation"><span title="">доступний починаючи з Firefox 62 </span></span>({{bug("1452715")}}).</p>
<h3 id="Параметри_(Params)">Параметри (Params)</h3>
<p><span class="tlid-translation translation"><span title="">На цій вкладці відображаються параметри GET і дані POST запиту:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16333/params.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<h3 id="Відповідь_(Response)">Відповідь (Response)</h3>
<p><span class="tlid-translation translation"><span title="">Повний зміст відповіді.</span> <span title="">Якщо відповідь - HTML, JS або CSS, вона буде показана як текст:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16268/network_response.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p><span class="tlid-translation translation"><span title="">Якщо відповідь у форматі JSON, вона буде відображатися як об'єкт:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16332/response_json.png" style="display: block; height: 268px; margin: 0 auto; width: 900px;"></p>
<p><span class="tlid-translation translation"><span title="">Якщо відповідь - це зображення, на вкладці відображається попередній перегляд:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16331/response_pane_image.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<h4 id="Кеш_(Cache)">Кеш (Cache)</h4>
<p><span class="tlid-translation translation"><span title="">Якщо відповідь буде кешованою (тобто 304), на вкладці Кеш буде показано відомості про цей кешований ресурс.</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16329/response_cache.png" style="border: 1px solid black; display: block; height: 245px; margin: 0px auto; width: 567px;"></p>
<p>Ці деталі містять:</p>
<ul>
<li><strong>Остання вибірка</strong> <strong>(Last fetched):</strong> <span class="tlid-translation translation"><span title="">Дата останньої вибірки ресурсу</span></span> </li>
<li><strong>Число вибірок</strong> <strong>(Fetched count):</strong> <span class="tlid-translation translation"><span title="">Кількість разів вибору ресурсу у поточному сеансі </span></span></li>
<li><strong>Розмір даних</strong> <strong>(Data size):</strong> Розмір ресурсу .</li>
<li><strong>Остання зміна (Last modified):</strong> <span class="tlid-translation translation"><span title="">Дата останньої зміни ресурсу</span></span></li>
<li><strong>Термін дії</strong> <strong>(Expires):</strong> <span class="tlid-translation translation"><span title="">Дата закінчення терміну дії ресурсу</span></span></li>
<li><strong>Пристрій</strong> (<strong>Device):</strong> <span class="tlid-translation translation"><span title="">Пристрій, з якого був отриманий ресурс (наприклад, "диск").</span></span></li>
</ul>
<h4 id="HTML_перегляд_(preview)">HTML перегляд (preview)</h4>
<p><span class="tlid-translation translation"><span title="">Якщо відповідь є HTML, на вкладці "Відповідь" ("Response"), вище "Корисного навантаження на відповідь" (</span></span>response payload<span class="tlid-translation translation"><span title="">), з'являється попередній візуальний перегляд HTML.</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16272/settings_for_browser_debugger.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 744px; margin: 0px auto; width: 900px;"></p>
<h3 id="Розклад_(Timings)">Розклад (Timings)</h3>
<p><span class="tlid-translation translation"><span title="">Вкладка «Розклад» (</span></span>Timings<span class="tlid-translation translation"><span title="">) розбиває мережний запит на наступний набір етапів, означених у специфікації </span></span><a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">Архіву HTTP</a> <span class="tlid-translation translation"><span title="">:</span></span></p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Назва</th>
<th scope="col">Опис</th>
</tr>
</thead>
<tbody>
<tr>
<td>Заблоковано (Blocked)</td>
<td>
<p><span class="tlid-translation translation"><span title="">Час, проведений в черзі в очікуванні мережного підключення.</span></span></p>
<p><span class="tlid-translation translation"><span title="">Браузер накладає обмеження на кількість одночасних з'єднань, які можуть бути зроблені до одного серверу.</span> <span title="">Типово, у Firefox це значення рівне 6, але його можна змінити за допомогою налаштувань </span></span> <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> <span class="tlid-translation translation"><span title="">.</span> <span title="">Якщо використовуються всі підключення, браузер не може завантажувати більше ресурсів, доки з'єднання не буде вивільнено.</span></span></p>
</td>
</tr>
<tr>
<td>Розв'язання DNS (DNS resolution)</td>
<td><span class="tlid-translation translation"><span title="">Час, що потребувався для розв'язання імені хоста.</span></span></td>
</tr>
<tr>
<td>З'єднання (Connecting)</td>
<td><span class="tlid-translation translation"><span title="">Час, що потребувався для створення з'єднання TCP.</span></span></td>
</tr>
<tr>
<td>Надсилання (Sending)</td>
<td><span class="tlid-translation translation"><span title="">Час, що потребувався для передачі HTTP-запиту на сервер.</span></span></td>
</tr>
<tr>
<td>Очікування (Waiting)</td>
<td><span class="tlid-translation translation"><span title="">Очікування відповіді від сервера.</span></span></td>
</tr>
<tr>
<td>Одержання (Receiving)</td>
<td><span class="tlid-translation translation"><span title="">Час, що потребувався для читання всієї відповіді від сервера (або кешу).</span></span></td>
</tr>
</tbody>
</table>
<p>Ця вкладка <span class="tlid-translation translation"><span title=""> представляє більш детальний, анотований, перегляд смуги часу для цього запиту, що показує, як загальний час очікування розділяється на різні етапи:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16271/network_timings.png" style="border: 1px solid black; display: block; height: 749px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<h3 id="Безпека_(Security)">Безпека (Security)</h3>
<p><span class="tlid-translation translation"><span title="">Якщо сайт обслуговується через HTTPS, Ви отримуєте додаткову вкладку під назвою "Безпека" (</span></span>"Security"<span class="tlid-translation translation"><span title="">).</span> Вона <span title="">містить відомості про захищене з'єднання, що використовується, включно з назвою протоколу, набору шифрів і деталями сертифікату:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16269/network_security.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p>
<p><span class="tlid-translation translation"><span title="">На вкладці "Безпека" відображається попередження про слабкі місця безпеки.</span> <span title="">Наразі він попереджає про два слабкі місця:</span></span></p>
<ol>
<li>Використання SSLv3 замість TLS</li>
<li>Використання шифру RC4</li>
</ol>
<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p>
<h3 id="Трасування_стека_(Stack_trace)">Трасування стека (Stack trace)</h3>
<p>На цій вкладці відображається трасування <span class="tlid-translation translation"><span title="">стеків для відповідей, які мають стекові сліди.</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16270/network_stack_trace.png" style="border: 1px solid black; display: block; height: 205px; margin: 0px auto; width: 900px;"></p>
<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2>
<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі</span></span>:</p>
<ul>
<li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Toolbar" rel="nofollow">Панель інструментів</a></li>
<li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list" rel="nofollow">Список мережних запитів</a></li>
<li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/recording" rel="nofollow">Записування мережного трафіку</a></li>
<li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_Analysis" rel="nofollow">Аналіз швидкодії</a></li>
<li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li>
</ul>
|
