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 la consola más inteligente, cómo editar reglas de @keyframe directamente en el panel Styles, cómo divertirte con las variables personalizadas de CSS y cómo unirte al lado oscuro.

Función de autocompletado más inteligente en tu consola

Si eres como yo y muchas otras personas, escribes un comando en la consola para depurar tu app, ver que no funciona, iterar y escribirlo una y otra vez. Para ayudarte con eso, ahora completaremos automáticamente las sentencias completas que escribiste anteriormente, de la siguiente manera:

Autocompletar

Edita directamente reglas @keyframe en el panel Styles

Cuando presentamos el inspector de animaciones y el editor de aceleración en Herramientas para desarrolladores, se limitaban a las transiciones porque nunca mostramos las animaciones CSS basadas en @keyframe en el panel Style. Me da gusto decir que eso es cosa del pasado, así que no te preocupes. Mira nuestro tweet en video para obtener una vista previa.

Compatibilidad con propiedades de CSS personalizadas

Propiedades personalizadas de CSS en Herramientas para desarrolladores

CSS tiene muchas ventajas, y una de ellas son las variables personalizadas, que se lanzarán en Chrome 49. Nos aseguramos de incluir compatibilidad total con Herramientas para desarrolladores, de modo que, si ya usaste variables en Sass, prueba las variables nativas, ya que te permiten editar propiedades en el momento en el panel Estilos y actualizar elementos dependientes de inmediato.

Un tema oscuro para Herramientas para desarrolladores

El Tema oscuro en acción

Finalmente, aceptamos una solicitud que recibimos decenas de veces durante los últimos años: ahora pueden elegir el lado oscuro en Herramientas para desarrolladores. Ve a la configuración de Herramientas para desarrolladores, establece el tema en oscuro y disfruta. Diría que esta herramienta aún se encuentra en versión beta, ya que muchas de ellas se generan automáticamente. Por lo tanto, si observas áreas en las que se podría mejorar, comunícate con nosotros.

Lo mejor del resto

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

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