viernes, 23 de noviembre de 2012

Cómo depurar Javascript en Google Chrome

A continuación explicaremos como depurar código

Javascript

en

Google Chrome

. En la actualidad podríamos considerar Javascript como una técnica emergente en desarrollos web ya que con la aparición de

Html5

y librerías como

JQuery

permite realizar operaciones en marco cliente que hace unos años eran impensables. Cada vez más, en entorno web, se está extendiendo el uso de Css y el manejo dinámico de elementos del DOM con scripts. Este tipo de lenguajes interpretados se combina en muchas ocasiones con lenguajes servidor compilados, lo cual dificulta al desarrollador disponer de un entorno unificado de desarrollo en el que poder depurar y analizar código.

La mayoría de IDE's siguen esta tendencia y están proporcionando mejoras para facilitar desarrollo javascript-css pero siempre queda todo un poco ligado a compañía, navegador, versión del producto, etc. Otra opción recomendable a día de hoy es depurar scripts cliente directamente en el navegador en que estás ejecutando la página, independientemente del entorno de desarrollo que uses. En este artículo veremos como hacerlo en

Google Chrome

.

En primer lugar hemos de añadir la instrucción

debugger;

en el punto que queremos simular un break-point o punto de interrupción en nuestro código.
function login() {
    if ($("#fieldEmail").val().length > 0)
    {
        //llamada al script servidor
        $.ajax({
            type: "POST",
            url: "http://www.areaTIC.net/Servicios/Ejemplo...",
            dataType: 'json',
            success: function (data) {
                debugger;
                var user = data.usuarios;
                //acción...
            },
            error: function (response) {
                debugger;
                //interesa analizar el motivo del error...
                alert('No ha sido posible comunicar con el servidor.');
            }
        });
    }
}
Lo siguiente, una vez estamos ejecutando la página ya desde Google Chrome usamos la combinación de teclas 'Ctrl + Mayus + j' para acceder a la

Consola Javascript

y esperamos que el hilo de ejecución se sitúe en el punto de interrupción.

Una vez se detiene la ejecución, si navegamos por la consola veremos que se asemeja a las herramientas habituales que nos proporciona cualquier entorno de desarrollo.


De este modo sin complicarse demasiado las cosas ya podríamos depurar código javascript y salir de algún apuro, si esta explicación se queda corta podéis visitar este enlace para profundizar en la herramienta que ofrece Google Chrome para desarrolladores.

Recuerda visitar el archivo de

areaTIC

, también puedes hacerte seguidor en las redes sociales para estar al tanto de las novedades. Esperamos tu participación!


1 comentario:

Jaun Gutierrez dijo...

Hola, muy interesante el artículo sobre todo la parte de cómo depurar javascript

Publicar un comentario