La consola JavaScript del navegador (I)

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

La consola del navegador es una herramienta que nos ayuda a depurar nuestras páginas, facilitando nuestro trabajo diario. Nos ayuda con Javascript, con CSS, con HTML y, en general, con todos los elementos de la parte cliente. Si lo que te interesa es la depuración de la programación del lado del servidor (PHP), tienes una herramienta muy adecuada en este artículo.

En el presente post empezaremos a conocer algunos de los modos en que nos puede ayudar, que son bastantes:

  • Nos muestra los errores de JavaScript.
  • Nos permite volcado de variables en tiempo de ejección, para ver si contienen lo que se espera que contengan.
  • Nos permite inspeccionar cada elemento de la página de modo independiente.
  • Nos permite aplicar y/o eliminar estilos CSS individualmente a cada elemento de la página.
  • Nos permite introducir instrucciones JavaScript en la página, que se ejecuten en tiempo real.
  • Nos permite ver si nuestro sitio es responsivo, y probarlo emulando diferentes terminales.

Todos los navegadores modernos incorporan una consola cómo herramienta de ayuda a los desarrolladores. Para activarla, en Chrome, Firefox y Opera, podemos usar la combinación de teclas CTRLMAYSJ. En Explorer, podemos pulsar F12.

Si bien la consola funciona de modo muy similar en todos los navegadores, en este artículo nos vamos a centrar en Chrome. No en vano, es uno de los favoritos de la mayoría de los desarrolladores. De todos modos, casi todo lo que aquí veamos podrá ser extrapolado a cualquier otro que tú uses.

VOLCAR INFORMACIÓN

Vamos a partir de una página para empezar a ver cómo sacarle partido a la consola. Se trata de un eejmplo de uso del plugin jAlert que puedes conocer en este artículo. Cargamos la página con la consola abierta y la vemos con el aspecto que se muestra a continuación:

Una página correctamente cargada en el navegador. La consola no muestra errores.

Una página correctamente cargada en el navegador. La consola no muestra errores.

No se ve todo el contenido de la página, pero eso no es relevante ahora. Observa, en la parte inferior de la ventana, que está resaltada la opción Console (Consola), y esta aparece vacía. Si se hubiera producido algún error de JavaScript lo veríamos aquí.

Pulsa el botón Ver un alert. Te saldrá un cuadro de aviso. Pulsa sobre el botón Aceptar y en la consola te saldrá un texto, cómo ves en el fragmento de imagen reproducida a continuación:

texto_enviado_a_consola

 A la derecha ves el nombre del script que ha generado ese contenido, y en que línea se ha generado.

La consola se maneja, por programación, mediante el objeto console. El método log() de este objeto vuelca en la consola un mensaje predefinido, o bien el contenido de una variable. Así, el resultado que acabas de ver se ha generado con la siguiente línea:

console.log("Has cerrado el alert");

Cómo volcado de un mensaje puede resultar un método práctico en ocasiones, cómo, por ejemplo, en un condicional, para saber si se pasa por el condicional o por la alternativa. También es muy útil para volcar variables, a fin de comprobar su contenido en un momento dado de la ejecución.

En la consola podemos lanzar mensajes de aviso, que nos pueden servir cómo testigos de determinadas acciones, mediante el método warn(). Suponte que, en el ejemplo antetrior, hubiéramos usado este último método, en lugar de log(), así:

console.warn("Esto es un aviso.");

El resultado sería cómo el de la siguiente imagen:

console_warn

 Puede parecer que la diferencia con el resultado anterior resulta irrelevante, pero en seguida veremos que puede no serlo. Antes vamos a conocer otro método para el volcado de información en la consola. Imagina que quieres poner un volcado, similar a los que hemos visto, pero que sólo se produzca si se ejecuta cierto código (un condicional, por ejemplo) que implique una situación de error en el script. Esto puede ser de gran ayuda cuando se unsan bloque try…catch. Podrías tener un fragmento que intente realizar una operación y capture una posible excepción, cómo en el siguiente ejemplo:

try {
   // Código que se intenta ejecutar
   ponerMensaje("Hola");
} catch (fallo) { // Si se produce una excepción
    console.error(fallo.message);}

error_en_consolaCómo ves, hemos usado una función que no existe en JavaScript, y no la hemos definido en ninguna parte. Sabemos que se va a producir un error. Lo hemos hecho así a propósito, para generar un mensaje de error. La única diferencia con un error imprevisto es que este lo hemos capturado cómo Excepción. El resultado lo vemos a la izquierda de estas líneas. Los mensajes de error siempre tienen el mismo aspecto, en la consola. En rojo y con un icono indicador a la izquierda. error_desplegadoQue sean excepciones previstas y capturadas u errores generados por un descuido o fallo en la programación, es irrelevante.

Observa la pequeña flecha triangular a la izquierda del mensaje. Si la pulsas, se depliega más información, incluyendo el script y línea exactos dónde se ha producido el error, cómo ves en la imagen situada a la derecha de este texto.

Cómo ves, la referencia de script y línea tiene el color azul de los enlaces. Pulsalo y veras la consola con el siguiente aspecto:

detalles_de_error

Cómo ves, se ha activado la pestaña Sources, y la consola se ha dividido en tres paneles. En el lado izquierdo, vemos la estructura de fichero de la que forma parte el script que ha dado el error. En la parte central, vemos un fragmento del script, con la línea que ha dado el error marcada con un icono rojo. La parte derecha contiene información adicional que nos puede ayudar en la depuración. Entraremos en más detalles sobre este panel más adelante.

El volcado de variables en la consola es una herramienta de depuración de lo más útil en ocasiones y, en otras, completamente imprescindible. Pero en javascript no sólo se emplean variables simples. A menudo se emplean matrices, y también matrices en forma de objetos JSON, que permiten emplear matrices bidimensionales indexadas y/o asociativas. Imagina que tienes una lista de empresas, con una serie de datos de cada una de ellas. Puede, por ejemplo, haber sido leida desde una base de datos con PHP y codificada en notación JSON para pasarla a JavaScript. Podría tener un aspecto cómo el siguiente:

var empresas = [
    {empresa: "Iluminación del Sur, SA", sector: "Eletricidad", ciudad: "Melilla", oficinas: 2, certificada: true},
     {empresa: "Enfoscados y Alicatados, SL", sector: "Albañilería", ciudad: "Valencia", oficinas: 1, certificada: false},
     {empresa: "Financiera Los Leones, SA", sector: "Actividades financieras", ciudad: "Burgos", oficinas: 57, certificada: true},
    {empresa: "Catering General, SL", sector: "Alimentación", ciudad: "Sevilla", oficinas: 2, certificada: true},
     {empresa: "Gestión del Agua, SA", sector: "Fontanería", ciudad: "Cáceres", oficinas: 1, certificada: true},
    {empresa: "Vigilancia y Control, SLU", sector: "Seguridad privada", ciudad: "Tenerife", oficinas: 3, certificada: false}
];

Veamos que ocurre con el método log() que ya conocemos:

console.log(empresas);

El resultado lo ves a continuación:

objetos_en_la_consola

Como ves, una lista de referencias a objetos. Si pruebas a desplegarla con la flechita gris que aparece a la izquierda, verás una lista interminable de los objetos que hay, cada uno referido a una de las empresas que tenemos en la lista, con un exceso de información, innecesaria y, en el 99,9% de los casos, completamente inútil, que hace la lista ilegible en la práctica.

Ahora, sustituye el método log() por el método table(), asÍ:

console.table(empresas);

El resultado lo ves aquí:

tabla_en_consola

Cómo ves, los datos aparecen perfecatmente organizados, todos a la vista, de una forma cómoda y legible. Y mejor aún. Si pulsas sobre los encabezamientos de las columnas, las filas se reordenan ascendente o descendentemente, por el criterio de la columna sobre la que hayas pulsado. Esto es mucho más cómodo, a la hora de depurar.

ALGUNAS AYUDAS

botones_de_consolaLa consola cuenta con ayudas en forma de botones que puedes usar durante la comprobación de datos. Los más relevantes los ves en la imagen de la izquierda.

Selección de elementos. Nos permite seleccionar un elemento para inspeccionarlo a fondo, cómo veremos en el próximo artículo de esta serie.

Responsivo. Pone el navegador en modo responsivo, es decir, emulando distintos dispositivos móviles de diversos tamaños y resoluciones, para que podamos comprobar si nuestra página es adaptativa.

Borrar consola. Limpia completamente la consola de todo: errores, logueo de variables, mensajes o cualquier otro contenido que el documento haya mandado. Nos viene bien para empezar de nuevo con una batería de pruebas y seguir comprobando nuevos datos.

Filtrar. Nos permite decidir si queremos ver sólo los errores, o sólo los logs, etc. Incluso, dentro de estas categorías, cuenta con una casilla de texto para filtrar más aún, buscando coincidencias. Cuando el volcado de datos en consola es abrumador, contar con estos filtros es muy valioso.

COMANDOS EN EJECUCIÓN

La consola no sólo nos permite volcar datos, sino que, una vez que la página está cargada en el navegador, nos permite insertar comandos de JavaScript que se ejecutarán en tiempo real, en el momento de pulsar la tecla Enter. Para ello, sítúate sobre la cosola (ya sea que esté vacía o con contenido). Haz clic junto al prompt en forma de angulito de color azul que ves a la izquierda, justo debajo del último contenido. Verás el cursor parpadeando. Está esperando tus instrucciones. Escribe cualquier comando de JavaScript. Por ejemplo, alert("Desde la consola"); y pulsa Enter. Verás que el comando se ejecuta inmediatamente.

En el próximo artículo seguiremos explorando la forma en que la consola de JavaScript nos ayuda a depurar nuestro trabajo.

     

4 comentarios:

  1. Pingback: La consola JavaScript del navegador (II) » eldesvandejose.com

  2. Pingback: La tecnología JSON » Recursos para programadores

  3. Pingback: El plugin DataTables (XIV). Más tipos de datos desplegables. – El desván de Jose

  4. Pingback: Eliminar elementos en una matriz JavaScript – El desván de Jose

Deja un comentario

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