Resumen de Herramientas para desarrolladores: Tira de película y un nuevo hogar para la limitación

Novedades de Herramientas para desarrolladores, tan recientes como estén

La primera noticia de esta publicación es un pequeño meta: ¡es esta actualización en sí misma! De vez en cuando, pero al menos una vez al mes, resumiré lo que ocurre en el mundo de las Herramientas para desarrolladores de Chrome, desde el primer momento.

Y cuando digo nuevo, lo diré: hablaré de las nuevas funciones que llegaron a Chrome Canary, así que si prefieres quedarte en un lugar estable, también es genial. Pero si eres aventurero y quieres estar al tanto, estas publicaciones son para ti. Además de las funciones y correcciones de errores más recientes, encontrarás la sección Señal de monitoreo de la comunidad al final de cada publicación en la que se destaca tu contribución, nuestros valiosos usuarios.

Sin más preámbulos, veamos las noticias reales.


Novedades de Herramientas para desarrolladores

Capturas de pantalla similares a las de una tira de película en Network y Timeline

Hace solo una semana, quitamos una función nueva y significativa de la experimentación: la capacidad de tomar capturas de pantalla de la página tanto en las pestañas de red como de cronograma.

En el panel Network, haz clic en el ícono de la cámara pequeña para habilitar la captura de marcos y, luego, vuelve a cargar la página para activar la captura. Aparte de las capturas de pantalla capturadas con otras herramientas como WebPageTest, por el momento solo se muestran fotogramas que en realidad provienen de una pintura.

Si bien al hacer doble clic en uno de los marcos se muestra una vista ampliada (luego, se usan flechas izquierda y derecha para navegar), al colocar el cursor sobre ellos, se muestran líneas en el panel y el cronograma que permiten visualizar exactamente cuándo se capturó el fotograma, lo que permite correlacionarlos 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.

Para habilitar la captura de capturas de pantalla del panel de Timeline, activa o desactiva la casilla de verificación "Screenshots" en la barra de herramientas superior. Las cosas funcionan de una forma un poco diferente aquí, en comparación con el panel de Network: en este caso, tratamos de capturar tantas veces como podemos, sin importar los colores reales, para poder soltar esas capturas de pantalla en una escala de tiempo lineal que se correlaciona con las otras filas de Timeline. En lugar de tener que hacer doble clic para mostrar una vista previa, los marcos con acercamiento aparecen cuando colocas el cursor sobre ellos.

Dado que los dos están un poco desincronizados en términos de funcionalidad y UX, te recomendamos que pruebes las funciones y nos envíes tus comentarios mediante tickets en crbug.com/new o un tuit a @ChromeDevTools.

Limitación de la red en el panel Network

La limitación de la red, una función que agregamos cuando presentamos el Modo de dispositivo, descubrió su segunda página principal en la barra de herramientas del panel Red para que puedas enfocarte en las optimizaciones de la red en un solo lugar.

Limitación de la red en acción

Sin embargo, este nuevo espacio es solo un espejo: todavía está disponible fuera del Modo de dispositivo, ya que simular una mala conectividad sigue siendo muy importante cuando trabajas para lograr que tu sitio sea receptivo.

Por último, ¿eres una de esas pobres personas que se preguntan por qué tu conexión a Internet se interrumpe después de un largo día en el trabajo, solo para descubrir que olvidaste inhabilitar la limitación de la red? En la pestaña del panel Network ahora se muestra un ícono de advertencia cuando la limitación de la red está habilitada.

Varios datos


Señal de monitoreo de funcionamiento de la comunidad

Sucio con las Herramientas para desarrolladores de Chrome

Limitación de la red en acción

Bret Little lanzó este pequeño curso explicativo que te proporciona la funcionalidad básica de las Herramientas para desarrolladores, pero también ofrece muchas sugerencias y trucos detallados. Aquí hay información útil, y más documentos de Herramientas para desarrolladores nunca están de más.

¿Un IDE de Herramientas para desarrolladores...?

Kenneth Auchenberg, desarrollador web y aficionado a Herramientas para desarrolladores, desarrolló una app para Herramientas para desarrolladores independiente prueba de concepto hace unos meses y, de alguna manera, esta semana volvió a generar noticias relacionadas con los hacker en su entrada de blog.

Convertir Herramientas para desarrolladores en un IDE completo es una idea divertida con la que muchos de los miembros de nuestro equipo soñaron antes, pero también sería un proyecto de proporciones épicas.


¿Qué piensa? ¿Es el IDE de Herramientas para desarrolladores o puedes ver que funciona? ¿Cómo debería verse? Compártela en los comentarios.

Nos vemos pronto.
Paul Bakaus y el equipo de Herramientas para desarrolladores