Hoy voy a mencionar el uso de las herramientas para desarrolladores que se encuentran en Chrome. Estas herramientas corresponden a la versión 37 de chrome.
Nota:
Estas herramientas no son exclusivas de chrome. Casi todos los navegadores de escritorio recientes – firefox, opera, safari, internet explorer – cuentan con herramientas para desarrolladores o también se pueden agregar extensiones o plugins como firebug que ayudan a desarrollar y / o depurar tanto la parte visual como funcional de un documento HTML. Lo mejor es probar diferentes herramientas en diferentes versiones y utilizar la que más se ajuste al flujo de trabajo que tengas.
Para habilitar las herramientas de Chrome tenemos cuatro opciones:
-
Desde el menú de la aplicación seleccionar View.
Seleccionar Developer
Seleccionar Developer Tools o JavaScript console *
-
Utilizando el menú de Chrome.
Seleccionar Tools.
Seleccionar Developer Tools o JavaScript console *
-
Dar clic derecho sobre algún elemento del documento que se esté visualizando en el navegador y seleccionar Inspect Element
-
En OS X:
Presionar el teclado CMD + Alt + i para visualizar las herramientas de desarrollo.
Presionar el teclado CMD + Alt + j para visualizar la consola de JavaScript *.
En Windows / Linux:
Presionar el teclado CTRL + Alt + i para visualizar las herramientas de desarrollo.
Presionar el teclado CTRL + Alt + j para visualizar la consola de JavaScript *.
* La consola de JavaScript es parte de las herramientas de desarrollo. Al utilizar esta opción se visualiza directamente en lugar de tener que seleccionarla dentro del menú de las herramientas.
Una vez abiertas las herramientas para desarrolladores se visualizan de la siguiente manera.
Elements: Tiene dos secciones.
La primer sección – lado izquierdo – muestra el código del documento que se está visualizando.
La segunda sección visualiza el estilo que se está aplicando al nodo que está seleccionado del lado izquierdo.
Network: Visualiza los elementos – documento html, hojas de estilo, código javascript, imágenes, video, audio u otros elementos – que componen el documento que se está visualizando, así como el método que se utilizó para obtener los elementos, el estado de las respuestas del servidor, tipo de documento, tamaño del documento, la posición en la línea del tiempo – para visualizar el orden en el que se van incluyendo los elementos en el documento – , el iniciador – el elemento o la instrucción que mandó llamar el elemento -.
Para utilizarse debe estar seleccionada esta pestaña y después cargar – o recargar – el URL donde se encuentra el documento.
Sources: Archivos que componen el documento. Esta pestaña es útil por dos razones.
1. Si las hojas de estilo o el código de JavaScript se encuentran minificados – comprimidos – es posible hacerlos legibles – incluir saltos de línea y espacios – utilizando el botón Prettify.
2. También podemos depurar el código de JavaScript incluido en el documento.
Timeline: Permite analizar cómo integra el navegador los diferentes recursos del documento desde que se manda llamar hasta que está listo.
Profile: En esta pestaña podemos obtener distintos tipos de perfiles que están relacionados con el uso de la memoria y el CPU por parte del documento que estamos visualizando.
Resources: Sirve para trabajar con recursos que utiliza el documento pero que no son propiamente parte del documento. Algunos de estos recursos son localStorage, sessionStorage, cookies, Application Cache, indexedDB, y aunque ya no está en desarrollo WebSQL.
Audits: Realiza una auditoría al documento. Permite analizar el desempeño del documento que se encuentra siendo visualizado o se puede especificar que se vuelva a cargar el documento y para realizar un análisis más detallado.
Console: Aquí podemos evaluar código de JavaScript. Si llegara a existir algún error dentro del código de un documento que estemos visualizando aquí se muestra el mensaje de error y la línea donde sucedió.
Se le puede dar clic al error para que nos muestre el código.
Referencia de uso del depurador en el panel de sources.
Puedes descargar los videos de la referencia de uso de las herramientas para desarrolladores.
Aunque no tiene mucho sentido – porque el código únicamente manda mensajes a consola y es la primer parte del “cuaderno de trabajo” para la clase que estoy dando – puedes descargar el código del video si quieres.
Nota:
En los videos llamo panel o pestaña – la costumbre heredada del navegador – indistintamente a cada sección dentro de las herramientas de desarrollo.
Algunas versiones de las herramientas para desarrolladores más recientes se encuentran en las versiones para desarrolladores de los navegadores como Chrome Canary o Firefox Aurora.
Finalmente No toda la funcionalidad que se encuentra en estas herramientas va a ser incorporada en las versiones normales de los navegadores pero es recomendable utilizarlas.