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
|
---
title: Monitor de Red
slug: Tools/Monitor_de_Red
tags:
- Debugging
- Firefox
- Guía
- Herramientas
- Herramientas de Desarrollador
- Redes
translation_of: Tools/Network_Monitor
---
<p>El monitor de red muestra todas las solicitudes de red que Firefox realiza (por ejemplo, cuando carga una página, o debido a <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>), cuanto tiempo toma cada petición, y los detalles de cada petición. Para abrir el monitor seleccione "Red" del menu "Desarrollador Web" (el cual es un Submenú del Menú "Herramientas" en Mac), o abra Herramientas de Desarrollador Web y seleccione la solapa "Red".</p>
<p>El monitor de red aparecerá al final de la ventana de navegación. Recargue la página para ver las solicitudes:</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_Solicitudes_de_Red">Lista de Solicitudes de Red</h2>
<p>Por defecto, el Monitor de Red muestra una lista de todas las solicitudes de red hechas durante la carga de una página. Cada solicitud es mostrada en su propia linea:<br>
<img alt="" src="https://mdn.mozillademos.org/files/7419/nm-row.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Por defecto, el Monitor de Red se limpia cada vez que ud. navega a una nueva página o recarga la página actual. Desde Firefox 31 en adelante se puede cambiar este comportamiento selecccionando "Habilitar Registros Persistentes" en las Opciones de <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Common_preferences">Herramientas</a>.</p>
<h3 id="Area_de_Solicitudes_de_Red">Area de Solicitudes de Red</h3>
<p>Cada fila muestra:</p>
<ul>
<li><strong>√</strong>: El código HTTP retornado. Este es mostrado por un ícono a colores: Verde para correcto (Códigos 2XX ), naranja para redirección (3XX), o rojo para errores (4XX and 5XX). Desde Firefox 30 en adelante, el código exacto es mostrado inmediatamente después del ícono.</li>
<li><strong>Método</strong>: El método de Solicitud HTTP</li>
<li><strong>Archivo</strong>: Nombre base del archivo solicitado.</li>
<li><strong>Dominio</strong>: Dominio del path solicitado.</li>
<li><strong>Tipo</strong>: <code>Content-type</code> de la respuesta</li>
<li><strong>Tamaño</strong>: Tamaño de la respuesta</li>
</ul>
<p>La barra de herramientas en la parte superior etiqueta estas columnas, y hacer click en las etiquetas ordena todas las solicitudes por esa columna.</p>
<p>Desde Firefox 30 en adelante, si el archivo es una imagen, la fila incluye una miniatura de la imagen, y pasar por arriba del nombre del archivo muestra un preview en un tooltip:</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="Linea_de_Tiempo">Linea de Tiempo</h3>
<p>La lista de solicitudes también muestra una linea de tiempo para las diferentes partes de cada solicitud. Cada linea de tiempo es dada en posición horizontal en su fila relativa a las otras solicitudes de red, de manera que ud. pueda ver el tiempo total que tomó cargar la página. Para más detalles sobre los códigos de color usados aqui, vea la sección en la página <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Timings">Tiempos</a>.</p>
<h3 id="Filtrando_por_tipo_de_Contenido">Filtrando por tipo de Contenido</h3>
<p>Al final de la ventana una fila de botones le permite a ud. filtrar las solicitudes por el tipo de contenido de la respuesta:<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>En el extremo derecho de esta fila hay un botón llamado "Limpiar": como ud. podrá adivinar, esto le permite limpiar la lista de solicitudes de red.</p>
<h3 id="Menu_Contextual">Menu Contextual</h3>
<p>Haciendo click en una fila de la lista muestra un menú contextual con las siguientes opciones:</p>
<ul>
<li>Abrir en nueva pestaña</li>
<li>Copiar URL</li>
<li>Copiar como cURL (solo desde Firefox 31 en adelante)</li>
<li>Copiar imagen como Data URI (solo para imágenes)</li>
<li>Editar y Reenviar</li>
<li>Comenzar <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Análisis de Performance</a> para la página</li>
</ul>
<h4 id="Editar_y_Reenviar">Editar y Reenviar</h4>
<p>Esta opción abre un editor que le permite editar el método de Solicitud, URL, parámetros, y cabeceras, y reenviar la solicitud.</p>
<h4 id="Copiar_como_cURL">Copiar como cURL</h4>
<div class="geckoVersionNote">
<p>Esta característica es nueva en Firefox 31.</p>
</div>
<p>Esta opción copia la solicitud de red al portapapeles como un comando <a href="http://curl.haxx.se/">cURL</a>, de manera que ud. pueda ejectutarlo desde una línea de comandos. El comando puede incluir las siguientes opciones:</p>
<table class="standard-table">
<tbody>
<tr>
<td><code>-X [METODO]</code></td>
<td>Si el método no es GET o POST</td>
</tr>
<tr>
<td><code>--data</code></td>
<td>Para parámetros de solicitud URL encodeados</td>
</tr>
<tr>
<td><code>--data-binary</code></td>
<td>Para parámetros de solicitud multiparte</td>
</tr>
<tr>
<td><code>--http/VERSION</code></td>
<td>Si la versión de HTTP no es 1.1</td>
</tr>
<tr>
<td><code>-I</code></td>
<td>Si el método no es HEAD</td>
</tr>
<tr>
<td><code>-H</code></td>
<td>
<p>Uno para cada encabezado de solicitud.</p>
<p>Deesde Firefox 34, si el encabezado "Accept-Encoding" está presente, el comando cURL incluirá <code>--compressed</code> en vez de <code>-H "Accept-Encoding: gzip, deflate"</code>. Esto significa que la respuesta será automáticamente descomprimida.</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Detalles_de_Solicitud_de_red">Detalles de Solicitud de red</h2>
<p>Hacer click en una fila muestra en un nuevo panel en la parte derecha del monitor de red, que provee más información detallada sobre la solicitud.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7393/nm-details-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Las pestañas de la parte superior de este panel le permiten cambiar entre 5 diferentes páginas:</p>
<ul>
<li><strong>Encabezados</strong></li>
<li><strong>Cookies</strong></li>
<li><strong>Parámetros</strong></li>
<li><strong>Respuestas</strong></li>
<li><strong>Tiempos</strong></li>
</ul>
<p>Desde Firefox 30 en adelante, hay una sexta página que aparece solamente si el tipo de contenido es HTML, la página de <strong>Vista Preliminar</strong>.</p>
<p>Hacer click en el ícono de la izquierda de las pestañas cierra el panel y vuelve a la vista de lista.</p>
<h3 id="Encabezados">Encabezados</h3>
<p>Esta pestaña lista información básica sobre la solicitud incluyendo URL y código de estado, asi como la solicitud HTTP y encabezados de respuesta que fueron enviados:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7397/nm-headers.png" style="display: block; margin-left: auto; margin-right: auto;">Ud. puede filtrar las encabezados que se muestran:</p>
<h3 id="Cookies"><img alt="" src="https://mdn.mozillademos.org/files/7399/nm-headers-filtered.png" style="display: block; margin-left: auto; margin-right: auto;">Cookies</h3>
<p>Esta pestaña lista detalles completos de cualquier cookie que fue enviada con la solicitud o respuesta:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7391/nm-cookies.png" style="display: block; margin-left: auto; margin-right: auto;">Al igual que con los encabezados, ud. puede filtrar las cookies que se muestran.</p>
<h3 id="Parametros">Parametros</h3>
<p>Esta pestaña muestra los parámetros GET y datos POST de una solicitud:</p>
<h3 id="Respuesta"><img alt="" src="https://mdn.mozillademos.org/files/7407/nm-params.png" style="display: block; margin-left: auto; margin-right: auto;">Respuesta</h3>
<p>El contenido completo de la respuesta. Si la respuesta es HTML, JS o CSS, 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;">Si la respuesta es JSON, será mostrada como un objeto inspeccionable:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7421/nm-response-json.png" style="display: block; margin-left: auto; margin-right: auto;">Si la respuesta es una imagen, la pestaña muestra una vista preliminar:</p>
<h3 id="Tiempos"><img alt="" src="https://mdn.mozillademos.org/files/7415/nm-response-image.png" style="display: block; margin-left: auto; margin-right: auto;">Tiempos</h3>
<p>La pestaña de tiempo muestra una lista más detallada y comentada de la barra de línea de tiempo para esa solicitud, mostrando como el tiempo de espera total es dividido en varias etapas:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7417/nm-timings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Vista_Preliminar">Vista Preliminar</h3>
<div class="geckoVersionNote">
<p>Esta caracteristica es nueva en Firefox 30.</p>
</div>
<p>Desde Firefox 30 en adelante, si el tipo de archivo es HTML una sexta pestaña aparece llamada "Vista Preliminar". Esta hace un render de aquel 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álisis_de_Rendimiento">Análisis de Rendimiento</h2>
<div class="geckoVersionNote">
<p>La herramienta de análisis de rendimiento es nueva en Firefox 29.</p>
</div>
<p>Desde Firefox 29 en adelante, el Monitor de Red trae una herramienta de análisis de rendimiento (performance), para ayudarlo a ver cuánto le toma al navegador descargar las diferentes partes de su sitio.<br>
<br>
Para correr la herramienta de análisis de performance haga click en el icono de cronómetro en la barra de herramientas en la parte inferior del Monitor de Red:</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, si ud. acaba de abrir el Monitor de Red, por ende no está todavia poblado con la lista de Solicitudes, ud. tendrá el icono de Cronómetro en la ventana principal.)</p>
<p>El Monitor de Red luego carga el sitio dos veces: una vez con un cache de navegador vacio, y una vez con el chaché óptimo. Esto simula la primera vez que un usuario visita su sitio, y visitas siguientes. Muestra los resultados para cada corrida de lado a lado o verticalmente si la ventana de Navegación es angosta:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7409/nm-performance.png" style="display: block; margin-left: auto; margin-right: auto;">El resultado de cada recarga es resumido en una tabla y un gráfico sectorial o de torta. La tabla agrupa recursos por tipo, y muestra el tamaño total de cada recurso y el tiempo total que tomó en cargarlos. El gráfico de torta acompañante muestra el tamaño relativo de cada tipo de recurso.</p>
<p>Para volver a la lista de Solicitudes de Red del Monitor de Red haga click en el botón "Volver" en la izquierda.</p>
<p>Hacer click en una porción de la torta lo lleva al Monitor de Red para esa recarga, con un filtro automáticamente aplicado para ver <a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_content_type">solo este tipo de recurso</a>.</p>
|
