25 feb. 2011

Herramientas para desarrolladores de Chrome

La idea de este post es comentarles mi experiencia (tal vez poca) con estas herramientas, me gusta que mis posts hagan que mi experiencia pueda enriquecer a otros y poder aprender de la experiencia de los mas avanzados en el tema.

1. Click derecho en cualquier elemento y luego 'Inspeccionar elemento'.
2. Ctlr + Alt + J o I, para mostrar la consola JavaScript o no.
3. O en > Herramientas > Herramientas para desarrolladores o Consola JavaScript.


En el cuadro  se eligen diferentes tipos de vista.

 muestra los elementos HTML en forma organizada, pues las paginas no necesariamente tienen el código para ser leído por humanos. En la parte derecha de esta pestaña se puede examinar el estilo de cada elemento, de que archivo viene el estilo aplicado al elemento en 'Computed Style' y 'Styles'. Se puede ver también el modelo de caja de cada elemento en 'Metrics'. Además, se puede ver la estructura de cada objeto del DOM (los elementos del HTML pasados JavaScript) en 'Properties'. Se pueden ver breakpoints (detener la ejecución de código JavaScript) en 'DOM Breakpoints' definidos dando click derecho en un elemento y eligiendo si debe detenerse cuando se cambian los atributos o hijos del elemento o cuando este es removido. 'Event Listeners' muestra a que eventos ( pasar el mouse por encima, clickear, presionar una tecla) responde el elemento seleccionado.

En el cuadro  están los botones de buscar y cerrar .

En el cuadro  se muestra el código fuente de la página.

En el cuadro  se muestra la jerarquía de los elementos con su id (ej. div#miId) y su clase (ej. div.miClase).

En el cuadro  se errores y advertencias de la consola.

 muestra cada archivo que se recibe desde el servidor, información de bases de datos del lado del cliente (para uso con HTML5), almacenamiento local y de sesión (exactamente no se que guardan), cookies (archivos que guarda un servidor en un cliente para identificar usuarios) y caché de la aplicación (archivos que deja una pagina web en el cliente para que no tenga que descargarlos nuevamente).

 muestra las peticiones realizadas al servidor con tiempos de respuesta y tamaños de información de las respuestas y el total de información recibida del servidor.

 presta funciones para hacer seguimiento a cada comando JavaScript que ejecuta el cliente. Permite definir 'breakpoints' (momentos en los que la ejecución de los comandos JavaScript se detiene, un momento puede ser por ejemplo cuando se pone el cursor encima o se clickea un botón o una entrada de texto).

 muestra el tiempo de operaciones que realiza el navegador y cuanto de memoria consumen estas operaciones.

 permite hacer un seguimiento de las funciones de JavaScript, quitar algunas funciones para definir diferentes perfiles y medir el tiempo y el consumo de memoria de cada uno.

 genera sugerencias para mejorar el desempeño del sitio web, cosas como quitar reglas de estilo no utilizadas, permitir descargas paralelas o unificar archivos de estilo y de scripts.

 es una consola JavaScript, recibe comandos JavaScript y además muestra los errores o advertencias que existen para la página.

No hay comentarios:

Publicar un comentario