Consola de herramientas para desarrolladores de Google Chrome

La consola de devTools o herramientas para desarrolladores de Google Chrome es una herramienta para poder hacer pruebas antes de crear nuestro código fuente, imagina que queremos recoger y cambiar el color de letra de un id concreto cuando pinchamos en un enlace con jQuery, podemos saber si nuestra función devuelve el valor esperado antes de crear el código y subirlo al servidor. Esto supone un gran ahorro de tiempo, y un buen entorno de pruebas.

Uso de la consola

La consola sirve entre otra cosas para depurar errores de javascript, si tenemos un error de javascript se visualizara en la consola en color rojo, con una detallada explicación del error y con enlaces a los ficheros y filas donde se produce el error.

Para usar javascript podemos usar el formato JQUERY, es decir en vez de tener que escribir document.loquesea, podemos usar el símbolo $. Ejemplos en console:

• $(‘#title’): Sacaría el elemento de nuestra página con el id = title.
• $(‘.saludo’).text(‘Hola’): En el elemento con clase saludo cambiaríamos el texto por Hola.

Otra posibilidad es abrir la pestaña elementos y abrir la consola (pinchando sobre los tres puntos verticales en la cabecera de la herramienta para desarrolladores), y al seleccionar un elemento con el ratón (se oscurece) podemos hacer referencia al mismo con $0.

• $0.remove(): Con este ejemplo estaríamos eliminando el elemento seleccionado.

Y además si en nuestro javascript tenemos funciones podemos llamarlas y ver si su ejecución devuelve los valores deseados, como por ejemplo:

• calendar.festivos(12): En este ejemplo usamos un objeto calendar creado en una función propia y en la función festivos le pasamos el mes y nos devuelve los días festivos de ese mes, podemos comprobar si el valor devuelvo es correcto.

Probar las soluciones antes de subirlas

Otra funcionalidad muy interesante es la posibilidad de editar el javascript y hacer pruebas para solucionar los errores en la propia herramienta, el proceso es:

• En console vemos el error, que estará marcado en rojo, con información sobre el error, y un enlace al js en donde está el error.
• Al hacer clic en el enlace se nos habré en la pestaña source el js y el error marcado con una x roja.
• En source podemos hacer cambios y con el botón derecho podemos guardar los cambios (save).
• Y una vez guardados podemos probar que el error está solucionado llamando desde la consola a la función corregida.

Trabajando con el código

Como estamos observando en la pestaña source podemos trabajar con el javascript. Aparte de poder hacer cambios en el javascript y probarlos, tenemos otras posibilidades de uso:

• Identificar errores: Arriba a la derecha tenemos un pause (=) que si lo activamos (se pone azul) y realizamos alguna actividad en la que se produzca un error de javascript, nos posicionara en la línea que se produce ese error.
• Visualizar código minificado: Abajo del código fuente en la pestaña source hay un iconito {} que al clicarlo el código minificado se visualiza en forma de árbol, verdaderamente útil para depurar errores javascript.
• Establecer puntos de ruptura: Hay otros botones (a la izquierda del =) que sirven para navegar entre el código fuente. Si activamos el =, y activamos un javascript con la flecha podremos ir viendo el camino que recorrerá nuestro script. Por ejemplo, tenemos que controlar un email, según escribimos se produce un error… podemos activar el pause, escribimos y en cuanto se produzca el error nos posicionara en el lugar donde está dentro del código fuente, si escribimos algo para corregirlo, podemos probarlo con la flecha.