Novedades en las herramientas de desarrollador de Chrome

Grabar screenshoots de la pestaña Network, bloquear peticiones para simular lazy loads o eliminar scripts de la depuración (blackboxing) son algunas de las novedades que traerá las nuevas herramientas de desarrollo de Chrome.

Addy Osmani es miembro del equipo de desarrollo de Chrome en Google, y en su última charla habló sobre las novedades que nos traen a los desarrolladores web en sus herramientas de desarrollo de Chrome (Chrome DevTools).

Entre las novedades destacan:

  • Ordenar las pestañas del inspector.
  • Coloreado del código en la consola (actualmente se utiliza un único color).
  • Mejora del rendimiento global del inspector.
  • Grabar screenshots de la pestaña Network en la pestaña Timeline para ver la progresión de carga de la web.
  • Añadir perfiles propios de velocidades de red (throttling).
  • Bloquear peticiones: ahora será posible elegir un recurso y decidir no cargarlo. Por ejemplo, esto es especialmente útil para simular un comportamiento “lazy loading“.
  • Posibilidad de ver un timeline específico para las animaciones web.
  • Editar HTML directamente en la consola: seleccionas un elemento en el arbol DOM y lo editas en la consola en lugar de en el panel de HTML.
  • Previsualizar imágenes en la propia consola sin necesidad de abrirlas en pestañas.
  • Blackboxing: esta técnica añade el script deseado a una lista. De esta forma solo depuramos el código de nuestra aplicación y evitamos que el depurador entre en los scripts de librerías de terceros. Realmente útil cuando usamos frameworks y abstracciones como Angular.js, Backbone, Ember, jQuery, etc.

Para mí de las cosas más útiles son las screenshots en el Timeline y la pestaña Network, bloquear un recurso y el blackboxing (este último me va a quitar más de un dolor de cabeza depurando). La charla completa se puede ver aquí.

test