En las herramientas para desarrolladores de Chrome, el panel Red (Network) que ofrece estadísticas valiosas sobre la actividad de red de una página web es una de las herramientas más usadas.
En este artículo, se comparten algunas mejoras muy deseadas en el panel de Network que Ioana Forfota y Silvia Eremia realizaron durante su pasantía en STEP. Se esperaban con ansias estas mejoras, las cuales se seleccionaron cuidadosamente de la extensa lista de tareas pendientes en la herramienta de seguimiento de errores de Chromium, para que el panel fuera más accesible, intuitivo e informativo.
Con estas funciones nuevas, el panel Red les brinda a los desarrolladores web la capacidad de realizar las siguientes acciones:
- Concéntrate solo en las solicitudes de red relevantes.
- Comprende los códigos de estado HTTP sin la necesidad de referencias externas.
- Identifica y corrige los errores de las solicitudes con rapidez.
- Comprende las respuestas del subtipo JSON.
Sigue leyendo para conocer todos los detalles.
Filtrar solicitudes de extensiones de Chrome
Las extensiones de Chrome pueden hacer sus propias solicitudes de red, que aparecerán junto con las solicitudes de la página en el panel Red. Si no estás desarrollando una extensión de forma activa, es probable que estas solicitudes no te resulten relevantes. Anteriormente, la única forma de ocultarlos era usar el filtro -scheme:chrome-extension o la depuración en modo Incógnito.
A partir de Chrome 117, esto es más fácil. Para despejar el panel Red, Herramientas para desarrolladores ahora ofrece una casilla de verificación para excluir las solicitudes de extensiones de Chrome.
Los debates sobre el estado predeterminado de esta función han estado en curso. En un principio, pensamos habilitar esta función de forma predeterminada, con la idea de que podía mejorar la experiencia de la mayoría de los usuarios. Sin embargo, este enfoque puede hacer que algunos usuarios no sepan que las URLs de extensión de Chrome pueden activar solicitudes. Esto también podría plantear desafíos para los desarrolladores de extensiones. Por lo tanto, el estado predeterminado se establece en "inhabilitado".
Si activas esta casilla de verificación, tu lista de solicitudes será más limpia, menos molesta y más enfocada en las solicitudes más importantes, de modo que puedas tener una experiencia de depuración mucho más agradable.
Textos de estado de respuesta HTTP
Comprender los códigos de estado HTTP es fundamental para una depuración eficaz. Sin embargo, puede ser inconveniente buscar constantemente sus significados. Herramientas para desarrolladores introdujo una mejora útil: cuando mantienes el puntero sobre un código de estado en la lista de solicitudes, un cuadro de información brinda instantáneamente su texto de estado (un título descriptivo que aclara su significado).
El texto de estado también se puede ver en la vista de encabezados junto al código. Si bien antes solo estaban disponibles para HTTP/1.1, ahora estas funciones se extienden a HTTP/2 y HTTP/3. Estos ajustes aparentemente pequeños tienen un impacto significativo, lo que te ahorra tiempo y te permite enfocarte en la depuración en lugar de buscar los significados del código.
Visibilidad de errores mejorada
Ahora es más fácil detectar errores rápidamente y corregirlos sin tener que profundizar en el panel. Para lograrlo, en lugar de solo destacar los mensajes de error con cambios de color del texto, agregamos íconos indicativos para llamar la atención sobre errores de solicitud, como aquellos con un código de estado de 404. Estos indicadores sutiles pero útiles harán que los errores sean más perceptibles, lo que garantiza que no pases por alto problemas importantes.
Subtipo de JSON con impresión con formato estilístico
El desarrollo web suele implicar la inspección de respuestas JSON, pero la lectura de archivos JSON sin formato sin formato es muy inconveniente. Abordar este tipo de respuestas, en particular los subtipos como ld+json, hal+json o sparql-results+json, puede ser frustrante, por ejemplo, cuando aparecen en una sola línea. Para facilitar el proceso, Herramientas para desarrolladores presentó una presentación más fácil de usar y contraíble para los subtipos de JSON. Ahora, estas respuestas tienen formato, lo que elimina la necesidad de que los desarrolladores dependan de herramientas externas. Este nuevo diseño ofrece una representación simple y muy legible.
Comentarios positivos de la comunidad
Aunque estas funciones solo están en las primeras etapas de adopción, la respuesta de la comunidad es sumamente positiva. Su exitosa implementación dejó a muchos usuarios satisfechos con las mejoras, lo que mejoró significativamente su experiencia. Puedes leer algunas de las respuestas en X:
"Oh, ¡es genial! ChromeDevTools acaba de mejorar su experiencia al mostrar códigos de estado HTTP legibles por humanos, lo que facilita aún más identificar qué salió mal en una solicitud de red".—TribalIdeas en X
“Fue muy útil últimamente. En especial, sobre formularios con bloqueadores de anuncios y extensiones gramaticales".-MrAhmadAwais en X
¿Todo listo para explorar estas nuevas funciones? Ve a las Herramientas para desarrolladores de Chrome y experimenta el panel mejorado de Red. ¡Feliz depuración!
Descarga los canales de vista previa
Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.
Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome
Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.
- Envíanos tus sugerencias o comentarios a través de crbug.com.
- Informa un problema en Herramientas para desarrolladores mediante Más opciones
> Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores. - Envía un tweet a @ChromeDevTools.
- Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).