Novedades de DevTools, lo más 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án las contribuciones más importantes que hicieron nuestros queridos usuarios.
Sin más que agregar, comencemos con las noticias reales.
Novedades de Herramientas para desarrolladores
Capturas de pantalla similares a tiras de película en Network y Rutas
Hace solo una semana, quitamos de la etapa experimental una nueva función importante: la capacidad de capturar capturas de pantalla de la página en las pestañas Red y Ruta de acceso.
En el panel de red, haz clic en el ícono de cámara pequeño 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 capturadas con otras herramientas, como WebPageTest, actualmente solo mostramos marcos que realmente 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 las capturas de pantalla con la mayor frecuencia posible, independientemente de las pinturas reales, para poder colocarlas en un cronograma lineal que se correlaciona con las otras filas de Rutas. 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 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 página principal es solo un reflejo: sigue disponible fuera del modo de dispositivo, ya que simular una mala conectividad sigue siendo muy importante cuando se trabaja para 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? La pestaña del panel de red ahora muestra un ícono de advertencia cuando se habilita 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 pequeño curso de instructivo que te familiariza con la funcionalidad básica de DevTools, pero también ofrece muchos consejos y trucos detallados. Definitivamente, hay información útil allí, y nunca está demás tener más documentos de DevTools.
¿Un IDE de DevTools?
Kenneth Auchenberg, desarrollador web y aficionado a DevTools, desarrolló una app de prueba de concepto independiente de DevTools hace unos meses y, de alguna manera, su entrada de blog volvió a aparecer en las noticias (de 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