¿Cómo ver y editar encabezados de solicitud y respuesta HTTP en Chrome? – Mundo2030

El Protocolo de transferencia de hipertexto, o HTTP, es la forma principal de establecer comunicación entre un cliente y un servidor. El navegador de su computadora, como Google Chrome, actúa como un cliente y envía una solicitud al servidor web cuando abre cualquier página web. El servidor devolverá una respuesta con un código de estado que indica el estado de la comunicación, ya sea que haya tenido éxito o haya fallado. Esta llamada solicitud y respuesta HTTP contiene diversa información utilizada para la resolución de problemas y con fines de diseño web. Los navegadores como Chrome ocultarán la información del encabezado HTTP y solo mostrarán el cuerpo de la respuesta final del servidor. Si desea encontrar los detalles del encabezado, en este artículo exploraremos cómo ver y editar los encabezados de solicitud y respuesta HTTP en el navegador Chrome. Puede seguir un proceso similar en otros navegadores como Edge y Firefox.

La página web está recuperando
Comunicación a través de solicitud y respuesta HTTP

Inspección de encabezados de solicitud y respuesta HTTP

Muchas veces verá errores del navegador con un código de tres dígitos llamado código de estado HTTP. Por ejemplo, el código de estado HTTP 404 indica que la página solicitada no se encontró en el servidor. El punto aquí es que todos los códigos de estado HTTP 4xx están relacionados con un error en la solicitud HTTP enviada por el navegador. Para solucionar estos códigos 4xx, debe comprender los detalles enviados en el encabezado de la solicitud HTTP. Del mismo modo, es posible que desee realizar una prueba cambiando los detalles en el encabezado de la solicitud. Por ejemplo, puede editar control de caché encabezado a sin tienda o sin caché y pruebe cómo el servidor devuelve la página para diferentes valores.

Por otro lado, no puede cambiar la configuración del servidor en un entorno de producción cada vez que quiera cambiar y probar los parámetros. En ese caso, debe simular el encabezado de respuesta y verificar los resultados finales en el navegador del cliente. Además, todos los códigos de estado 5xx se deben a un error del lado del servidor, y verificar el encabezado de respuesta puede ayudar a comprender mejor estos problemas.

Cualquiera que sea el motivo, puede encontrar fácilmente todos los detalles en los encabezados de solicitud/respuesta HTTP utilizando la Herramienta para desarrolladores de Chrome. Sin embargo, necesita una extensión de terceros para editar los campos del encabezado y probar la respuesta modificada.

Ver encabezados de solicitud y respuesta HTTP en Chrome

Siga las instrucciones a continuación en el navegador Google Chrome en Windows, Mac o cualquier otro sistema operativo.

  • Abra la página web para la que desea encontrar los detalles del encabezado.
  • Haga clic derecho en la página y seleccione la opción "Inspeccionar".
Marque la opción en el menú contextual de Chrome
Marque la opción en el menú contextual de Chrome
  • Esto abrirá la sección de herramientas para desarrolladores e irá a la pestaña Red.
  • Ahora presione "Control + R" en Windows o "Comando + R" en Mac o simplemente actualice la página haciendo clic en el botón Actualizar o la tecla F5.
Abra la pestaña Red y vuelva a cargar la página web.
Abra la pestaña Red y vuelva a cargar la página web.
  • Chrome comenzará a registrar todas las solicitudes de red enviadas y las respuestas recibidas del servidor.
  • Asegúrese de seleccionar la opción "Todos" para ver todas las solicitudes enviadas por la página que está viendo.
  • Seleccione cualquier consulta del panel izquierdo y desplácese hacia abajo en la sección Encabezados en el panel derecho.
  • Puede encontrar detalles sobre el encabezado de solicitud HTTP en el encabezado "Encabezados de solicitud", y cada campo muestra el valor enviado. De manera similar, el encabezado de respuesta del servidor web se puede encontrar en la pestaña "Encabezados de respuesta".
Ver campos de encabezado de solicitud y respuesta HTTP en Chrome
Ver campos de encabezado de solicitud y respuesta HTTP en Chrome
  • También puede usar la sección General para mostrar el código de estado HTTP al solucionar problemas.
  • Haga clic en la pestaña Respuesta y luego haga clic en el bonito icono de impresión para ver el cuerpo completo de la respuesta del servidor, como puede ver al ver el código fuente de la página.
Ver la fuente de respuesta en Chrome
Ver la fuente de respuesta en Chrome

Recuerde que una página web puede realizar cientos de solicitudes HTTP de imágenes, hojas de estilo, fuentes y scripts. Puede ver el número total de solicitudes enviadas en la esquina inferior izquierda de la pantalla Herramientas para desarrolladores (49 solicitudes como se ve en la captura de pantalla anterior). , asegúrese de seleccionar la consulta correcta para encontrar los detalles que necesita. Consulte también la herramienta de encabezado HTTP para verificar campos importantes en los encabezados de respuesta del servidor en línea sin usar Cromo.

Editar encabezados de solicitud y respuesta HTTP en Chrome

Siga las instrucciones a continuación para editar y probar los campos de encabezado de solicitud HTTP en Chrome. Puede editar los campos de encabezado de respuesta de manera similar.

  • Abra la URL "chrome://apps" en la barra de direcciones y haga clic en el icono "Web Store" para iniciar Chrome Web Store.
Abra Chrome Web Store desde la sección de aplicaciones
Abra Chrome Web Store desde la sección de aplicaciones
  • Cuando esté en la tienda web, busque "cambiar encabezados HTTP" y encuentre Extensión ModHeader.
  • Abra la página de la extensión y haga clic en el botón "Agregar a Chrome" para instalar la extensión en su navegador.
Instalar la extensión MoHeader
Instalar la extensión MoHeader
  • Una vez instalado, haga clic en el icono del rompecabezas que aparece junto a la barra de direcciones de Chrome y seleccione la extensión ModHeader.
Abra la extensión ModHeader
Abra la extensión ModHeader
  • Haga clic en el ícono + y seleccione la opción "Encabezado de solicitud" para agregar un campo en el encabezado de solicitud. Si desea agregar un archivo en el encabezado de respuesta, debe seleccionar la opción "Encabezado de respuesta" aquí.
Agregar un nuevo encabezado de solicitud
Agregar un nuevo encabezado de solicitud
  • Ingrese el nombre del campo de encabezado y haga clic en la flecha pequeña para seleccionar el campo de la lista completa.
Seleccione Nombre de campo de encabezado de la lista
Seleccione Nombre de campo de encabezado de la lista
  • Introduzca el valor del campo que desea asignar. Puede obtener la lista completa de campos de encabezado HTTP este artículo de Wikipedia.
Establecer un valor para el campo de encabezado
Establecer un valor para el campo de encabezado
  • De manera predeterminada, la extensión reemplazará el valor ingresado aquí si encuentra el campo en el encabezado. Sin embargo, haga clic en los tres puntos verticales que aparecen en el campo y seleccione la opción "Agregar en lugar de anular" para agregar el campo al valor existente.
Agregar valor de encabezado en lugar de reemplazar
Agregar valor de encabezado en lugar de reemplazar
  • Verá un mensaje de "Encabezado vacío: Eliminar" cuando ingrese el nombre del encabezado. Deje el campo de nombre en blanco para enviar un campo de encabezado vacío. Haga clic en la notificación para cambiarlo a "Encabezado vacío: envíe un valor vacío" y déjelo el campo vacío para enviar el campo de encabezado con un valor vacío.
Agregar un campo de título y un valor vacíos
Agregue un encabezado vacío y un campo de valor
  • Puede agregar tantos campos de encabezado como desee insertar en la solicitud y la respuesta.
  • A continuación, abra las herramientas para desarrolladores de Chrome, vaya a la pestaña Red y vuelva a cargar la página web.
  • Ahora verá que el campo agregado aparece en el encabezado de solicitud o respuesta. En nuestro caso, control de caché encabezado sobrescribe el valor existente de edad máxima = 0 a sin caché que es el valor que le dimos en la extensión.
El campo del encabezado de la solicitud se ha sobrescrito
El campo del encabezado de la solicitud se ha sobrescrito

Recuerde que aunque se envíe un campo en el encabezado de la solicitud, no todos los campos funcionarán como se esperaba en la respuesta. En el ejemplo anterior podemos ver control de caché es edad máxima = 0 en la respuesta que es la misma que la respuesta original del servidor. Esto se debe al hecho de que Chrome restringirá el procesamiento de un determinado campo, como se menciona en el esta documentaciónBásicamente, esto significa que la respuesta del servidor no se verá afectada y, por lo tanto, debe cambiar el encabezado de respuesta para obtener el resultado esperado en el navegador.

Importar un perfil y agregar filtros

El desarrollador de la extensión también ofrece algunos perfiles predefinidos que simplemente puede importar a su navegador. Por ejemplo, puedes ir a Habilitar la página de perfil de CORS en la documentación del desarrollador y haga clic en el botón "Importar". Esto insertará un nuevo perfil para habilitar CORS, como se muestra a continuación. Sin embargo, este perfil también restringe el encabezado solo al sitio web del desarrollador mediante la aplicación de un filtro de URL. Si desea restringir el encabezado solo para ciertos sitios web, reemplace la URL del sitio del desarrollador con sus valores y agregue elementos adicionales si es necesario.

Importar perfiles desde el sitio del desarrollador
Importar perfiles desde el sitio del desarrollador

Nota: Después edite los campos del encabezado, se aplicarán a todas las páginas web que abra. Debe eliminar los campos agregados o aplicar filtros de URL para restringir los encabezados solo a páginas específicas.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir
error: Content is protected !!