Herramientas para desarrolladores oscurecidos, edición con @keyframe y autocompletado más inteligente

Descubre cómo las Herramientas para desarrolladores te permiten escribir menos gracias a la función de autocompletado de Console más inteligente, cómo editar las reglas de @keyframe directamente en el panel Estilos, cómo divertirte con las variables personalizadas de CSS y cómo unir el lado oscuro.

Autocompletar de forma más inteligente en la consola

Si eres como yo y muchos otros, puedes escribir un comando en la consola para depurar tu aplicación, ver que no funciona, iterarlo y escribirlo una y otra vez, una y otra vez. Para ayudarte con eso, ahora autocompletamos las instrucciones completas que escribiste anteriormente, de la siguiente manera:

Autocompletar

Edita directamente las reglas de @fotogramas en el panel Estilos

Cuando presentamos el inspector de animaciones y el editor de aceleración en Herramientas para desarrolladores, este se limitaba a las transiciones porque nunca mostramos animaciones de CSS basadas en @keyframe en el panel Estilo. Me complace decir que eso ya quedó en el pasado, así que no dejes de jugarlo. Consulta nuestro twitt en video para obtener una vista previa.

Compatibilidad con propiedades personalizadas de CSS

Propiedades de CSS personalizadas en Herramientas para desarrolladores

CSS tiene muchos beneficios, y una de ellas son las variables personalizadas, que se lanzarán en Chrome 49. Nos aseguramos de incluir compatibilidad total en Herramientas para desarrolladores, por lo que, si ya usaste variables en Sass, prueba las nativas, ya que te permiten editar propiedades en el momento en el panel Styles y actualizar inmediatamente los elementos dependientes.

Un tema oscuro para las Herramientas para desarrolladores

El Tema oscuro en acción

Finalmente, recibimos una solicitud que hemos escuchado decenas de veces durante los últimos años: ahora puedes elegir el lado oscuro en Herramientas para desarrolladores. Ve a la configuración de Herramientas para desarrolladores, establece el tema en oscuro y disfrútalo. Diría que esta función aún está en versión beta, ya que muchas de ellas se generan automáticamente. Por lo tanto, si ves áreas en las que se podrían mejorar, no dudes en comunicarte con nosotros.

Lo mejor del resto

  • El panel lateral de la consola ahora se contrae automáticamente cuando haces clic en la pestaña Consola completa.
  • Se mejoró el árbol de archivos de Sources con los nuevos íconos y la nueva funcionalidad de agrupación

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