Cómo abrir la pestaña Red y qué significa realmente XHR

Alguien te dijo “abre la pestaña Red y ve si alguna solicitud está fallando”, y ahora estás mirando un panel lleno de filas, colores y columnas que aún no significan nada. Este es el camino más corto desde allí hasta la respuesta que buscaban.

La pestaña Red registra cada solicitud que hace la página: cada imagen, cada script y cada llamada que tu navegador envía a un servidor para obtener datos. Cuando una página está rota de una manera que no puedes ver - un botón que no hace nada, una lista que no se cargará, un guardado que falla silenciosamente - la razón muy a menudo es una de esas solicitudes, y aquí es donde está escrito.

Abriéndola

Chrome, Edge, Brave y el resto de Chromium. Presiona F12, o Cmd + Option + I en una Mac. Se abren las herramientas de desarrollador; haz clic en la pestaña Red en la parte superior. Si no la ves, está detrás de la flecha de desbordamiento ».

Firefox. El mismo F12, luego la pestaña Red.

Safari. La pestaña Red está detrás de un menú que está desactivado por defecto. Abre Configuración, ve a Avanzado y marca Mostrar características para desarrolladores web. Luego Desarrollador, Mostrar Inspector web, y la pestaña Red está allí.

El panel casi siempre está vacío cuando se abre, y ese es el primer problema que confunde a la gente.

Por qué está vacío y cómo llenarlo

La pestaña Red solo registra mientras está abierta. No recuerda qué pasó antes de que llegaras, así que las solicitudes que se ejecutaron cuando la página se cargó por primera vez ya se han ido.

Así que: con la pestaña abierta, recarga la página. Todo lo que la página obtenga se mostrará como una lista de filas. Si el problema ocurre cuando haces clic en algo en lugar de al cargar, ni siquiera necesitas recargar - solo haz lo que quieras y observa cómo aparecen las filas mientras lo haces.

Una configuración vale la pena activar antes de comenzar: Conservar registro (Firefox lo llama igual). Sin ella, una página que se redirige o se recarga borra la lista, y la solicitud que estabas persiguiendo desaparece con ella. Con ella marcada, la lista sobrevive, y puedes ver la solicitud que ocurrió justo antes de que la página cambiara.

Leer una fila

Cada fila es una solicitud. De izquierda a derecha, las columnas que importan:

• Nombre - el archivo o punto de conexión que fue solicitado
• Estado - el código HTTP que volvió. Este es en el que te enviaron a mirar
• Tipo - qué tipo de cosa era: un documento, un script, una imagen, o fetch/xhr para una llamada de datos
• Tiempo - cuánto tiempo tomó

Los colores son un atajo. Una fila roja es una solicitud que falló. Si alguien dijo “ve si algo está fallando”, estás buscando rojo, o un estado de 400 o superior.

Haz clic en cualquier fila y se abre un panel con los detalles: Encabezados para lo que se envió y se recibió, Respuesta o Vista previa para lo que volvió, y Tiempo para donde se fue el tiempo. Para una solicitud fallida, la Respuesta es generalmente donde está la explicación del servidor.

Qué significa XHR, porque es el filtro que te dirán que uses

A lo largo de la parte superior del panel hay una fila de filtros: Todo, Fetch/XHR, Doc, CSS, JS, Img. “Abre la pestaña Red y filtra a XHR” es una instrucción común, y XHR es la palabra menos obvia en ella.

XHR significa XMLHttpRequest. En la práctica significa una solicitud que tu página hizo en segundo plano para obtener datos, sin cargar una página nueva - la forma moderna de la web de actualizar parte de una pantalla sin una recarga completa. Cuando escribes en una caja de búsqueda y los resultados aparecen debajo, eso es un XHR. Cuando un botón “Cargar más” agrega elementos sin que la página parpadee, eso es un XHR.

El nombre es un accidente histórico - la característica del navegador original se construyó para XML, que casi nadie envía más; hoy en día estos llevan JSON. Su reemplazo más reciente es la función fetch(), por lo que el filtro lee Fetch/XHR: dos nombres, ambos significan lo mismo, una solicitud de datos en lugar de una página, una imagen o una hoja de estilos.

Haciendo clic en Fetch/XHR se ocultan las imágenes, scripts y fuentes y se dejan solo las llamadas de datos, que es casi siempre donde está la falla de una característica rota. Un botón que no hace nada generalmente sí envió una solicitud; está justo allí, en rojo, con la razón en su Respuesta.

Convirtiéndolo en algo que puedas enviar

Leer la pestaña Red tú mismo es una cosa. La parte más difícil es conseguir lo que viste a la persona que puede arreglarlo, porque una captura de pantalla del panel pierde el detalle - los encabezados, el cuerpo de respuesta, el orden - que realmente explica la falla.

La pestaña puede exportar toda la sesión como un archivo HAR: haz clic derecho en cualquier fila y elige Guardar todo como HAR con contenido. Ese es el registro de red como un archivo, que alguien puede abrir en su propia pestaña Red, o en el visor de HAR, exactamente como si lo hubiera grabado. Lee esa guía antes de enviar uno, aunque - un HAR generalmente contiene tus cookies de sesión, y debe tratarse como una contraseña.

Si la solicitud fallida es una que devuelve “TypeError: Failed to fetch” en la consola sin nada útil en la pestaña Red, ese caso específico tiene su propia explicación - generalmente significa que la solicitud nunca llegó lo suficientemente lejos como para tener un estado en absoluto.

El registro de red que captura es la misma lista de solicitudes que habrías leído en la pestaña, ya guardada y adjunta, así que la persona que recibe el informe no tiene que hablarte sobre cómo abrirlo. Para todo lo que va a su alrededor - lo que esperabas y lo que sucedió en su lugar - la guía de informe de errores tiene la plantilla.