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
189
190
191
192
|
---
title: Monitor de Rede
slug: Tools/Network_Monitor
tags:
- Depuração
- Desenvolvimento
- Ferramentas
- Guía
- Redes
translation_of: Tools/Network_Monitor
---
<div>{{ToolsSidebar}}</div>
<p>O Monitor de Rede mostra todas as solicitações realizadas por uma página, o quanto a solicitação demorou, entre outros detalhes. Ao ir no menu "Ferramentas do Desenvolvedor Web" e clicar em "Rede" o monitor irá aparecer na parte de baixo da janela.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7405/nm-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Lista_de_Requisições_de_Rede">Lista de Requisições de Rede</h2>
<p>O Monitor de Rede irá mostrar as solicitações em uma tabela ao carregar uma página, cada requisição aparece em uma linha diferente:<br>
<img alt="" src="https://mdn.mozillademos.org/files/7419/nm-row.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>A cada atualização, o monitor é limpo antes de mostrar as novas solicitções. Para modificar essa opção marque "Ativar logs persistentes" na Caixxa de Ferramentas.</p>
<h3 id="Campos_solicitados">Campos solicitados</h3>
<p>Cada linha mostra:</p>
<ul>
<li><strong>√</strong>: o status retornado pelo HTTP. A identificação é feita através de diferentes cores: verde para sucesso (2XX codes), laranja para redirecionamento (3XX), ou vermelho para errors (4XX and 5XX). A partir do Firefox 30, o código correspondente é mostrado logo após.</li>
<li><strong>Método</strong>: método de requisição HTTP</li>
<li><strong>Arquivo</strong>: nome do arquivo solicitado.</li>
<li><strong>Servidor</strong>: dominio do arquivo solicitado.</li>
<li><strong>Tipo</strong>: <code>Content-type</code> da resposta;</li>
<li><strong>Tamanho</strong>: tamanho da resposta, depois de descomprimida.</li>
</ul>
<p>Ao clicar no nome de uma das colunas, as requisições são organizadas pela coluna selecionada.</p>
<p>A partir do Firefox 30, se o arquivo for uma imagem, a linha mostrá uma miniatura da imagem, e ao por o apontador sobre o nome poderá visualizá-la um pouco maior:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7403/nm-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Linha_de_Tempo">Linha de Tempo</h3>
<p> A lista de requisição também mostra a linha de tempo para diferentes partes de cada requisição. Cada linha de tempo é dada pela posição horizontal em cada linha relativa a outra requisição de rede, entaão você pode ver o tempo total levado para carregar a página. Para mais detalhes sobre a cor do código usado aqui, veja a sessão <a href="/pt-BR/docs/Tools/Network_Monitor#Tempos">Tempos</a>.</p>
<h3 id="Filtrando_pelo_Tipo_de_Conteúdo">Filtrando pelo Tipo de Conteúdo</h3>
<p>Na parte inferior da janela uma linha de botões lhe abilita a filtrar requisições pelo tipo de conteúdo da resposta:<img alt="" src="https://mdn.mozillademos.org/files/7395/nm-filter-by-type.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Na extrema direita há um botão chamado "Limpar": como você pode imaginar, ele permite limpar a lista de requisições de rede.</p>
<h3 id="Menu_de_Contexto">Menu de Contexto</h3>
<p>Clique-direito em uma linha da lista exibe um menu de contexto com as seguintes opções:</p>
<ul>
<li>Abrir em nova aba</li>
<li>Copiar URL</li>
<li>Copiar como cURL (só do Firefox 31 em diante)</li>
<li>Copiar imagem como URI de dados (só para imagens)</li>
<li>Editar e reenviar</li>
<li>Iniciar <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Análise de Performance</a> para a página</li>
</ul>
<h4 id="Editar_e_Reenviar">Editar e Reenviar</h4>
<p>Esta opção abre um editor e lhe abilita a editar o método, a URL e os parametros da requisição, editar os cabeçalhos, e reenviar a requisição.</p>
<h4 id="Copiar_como_cURL">Copiar como cURL</h4>
<div class="geckoVersionNote">
<p>Isto é novo no Firefox 31.</p>
</div>
<p>Esta opção copia a requisição de rede para a área de transferência como um comando <a href="http://curl.haxx.se/">cURL</a>, de modo a você poder executá-lo em uma linha de comando. O comando pode incluir as seguintes opções:</p>
<table class="standard-table">
<tbody>
<tr>
<td><code>-X [METHOD]</code></td>
<td>Se o método não for GET ou POST</td>
</tr>
<tr>
<td><code>--data</code></td>
<td>Para parâmetros da requisição codificados para URL</td>
</tr>
<tr>
<td><code>--data-binary</code></td>
<td>Para parâmetros de requisição multipart</td>
</tr>
<tr>
<td><code>--http/VERSION</code></td>
<td>Se a versão HTTP não for 1.1</td>
</tr>
<tr>
<td><code>-I</code></td>
<td>Se o método for HEAD</td>
</tr>
<tr>
<td><code>-H</code></td>
<td>
<p>Um para cada cabeçalho de requisição.</p>
<p>Desde o Firefox 34, se o cabeçalho "Accept-Encoding" está presente, o comando cURL incluirá <code>--compressed</code> em vez de <code>-H "Accept-Encoding: gzip, deflate"</code>. Isto significa que a resposta será automaticamente descomprimida.</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Detalhes_de_Requisições_de_Rede">Detalhes de Requisições de Rede</h2>
<p>O clique em uma linha exibe um novo painel à direita do monitor de rede, que dá informações mais detalhadas sobre a requisição.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7393/nm-details-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">As abas no topo deste painel lhe permitem alternar entre cinco páginas diferentes:</p>
<ul>
<li><strong>Headers</strong></li>
<li><strong>Cookies</strong></li>
<li><strong>Params</strong></li>
<li><strong>Response</strong></li>
<li><strong>Timings</strong></li>
</ul>
<p>Do Firefox 30 em diante, há uma sexta página que aparece se o tipo de conteúdo é HTML, a página <strong>Preview</strong>.</p>
<p>Um clique no ícone à esquerda das abas fecha o painel e retorna à visão de lista.</p>
<h3 id="Headers">Headers</h3>
<p>Esta aba lista informações básicas sobre a requisição incluindo URL e código de status, e também os cabeçalhos HTTP de requisição e resposta que foram enviados:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7397/nm-headers.png" style="display: block; margin-left: auto; margin-right: auto;">Você pode filtrar os cabeçalhos que são exibidos:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7399/nm-headers-filtered.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 684px;"></p>
<h3 id="Cookies">Cookies</h3>
<p>Esta aba lista detalhes completos de qualquer cookie enviado com a requisição ou a resposta:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7391/nm-cookies.png" style="display: block; margin-left: auto; margin-right: auto;">Asim como os Headers, você pode filtrar a lista de cookies exibidos.</p>
<h3 id="Params">Params</h3>
<p>Esta aba exibe os parâmetros de GET e os dados de POST de uma requisição:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7407/nm-params.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Response">Response</h3>
<p>O conteúdo completo da resposta. Se a resposta é HTML, JS, ou CSS, ela será mostrada como texto:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7413/nm-response-html.png" style="display: block; margin-left: auto; margin-right: auto;">Se a resposta for JSON, será exibida como um objeto inspecionável:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7421/nm-response-json.png" style="display: block; margin-left: auto; margin-right: auto;">Se a resposta é uma imagem, a aba exibe uma amostra:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7415/nm-response-image.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Timings">Timings</h3>
<p>A aba Timings tem uma visão mais detalhada, anotada, da barra da linha do tempo para a requisição, mostrando a divisão do tempo total entre os vários estágios:<img alt="" src="https://mdn.mozillademos.org/files/7417/nm-timings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Preview">Preview</h3>
<div class="geckoVersionNote">
<p>Este recurso é novo no Firefox 30.</p>
</div>
<p>Do Firefox 30 em diante, se o tipo de arquivo é HTML uma sexta aba aparece, rotulada de "Preview". Ela renderiza o HTML:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7401/nm-html-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Análise_de_Desempenho">Análise de Desempenho</h2>
<div class="geckoVersionNote">
<p>A ferramenta de análise de desempenho é nova no Firefox 29.</p>
</div>
<p>Do Firefox 29 em diante, o Monitor de Rede inclui uma ferramenta de análise de desempenho, para ajudar a lhe mostrar quanto tempo o navegador levou para descarregar as diferentes partes de seu sítio.<br>
<br>
Para executar a ferramenta de análise de desempenho clique no ícone de cronômetro na barra de ferramentas, no rodapé do Monitor de Rede:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7411/nm-performance-button.png" style="display: block; margin-left: auto; margin-right: auto;">(Alternativamente, se você acabou de abrir o Monitor de Rede e ele ainda não está populado com a lista de requisições, você terá o ícone de cronômetro na janela principal.)</p>
<p>O Monitor de Rede, então, carrega o sítio duas vezes: uma com o cache do navegador vazio e outra com o cache já preparado. Isto simula a primeira visita de um usuário ao seu sítio, e as visitas subsequentes. Ele exibe os resultados de cada execução lado a lado ou verticalmente, se a janela for estreita:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7409/nm-performance.png" style="display: block; margin-left: auto; margin-right: auto;">Os resultados de cada execução são sumarizados em uma tabela e em um gráfico de pizza. A tabela agrupa os recursos por tipo, e mostra o tamanho total de cada recurso e o tempo total que ele levou para carregá-los. O gráfico de pizza mostra o tamanho relativo de cada tipo de recurso.</p>
<p>Para voltar à lista de requisições de rede do Monitor de Rede clique no botão "Back" à esquerda.</p>
<p>Clicar em uma fatia da pizza leva você ao Monitor de Rede daquela execução, com um filtro automaticamente aplicado para ver <a href="/pt-BR/docs/Tools/Network_Monitor#Filtering_by_content_type">só aquele tipo de recurso</a>.</p>
|
