Consola de herramientas para desarrolladores de Google Chrome

Home » Blog » 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.


Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 8 reseñas
Iñigo me ha asesorado con un problema que tenía para acceder a mi web y me ha salvado la vida, porque creía que había perdido todo el trabajo que llevaba haciendo años. Muchísimas gracias. Es gratificante encontarte con alguien que controla y te ayuda en los problemas que te pueden surgir.
Santutxu Zaharra
Santutxu Zaharra
11/06/2024
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023