Descubre cómo las Herramientas para desarrolladores realizan primero su uso en dispositivos móviles con un Modo de dispositivo nuevo y optimizado que está siempre activo. Usa los botones de colores para agregar rápidamente colores a tus selectores y descubre lo que vendrá pronto en Herramientas para desarrolladores.
Una mirada al futuro de la autoría
Regresamos de la Cumbre de desarrolladores de Chrome, en la que les mostré cómo es trabajar con Herramientas para desarrolladores hoy y en el futuro. Por lo general, no menciono en este resumen funciones que aún son experimentos o trabajos complejos de progreso, pero esta vez haré una excepción. Si no tienes tiempo para ver toda la charla, aquí tienes una idea:
Modo de dispositivo versión 2
Seguimos trabajando en esta nueva y audaz iteración del Modo de dispositivo, pero queríamos brindarles a todos la oportunidad de probarla, así que hoy la habilitamos en tu versión canary. Con los cambios, estamos llevando a Herramientas para desarrolladores a un futuro centrado en los dispositivos móviles, en el que el desarrollo para dispositivos móviles es la opción predeterminada y el desarrollo para computadoras de escritorio es el complemento. Habrá más iteraciones en las próximas semanas con una entrada de blog extendida cuando terminemos.
Inspección de animación potente
La Animation Inspection del trabajo en curso te brinda un panorama completo y detallado de lo que sucede en cualquier elemento en movimiento. En lugar de mostrarte una transición en un elemento a la vez, agregamos una heurística que agrupa animaciones complejas para que puedas enfocarte en todo lo que ves. Mira el video. Ofreceremos una entrada de blog independiente más grande cuando se complete el lanzamiento.
Modo de diseño (adelanto)
No está del todo listo para el estreno, pero es muy prometedor el nuevo modo de diseño, una función que no veo la hora de terminar de desarrollarla. El modo de diseño agrega capacidades de edición WYSIWYG a Herramientas para desarrolladores para cualquier elemento de la página. Hasta ahora, se pueden editar la altura, el ancho, los paddings y los márgenes en contexto. Llevaremos un poco más de tiempo hasta que estemos listos para intentarlo, pero te mantendremos al tanto.
Generación de perfiles de rendimiento con el panel Timeline actualizado
Como parte de la incorporación del nuevo modelo de rendimiento RAIL, se realizaron cientos de cambios más pequeños y grandes en el panel Timeline y juntos transforman y mejoran un poco el aspecto de la generación de perfiles de rendimiento. Así, en lugar de mostrar cada cambio individual de forma aislada, nuestro propio Paul Ireland nos mostró cómo depurar correctamente el rendimiento de un sitio, en este caso, el sitio móvil de Hotel Tonight, en vivo sobre el escenario. Entre las nuevas funciones anunciadas, se encuentran las tiras de películas de carga y rendimiento, la cascada de red incluida, el resumen de vista de árbol y la capacidad de ver los costos de rendimiento por dominio y archivo.
Agrega fácilmente colores de primer y segundo plano a cualquier elemento
Siempre que querías agregar una propiedad de color de fondo o color a tu elemento, no podías abrir el selector de color. En cambio, la mayoría de ustedes escriben algo como “background: red”; cada vez que aparezca el ícono del selector de color, deben elegir el color real que deseen.
Pensamos poder simplificarlo. Agregamos dos excelentes botones que aparecen cuando colocas el cursor sobre la esquina inferior derecha de un selector, lo que te permite agregar un color y abrir el selector con un solo clic:
Lo mejor del resto
- Desperdiciamos mucho espacio anterior en el panel Estilo al mostrar tipos de medios genéricos. Ahora, si no es inusual, ahora ocultamos esos datos antes de tus selectores.
- Ahora puedes colocar durante un tiempo el cursor sobre un selector CSS en el panel Estilo para ver a cuántos elementos de la página se aplica.
- ¿Aún no te rendiste de la impresión? La emulación de medios impresos todavía está disponible para ver cómo se vería tu página cuando la imprimas. Lo movimos a la Configuración de procesamiento.
- Cuando elegimos un elemento para inspeccionar, ahora expandimos y cerramos automáticamente el subárbol del DOM correspondiente. Difícil de explicar, ver para creer.
Como siempre, envíanos tus comentarios a través de Twitter o de los siguientes comentarios, y envía los errores a crbug.com/new.
¡Hasta el mes que viene!
Paul Bakaus y el equipo de Herramientas para desarrolladores