Usar la consola Javascript en navegadores móviles

2 septiembre 2013 | Juan María Hernández | , , ,

Al desarrollar aplicaciones usando HTML5 para dispositivos móviles, una de las dificultades que solemos encontrar es la depuración de la aplicación. Existen herramientas como weinre que nos facilitan en cierta medida esta labor, y para algunas plataformas hay soluciones específicas, como usar Chrome para depurar en android o un Mac con Safari para depurar en iOS.

A veces podemos intentar sobrevivir sin un depurador y apañarnos con un par de mensajes escritos en la consola de javascript usando console.log. Si estamos usando PhoneGap, podemos ver la salida de consola en android usando adb, y con weinre también podemos acceder a esta información, pero si no nos queremos complicar la vida (y no somos muy exigentes), tenemos otra salida.

ConsoleJS un reemplazo para la consola Javascript

ConsoleJS es un pequeño script que me ha resultado bastante útil para poder mostrar la salida de la consola javascript en pantalla, sin necesidad de depender de herramientas de depuración. Podéis encontrarlo en este gist y para usarlo sólo es necesario incluirlo al final de la página (se puede incluir directamente desde github):

<!DOCTYPE html>
<html>
<body>

  <!-- ... -->

  <script src="https://gist.github.com/jmhdez/6405474/raw/8f4bdbb07b58eef2834ef72a66bdd56902e58419/console.js"></script>
</body>
</html>

Al incluir este script se añadirá un botón en la esquina superior derecha que nos permitirá mostrar y ocultar la consola:

Botón para mostrar la consola javascript

Al pulsarlo, se mostrará la información escrita en la consola hasta el momento:

Captura de pantalla de ConsoleJS

¿Cómo funciona?

Si revisas el código de ConsoleJS, verás que la mayoría está dedicado a formatear el html que se usa para mostrar la consola. La parte que realmente hace algo es la siguiente:

var methods = ["log", "debug", "error", "info", "warn"];

for (var i = 0; i < methods.length; i++) {
  var method = methods[i];
  var original = window.console[method];
  window.console[method] = function(msg) {
    addMsg(msg);
    original.apply(window.console, arguments);
  };
}

Lo que hacemos es aprovechar que javascript es un lenguaje dinámico para reemplazar los distintos métodos del objeto console con una nueva función que primero añade el mensaje al DOM para poder mostrarlo (usando la función addMsg) y luego invoca el método original usando apply y arguments.

Esta técnica de modificar objetos de terceros en tiempo de ejecución se conoce como monkey patching y es una herramienta muy potente, útil, sucia y peligrosa. En casos como éste resulta muy práctica, pero hay que tener cuidado porque estamos cambiando el comportamiento (aunque sea aumentándolo, como en este caso) de un objeto que no nos pertenece, por lo que podemos afectar a otros componentes que estuvieran esperando el comportamiento original. En general, no es algo que se deba hacer muy a menudo y requiere tener cuido.

Resumen

Con ConsoleJS puedes acceder fácilmente a la consola javascript en un navegador móvil sin tener que utilizar herramientas más avanzadas como las que indicaba al principio del post.

Es una implementación muy básica, pero es fácil extenderla si necesitas hacer algo más complicado, por ejemplo, enviar los mensajes generados a un servidor externo o guardarlos en almacenamiento persistente para poder revisarlos a posteriori.

2 comentarios en “Usar la consola Javascript en navegadores móviles”

  1. Luis Moreno dijo:

    Muchísimas gracias, era justo lo que necesitaba. Sólo hago la aclaración de que en la línea 15 del código, para algunos casos será necesario corregir «z-indez».

Comentarios cerrados.