Descubre cómo Herramientas para desarrolladores está priorizando los dispositivos móviles con un modo de dispositivo nuevo y optimizado que siempre está activado. Usa los botones de color para agregar colores rápidamente a tus selectores y descubre lo que vendrá pronto a Herramientas para desarrolladores.
Un vistazo al futuro de la creación
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 ninguna función que aún sea experimento o grandes trabajos de progreso en este resumen, pero haré una excepción esta vez. Si no tienes tiempo para ver toda la charla, este es el resumen:
Device Mode versión 2
Seguimos trabajando mucho en esta nueva y audaz iteración del Device Mode, pero queríamos darles a todos la oportunidad de probarla, por lo que la habilitamos en Canary hoy. Con los cambios, estamos impulsando las Herramientas para desarrolladores hacia un futuro en el que se priorizan 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”. En las próximas semanas, esperamos más iteraciones con una entrada de blog extendida cuando terminemos.
Inspección de animaciones potente
Animation Inspection en curso te ofrece una imagen completa y detallada de lo que sucede con todo lo que se mueve. En lugar de mostrarte una transición en un elemento a la vez, agregamos heurísticas que agrupan animaciones complejas para que puedas enfocarte en todo lo que ves. Mira el video. Ofreceremos una entrada de blog independiente y más grande cuando lancemos el producto.
Modo de diseño (vista previa)
No está del todo listo para el estreno, pero muy prometedor es el nuevo modo de diseño, una función que deseo ver completamente creada. El modo de diseño agrega capacidades de edición WYSIWYG a Herramientas para desarrolladores para cualquier elemento de la página. Hasta ahora, la altura, el ancho, el padding y los márgenes se pueden editar en contexto. Tomará un poco más de tiempo hasta que estemos listos para que lo intentes, pero te mantendremos al tanto.
Generación de perfiles de rendimiento con el panel cronograma actualizado
Como parte de un esfuerzo mayor por la introducción del nuevo modelo de rendimiento RAIL, se realizaron cientos de cambios más pequeños y grandes en el panel de cronograma que, en conjunto, transforman y mejoran un poco el historial de la generación de perfiles de rendimiento. En lugar de mostrar todos los cambios individuales de forma aislada, nuestro propio Paul Ireland nos mostró cómo depurar adecuadamente el rendimiento de un sitio, en este caso, el sitio móvil de Hotel Tonight, publicado en el escenario. Entre las funciones recientemente anunciadas están las tiras de películas de carga y rendimiento, la cascada de red incluida, el resumen de la 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
Cuando deseabas agregar una propiedad de color de fondo o de color a tu elemento, no podías simplemente abrir el selector de color. En su lugar, la mayoría de las personas escriben algo como “background: red;” cada vez para que aparezca el ícono de selector de color y, luego, elige el color real que quieres.
Pensamos que podíamos simplificar esto. Agregamos dos botones ingeniosos que aparecen cuando se coloca 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
- Ya desperdiciamos mucho espacio anterior en el panel Estilo con la publicación de tipos de medios genéricos. Ahora ocultamos esos elementos antes de tus selectores si no es inusual.
- Ahora puedes colocar durante mucho tiempo sobre un selector CSS en el panel Estilo para ver a cuántos elementos de la página se aplica.
- ¿Aún no abandonaste la impresión? La emulación de medios de impresión todavía está disponible para ver cómo se vería tu página cuando la imprimas. Acabamos de moverla a la Configuración de procesamiento.
- Al elegir un elemento para inspeccionar, ahora expandimos automáticamente y cerramos el subárbol correspondiente del DOM. Difícil de explicar; ver es creer.
Como siempre, cuéntanos qué opinas a través de Twitter o los comentarios a continuación, y envía los errores a crbug.com/new.
¡Hasta el mes que viene!
Paul Bakaus y el equipo de Herramientas para desarrolladores