Novedades de Herramientas para desarrolladores, tan recientes
La primera noticia de esta publicación es un poco meta: es esta actualización. De vez en cuando, pero al menos una vez al mes, resumiré lo que sucede en el mundo de DevTools de Chrome, lo más reciente.
Y cuando digo nuevas, lo digo en serio: hablaré sobre las funciones nuevas que acaban de llegar a Chrome Canary, así que, si prefieres quedarte en la versión estable, también está bien. Sin embargo, si te gusta la aventura y quieres estar al tanto de todo, estas publicaciones son para ti. Además de las funciones y correcciones de errores más recientes, encontrarás una sección Community Heartbeat al final de cada publicación, en la que se destacará lo mejor que tú, nuestros queridos usuarios, hayan contribuido.
Sin más preámbulos, veamos las noticias reales.
Novedades de DevTools
Capturas de pantalla similares a una tira de película en Network y Rutas
Hace solo una semana, quitamos de la etapa experimental una función nueva y significativa: la capacidad de capturar capturas de pantalla de la página en las pestañas Red y Cronograma.
En el panel Network, haz clic en el ícono de la cámara pequeña para habilitar la captura de fotogramas y, luego, vuelve a cargar la página para activar la captura. Además de las capturas de pantalla que se tomaron con otras herramientas, como WebPageTest, actualmente solo se muestran fotogramas que, en realidad, provienen de una pintura.
Si bien hacer doble clic en uno de los fotogramas muestra una vista ampliada (luego, usa las flechas hacia la izquierda o la derecha para navegar), colocar el cursor sobre ellos muestra líneas en el panel y la línea de tiempo para visualizar exactamente cuándo se capturó el fotograma, lo que te permite correlacionarlo con la secuencia de carga. Esto facilita mucho la depuración de problemas de carga comunes, como las fuentes web que bloquean la renderización.
En el panel de Rutas, puedes habilitar la captura de capturas de pantalla activando la casilla de verificación “Capturas de pantalla” en la barra de herramientas superior. Aquí, las cosas funcionan de manera un poco diferente en comparación con el panel de red: en este caso, intentamos capturar con la mayor frecuencia posible, independientemente de las pinturas reales, para poder colocar esas capturas de pantalla en una escala de tiempo lineal que se correlaciona con las otras filas de la línea de tiempo. En lugar de tener que hacer doble clic para mostrar una vista previa, los marcos ampliados aparecen cuando se coloca el cursor sobre ellos.
Como las dos están un poco desincronizadas en términos de funcionalidad y UX, te recomendamos que pruebes las funciones y que nos envíes tus comentarios a través de tickets en crbug.com/new o mediante un tweet a @ChromeDevTools.
Limitación de la red en el panel de red
La limitación de la red, una función que agregamos cuando presentamos nuestro Modo de dispositivo, encontró su segundo hogar en la barra de herramientas del panel de red para que puedas enfocarte en las optimizaciones de red en un solo lugar.
Sin embargo, esta nueva casa es solo un espejo: sigue disponible fuera del Modo de dispositivo, ya que simular una mala conectividad sigue siendo muy importante para lograr que tu sitio sea responsivo.
Por último, ¿eres una de esas pobres almas que se preguntaron por qué su conexión a Internet se cortó después de un largo día de trabajo y descubrieron que se olvidaron de inhabilitar el control de la red? En la pestaña del panel Network, ahora se muestra un ícono de advertencia cuando está habilitada la limitación de la red.
Varios datos
- ¿Odias esos círculos extraños en la línea de tiempo de la red? Nosotros también. Estos son los puntos en el tiempo en los que se capturó un fotograma (en la nueva tira de película) . Ahora aparecen como líneas cuando colocas el cursor sobre ellas.
- El Modo de dispositivo ahora conserva la orientación cuando cambias de dispositivo.
Latido de la comunidad
Cómo usar las Herramientas para desarrolladores de Chrome
Bret Little lanzó este bonito curso explicativo que te familiariza con la funcionalidad básica de las Herramientas para desarrolladores, pero también ofrece muchas sugerencias y trucos detallados. Definitivamente, hay información útil allí, y nunca está demás tener más documentación de DevTools.
¿Un IDE de DevTools?
Kenneth Auchenberg, desarrollador web y aficionado de Herramientas para desarrolladores, hace unos meses desarrolló una app independiente de Herramientas para desarrolladores de prueba de concepto, y, de alguna manera, su entrada de blog volvió a publicar noticias (hackers) esta semana.
Convertir DevTools en un IDE completo es una idea divertida, con la que muchos miembros de nuestro equipo ya soñaron, pero también sería un proyecto de proporciones épicas.
? ¿El IDE de DevTools es un sueño imposible o crees que podría funcionar? ¿Cómo debería verse? Compártela en los comentarios.
Nos vemos pronto.
Paul Bakaus y el equipo de DevTools