lunes, 28 de febrero de 2011

Mejorando aplicaciones web con Chrome Developer Tools (video)

Google Chrome

Una de las características que el navegador de Google tuvo desde el inicio fue la integración de un buen juego de herramientas para desarrolladores.

Y estas herramientas siguen progresando a lo largo del tiempo, ayudándonos en el desarrollo web (por supuesto sin importar qué navegador usen los usuarios finales). Para quienes quieran aprovechar las últimas características, es recomendable utilizar la versión disponible en el Chrome Beta Channel.

Algunas de las funciones principales incluyen:

  • Edición en vivo del DOM y las plantillas CSS (ideal para retocar sobre el navegador y experimentar hasta ajustar las páginas)
  • Depuración de JavaScript utilizando un depurador gráfico y pudiendo marcar breakpoints, o incluso editar scripts sobre la marcha, agregando sobre el navegador datos de depuración o ayudas.
  • Analizar el tiempo de ejecución de cada función para optimizar el rendimiento.
  • Seguir el flujo y proceso de pintado de las páginas mientras cargan.
  • Explorar el almacenamiento en bases de datos locales de HTML5.

Es interesante saber que estas herramientas están escritas por completo usando JavaScript y CSS, y cualquiera puede revisar el código fuente e incluso postularse para contribuir al proyecto.

Dejo un video corto (4 minutos y medio) en el que un ingeniero de Google demuestra cómo usar estas herramientas. El video está en inglés, pero la explicación es muy clara y ver las herramientas en acción seguramente les permita descubrir algún recurso que todavía no aprovechaban.