Google Chrome Developer Toolbar.

Google Chrome Developer Tools.

0. Índice de contenidos.

• 1. Introducción.
• 2. Entorno.
• 3. Instalación.
• 4. Elements panel.
• 5. Resources panel.
• 6. Scripts panel.
• 7. Timeline panel.
• 8. Profiles panel.
• 9. Audits panel.
• 10. Storage panel.
• 11. Console.
• 12. Referencias.
• 13. Conclusiones.

1. Introducción

En este tutorial vamos a realizar una introducción a la herramienta para desarrolladores de Google Chrome, Google Chrome Developer Tools.

Inspirada en el Firebug de Firefox,
nos brinda las mismas posibilidades para trabajar con el árbol DOM del cliente, en caliente, añade features propias
y, además, trae una serie de características muy interesantes
para comenzar a trabajar con html5.

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil MacBook Pro 17′ (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).
• Sistema Operativo: Mac OS X Snow Leopard 10.6.1
• Google Chrome 6.0.472.63

3. Instalación.

Lo primero a comentar es que no es necesaria la instalación de ninguna extensión para el Chrome, las tools ya vienen instaladas, sólo tenemos que acceder al menú de
Preferencias > Herramientas > Herramientas para desarrolladores, y se mostrará una ventana como la que sigue.

Aunque también podemos acceder a la herramienta inspeccionando un elemento de la página (típico de Firebug).

Las tools se muestran en la parte inferior de la ventana aunque también se puede desacoplar como una ventana emergente.

4. Elements panel

Lo primero que se muestra es el panel de elementos, en el que se puede navegar por el árbol DOM de la página y nos permite modificar, en caliente, su contenido.

Las posibilidades que tenemos de inspección y manipulación son casi las mismas que con firebug:

• la selección de un nodo nos mostrará sus características a la derecha:
  • Computed style: muestra todos los estilos del nodo después de excluir los sobreescritos por ámbito,
  • Styles: muestra todos los estilos que afectan al nodo, aparecerán tachados los sobreescritos y se pueden modificar y añadir nuevos estilos,
  • Metrics: muestra el rectángulo que ocupa todo nodo en la renderización del árbol, con tamaños y márgenes internos y externos que se pueden modificar, en caliente,
  • Properties: muestra las propiedades del nodo en relación a las interfaces que implementa, de modo que se pueden visualizar todas las características de los elementos del árbol,
  • Event listeners: muestra los eventos atachados al nodo, si los tuviera, para cada uno de los comportamientos del mismo (onblur, onclick, onfocus,…)
• un botón derecho sobre el nodo permitirá la edición del contenido html, borrarlo y añadir un atributo,
• en la parte inferior se muestra la ruta al nodo.

5. Resources panel.

El panel de recursos permite inspeccionar lo que se ha descargado de la red. Al acceder al panel nos preguntará si queremos habilitarlo para esta sesión
o para siempre, porque tracear los recursos impacta en el rendimiento.

Tras pulsar sobre «Enable resource tracking» se mostrará una ventana como la que sigue:

Muestra una línea de tiempo en cascada con la actividad de red. Se pueden distinguir por colores la descarga de documentos, hojas de estilos e imágenes.

Se puede ordenar por latencia, duración, inicio y fin de descarga y tiempo de respuesta.

Haciendo click sobre «Size» se pueden ver los recursos más pesados descargados.

A continuación se muestran, uno a uno, pudiendo acceder a su contenido y a las cabeceras, independientemente del tipo de recurso.

Por último, hay un filtro que te permite discriminar entre los tipos de recursos, para mostrar sólo unos u otros.
Por ejemplo, te permite filtrar sólo las peticiones Ajax (XHR), o que sólo se muestren las fuentes de letras descargadas, esto es una nueva feature de
html5

6. Scripts panel.

El panel de scripts nos permite debugear el código javascript.

Nos permite seleccionar el script, poner puntos de ruptura, examinar el contenido de las variables y movernos por el código de ejecución como un debugger típico.

7. Timeline panel.

Nos proporciona una visión exacta de cuánto se demora la carga de la página en el cliente: parseo del javascript, cálculo de los estilos y renderización de la página

Para activarla hay que presionar el botón de grabar y, cuando estimemos oportuno, volver a pulsarlo para parar.

El detalle que se muestra en la parte inferior se puede filtrar seleccionando una sección de la parte superior con el ratón pinchando y arrastrando.

8. Profiles panel.

Nos permite realizar un profiling de uso de CPU y memoria que requiere la carga y ejecución de funciones javascript.

«CPU profiler» muestra el tiempo de ejecución que consumen las funciones javascript ejecutadas.

«Heap profiler» muestra la distribución de la memoria que consumen los objetos javascript.

Permite realizar snapshots para luego compararlas; la idea es que después de realizar una mejora puedas comprobar que efecivamente has ganado en la misma, pudiendo
comparar la situación actual con una captura realizada antes de la mejora.

9. Audits panel.

La pestaña de audits nos recuerda bastante a las recomendaciones que podemos obtener a través de la herramienta
Page Speed.

10. Storage panel.

Permite interactuar con las posibilidades de html5
de almacenamiento local de datos, además de acceder al contenido de las cookies.

Podemos acceder a las tablas de la base de datos local, y a los datos de las mismas.

Podemos ejecutar sentencias SQL, sobre dichas tablas.

También podemos acceder al almacenamiento local que no es estrictamente ámbito de la base de datos.

11. Console.

La consola está accesible desde cualquier panel. Se puede usar para acceder al árbol DOM, revisar errores de parseo del html o debugear javascript.
Los errores y warnings se muestran abajo a la derecha.

Proporciona autocompletado y se puede usar la función $(«») para recuperar nodos del árbol DOM

12. Referencias.

• http://www.chromium.org/devtools
• http://www.chromium.org/devtools/google-chrome-developer-tools-tutorial

13. Conclusiones.

Es el Firebug de Google Chrome, con más funcionalidades, que además nos dan soporte para las nuevas características de
html5.

Bastante cool esto de tener un RDBMS de bases de datos locales del cliente que viven en el entorno del navegador 😉

Un saludo.

Jose

jmsanchez@autentia.com