Descubre cómo DevTools prioriza los dispositivos móviles con un nuevo modo de dispositivo optimizado que siempre está activado. Usa los botones de color para agregar colores rápidamente a tus selectores y descubre las novedades que pronto llegarán a DevTools.
Un vistazo al futuro de la autoría
Acabamos de regresar de la Chrome Dev Summit, donde te mostré cómo es trabajar con DevTools en la actualidad y en el futuro. Por lo general, no menciono ninguna función que aún sea un experimento o un trabajo en curso en este resumen, pero esta vez haré una excepción. Si no tienes tiempo para mirar toda la charla, aquí tienes un resumen:
Modo de dispositivo versión 2
Si bien aún estamos trabajando mucho en esta nueva y audaz iteración del Modo de dispositivo, queríamos darles a todos la oportunidad de probarlo, por lo que lo habilitamos en Canary hoy. Con los cambios, estamos impulsando DevTools hacia un futuro en el que la prioridad sea la versión para dispositivos móviles, en la que el desarrollo para dispositivos móviles sea la opción predeterminada y el desarrollo para computadoras de escritorio sea el “complemento”. Se esperan más iteraciones en las próximas semanas y una publicación de blog extendida cuando terminemos.
Potente inspección de animaciones
La Inspección de animación en curso te brinda una imagen completa y detallada de lo que sucede en los elementos en movimiento. 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. Cuando hayamos lanzado la función por completo, publicaremos una entrada de blog independiente más extensa.
Modo de diseño (versión preliminar)
El nuevo modo de diseño, que aún no está listo para el horario estelar, pero es muy prometedor, es una función que no puedo esperar a ver completamente desarrollada. El modo de diseño agrega capacidades de edición WYSIWYG a DevTools para cualquier elemento de la página. Hasta ahora, la altura, el ancho, los rellenos y los márgenes se pueden editar en contexto. Pasará un poco más de tiempo hasta que podamos permitirte probarlo, pero te mantendremos al tanto.
Creación de perfiles de rendimiento con el panel de cronograma actualizado
Como parte de un esfuerzo más grande para presentar el nuevo modelo de rendimiento RAIL, se realizaron cientos de cambios pequeños y grandes en el panel de cronograma, que juntos transforman y mejoran bastante la historia de la generación de perfiles de rendimiento. En lugar de mostrar cada cambio individual de forma aislada, nuestro propio Paul Irish nos mostró cómo depurar correctamente el rendimiento de un sitio, en este caso, el sitio móvil de Hotel Tonight, en vivo en el escenario. Entre las funciones anunciadas recientemente, se incluyen las tiras de carga y rendimiento, la cascada de red incluida, el resumen del árbol de vista 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.
Cada vez que querías agregar un color de fondo o una propiedad de color a tu elemento, no podías simplemente abrir el selector de color. En cambio, la mayoría de ustedes escribe algo como “background: red;” cada vez para que aparezca el ícono del selector de color y, luego, elige el color que realmente querían.
Pensamos que podríamos simplificar esto. Agregamos dos botones útiles 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
- Perdimos mucho espacio en el panel Estilo mostrando tipos de medios genéricos. Ahora ocultamos ese contenido antes de tus selectores si no es inusual.
- Ahora puedes colocar el cursor sobre un selector de CSS en el panel Estilo para ver a cuántos elementos de la página se aplica.
- ¿Aún no te rindes con la impresión? La emulación de medios impresos sigue disponible para ver cómo se verá tu página cuando se imprima. Solo la trasladamos a la configuración de renderización.
- Cuando elegimos un elemento para inspeccionar, ahora expandimos y cerramos automáticamente el subárbol del DOM relevante. Es difícil de explicar, ver para creer.
Como siempre, comunícate con nosotros a través de Twitter o en los comentarios a continuación, y envía errores a crbug.com/new.
¡Hasta el próximo mes!
Paul Bakaus y el equipo de DevTools