Ir a Tecsisa.com
3sep/08

Depurar Aplicaciones y Páginas Web con Google Chrome

El martes 2 de septiembre de 2008 Google realizó el lanzamiento de Google Chrome, un nuevo navegador web. El navegador presenta muchas novedades técnicas y una interfaz muy limpia. Google Chrome permite ejecutar aplicaciones web con la velocidad y la respuesta habitual de las aplicaciones tradicionales de escritorio.

Los desarrollos realizados con anterioridad al lanzamiento de Google Chrome funcionan correctamente y aprovechan todas las ventajas del nuevo navegador si en su desarrollo se aplicaron los estándares de la W3C. 

Para los nuevos desarrollos y para reparar algún problema que pueda aparecer, Google Chrome dispone de herramientas de depuración. A continuación se presentan y se explican empíricamente (a 3 de septiembre de 2008 no existe documentación acerca de estas herramientas [1]).

Herramientas de depuración disponibles en Google Chrome

A continuación se presentan las herramientas de depuración que ofrece Google Chrome y que trataremos en este artículo:

  • Consola de JavaScript: interfaz que permite consultar los elementos html de la página o aplicación, estilos asociados, layout y propiedades (como elemento y como objeto).
  • Ver código fuente: presenta el código (html, javascript o css) correspondiente al recurso seleccionado
  • Depurar JavaScript: ventana de comandos que permite consultar el código de los scripts y fijar puntos de interrupción
  • Administrador de tareas: presenta información de utilización de recursos (CPU y memoria) para cada página y componente.
  • Comandos about: permiten consultar información de ejecución, uso de recursos, configuración, plugins, ...
    • about:stats,
    • about:network,
    • about:histograms,
    • about:plugins,
    • about:memory,
    • about:cache,
    • about:dns

Consola de JavaScript

La consola muestra gráficamente el contenido de la página en formato árbol.

El acceso a la consola de JavaScript se encuentra en Opciones para desarrolladores dentro del menú de página.

La consola se divide en dos grupos, elements y resources. El primer grupo permite consultar el contenido de la página en formato árbol, acceder a la información asociada a cada elemento y ejecutar comandos JavaScript.

Elementos y recursos de la consola de JavaScript

Google Chrome

Estilos asociados a un elemento de la página web

Al seleccionar un elemento en el árbol se muestra a la izquierda de la consola los distintos estilos aplicados al elemento con las propiedades modificadas (o todas al pulsar show inherited). En el siguiente ejemplo aparecen los estilos computados (o finales) junto con los que han dado lugar a ese resultado .gb1, .gb2 (inline al estar en la misma página) y los que tiene por defecto (propios de Google Chrome).

Estilos asociados a un elemento HTML

Medidas de los elementos de la página web

Para obtener el tamaño de los bordes, márgenes internos o externos y demás información de "medida" se accede al acordeón "Metrics" una vez seleccionado el elemento que nos interesa en el árbol. La consola muestra las dimensiones del elemento, el borde, padding y margin.

Medidas asociadas a un elemento HTML

Propiedades de los objetos de la página

La depuración de JavaScript normalmente involucra acceder a métodos y propiedades de los elementos de la página. Al seleccionar el acordeón "HTML Element" o algunos de los "Object" se accede las propiedades y métodos de cada objeto.

Para identificar dentro de la jerarquía del árbol HTML el elemento seleccionado, se muestran a modo de "path" los distintos ancestros del elemento.

Propiedades del objeto html

Consola de Google ChromeHabiendo identificado el elemento podemos llamar a sus métodos o consultar las propiedades utilizando el acordeón de Object o directamante en JavaScript usando la consola.

Uso de la consola de JavaScript de Google Chrome

La consola permite ejecutar comandos JavaScript sobre los objetos pertencientes al mismo proceso (tab prinicipal y tabs abiertos por el prinicipal). En el siguiente ejemplo se accede a la propiedad título del documento:

Uso de la consola de JavaScript de Google Chrome

También se puede utilizar la consola para cambiar propiedades de los elementos. En el siguiente ejemplo se accede al contenido de la caja de búsqueda y se modifica.

En la caja de búsqueda se escribe el texto "search terms" y se pulsa con el botón derecho sobre el campo, en el menu se selecciona Inspeccionar elemento.

Uso de la función Inspeccionar elemento en Google Chrome

El elemento input correspondiente a la caja de búsqueda aparece seleccionado en la consola de JavaScript.

Para acceder al valor del elemento se escribe: f.q.value, donde f es el nombre del formulario y q el nombre del campo.

Elemento input seleccionado en consola JavaScript de Google Chrome

De forma análoga se puede modificar desde la consola de JavaScript el valor del campo en la vista web.

f.q.value = "new search term"

Modificar campo input desde depurador JavaScript de Google Chrome

Vista Resources

La vista resources permite consultar gráficamente el orden de descarga de los elementos que componen la página, el tiempo y peso de cada descarga y el contenido descargado:

Vista resources de Google Chrome

Seleccionando el recurso nav_logo3.png vemos su contenido, se trata de una imagen que contiene a su vez varios recursos. Esta imagen utiliza la técnica de sprites que mediante css ubica trozos de imagen en la página, ahorrando ancho de banda y reduciendo el número de peticiones al servidor (hace unos meses, no aplicaban esta técnica. ver: Optimizar la carga de un sitio web: Microsoft Fiddler HTTP Debugger).

Vista de recurso gráfico en Google Chrome

Ver código fuente

Esta vista es especialmente necesaria en Google Chrome para hacer uso del resto de herramientas de depuración, por ejemplo el depurador de JavaScript requiere conocer el nombre de las funciones a depurar.

Para acceder al código fuente se pulsa con el botón derecho sobre la página, seleccionando "Ver código fuente" o se utiliza la vista Resources de la Consola de JavaScript, pulsando sobre el rescurso que se quiere visualizar. Esta última vista permite también ver recursos gráficos.

Depurar JavaScript

El depurador de JavaScript de Google Chrome está basado en línea de comandos, lo que hace muy incómodo su uso. Además es necesario conocer la estructura de la página o aplicación y los nombres de las funciones. Espero que próximamente se incluya una interfaz más similar a Firebug.

El acceso al depurador de JavaScript se encuentra en Opciones para desarrolladores dentro del menú de página.

Los siguientes comandos permiten depurar una función:

  • help: presenta una lista de comandos.
  • break [location] <condition>: permite fijar un punto de interrupción, siendo location el nombre de una función.
  • clear <breakpoint #>: elimina un punto de interrupción, requiere un número que corresponde al número de punto de interrupción asignado al usar la instrucción break.
  • scripts: presenta una lista de los scripts encontrados en la página o cargados por esta (ficheros JavaScript externos).

Ejemplo: depurar la función que coloca el cursor en la caja de búsqueda al entrar en www.google.es

  • Abrir la página www.google.es
  • Abrir el depurador de JavaScript
  • Consultar los scripts disponibles en la página
$ scriptschrome-resource://inspector/PropertiesSidebarPane.js (lines 139)chrome-resource://inspector/StylesSidebarPane.js (lines 652)chrome-resource://inspector/Panel.js (lines 104)
...
http://www.google.es/webhp?hl=es (lines 9)
http://www.google.es/webhp?hl=es (lines 3)
  • El resultado del comando indica que hay código en el fichero webhp y que en un caso son 9 líneas y en el otro 3 [2]. También aparecen otros ficheros externos y que corresponden a el propio navegador (recursos chrome)
  • Examinando en contenido del fichero webhp en la vista ver código fuente observamos que hay una función sf, la usaremos como punto de interrupción.
SITpKYbOnQPRkf22Aw",kEXPI:"17259,17735",kHL:"es"};
function sf(){document.f.q.focus()}
window.gbar={};(function(){var b=window.gbar,f,h;b.qs=function(a){var c=window.encodeURIComponent&&(document.forms[0].q||"").value;if(c)a.href=a.href.replace(/([?
  • Fijar el punto de interrupción:
$ break sf
set breakpoint #2
  • El resultado indica que se ha fijado un breakpoint con el id 2. Este id servirá para hacer referencia al punto de interrupción de ahora en adelante.
  • Como la función sf se ejecuta al cargar la página, para que salte el punto de interrupción pulsaremos en el icono recargar de la ventana principal del navegador.
  • La respuesta de la consola de depuración es:
paused at breakpoint 2: onload(evt=#<an Event>), http://www.google.es/webhp?hl=es
3: sf();if(document.images){new Image().src='/images/nav_logo3.png'}
  • Para avanzar disponemos de los siguiente comandos (obtenidos al escribir help):
    • args: indica los argumentos recibidos por la función o método en el que se encuentra el depurador.
    • break [location] <condition>: permite añadir un nuevo punto de depuración.
    • break_info [breakpoint #] : presenta información acerca de un punto de interrupción.
    • backtrace [from frame #] [to frame #]: traza desde un frame (momento de ejecución) a otro.
    • clear <breakpoint #>: elimina un breakpoint.
    • continue: continua la ejecución hasta el siguiente breakpoint.
    • frame <frame #>: presenta información sobre un frame (ejemplo frame 0, corresponde a la llamada a sf).
    • help [command]: este listado de comandos.
    • locals: parece mostrar las variables locales del método.
    • next: ejecuta la siguiente instrucción.
    • print <expression>: ejecuta una expresión JavaScript e imprime su resultado (ejemplo print document.title).
    • scripts: listado de scripts en la página.
    • source [from line] | [<from line> <num lines>]: imprime el código fuente desde una línea a otra
    • step: ejecuta la siguiente instrucción y en el caso de una llamada a función entra en el código de la misma permitiendo ejcutar sus instrucciones paso a paso.
    • stepout: regresa al punto en que se llamó a step (sale de la función).
  • En la función sf se comprueba si hay imágenes y en ese caso se crear una nueva. Podemos comprobar el valor de la condición o de cualquier objeto utilizando la función print. En este caso indica que hay una colección y la condición se cumple.
$ print document.images
#<an HTMLCollection>
$ print (document.images!=false)
true

Administrador de tareas

El administrador de tareas es muy útil desde el punto de vista del desarrollo para comprobar el uso de los recursos de una aplicación web. Así mismo permite finalizar procesos de forma individual, evitando tener que cerrar por completo el navegador cuando una aplicación se comporta mal.

Administrador de tareas de Google Chrome

[1] La herramienta de depuración está basada en Web Inspector, información aportada por John J Barton)

[2] El fichero html está comprimido y tiene tres líneas, por lo que el resultado del comando scripts parece indicar el número de líneas si el javascript fuera legible.

avatar

Acerca de

Javier Ruiz Jiménez es Ingeniero en Informática y está especializado en infraestructuras de sistemas empresariales. Es socio fundador de Tecsisa.
Comentarios (9) Trackbacks (0)
  1. Gracias por el articulo sobre un tema del que hay poca información.

    Intento depurar Javascript y me queda una gran duda :

    ¿ Donde escribo los comandos ? Cuando intento escribir en consola “help” me responde “ReferenceError : help is not definded”. ¿ Donde puedo fijar un punto de interrupción con “$ break guncion”

  2. Hola Javier

    Aunque ha pasado tiempo desde el lanzamiento hay poca información. En el caso de este artículo la información ya no es válida, esto es una buena noticia pues ahora es más fácil depurar.

    Google Chrome 5.0.x incorporar un depurador gráfico por lo que la consola ya no interpreta comandos dirigidos a Google Chrome, ahora son ejecutados como si fuera javascript.

    Puedes depurar gráficamente así:

    Menú de Página -> Opciones para desarrolladores -> Herramientas para desarrolladores
    Presentará una interfaz con:
    - Elements (vista de HTML)
    - Resources (todas la peticiones a servidor)
    - Scripts (depurador gráfico de Javascript): permite poner breakpoints, evaluar variables, pila de llamadas.
    - Profiles (análisis de rendimiento): hay una alternativa en forma de plugin, el Speed Tracer
    - Storage (cookies y Google Gears)
    - Audits (recomendaciones para mejorar el rendimiento): aquí también se solapa con el Speed Tracer
    - Console (presenta los errores de Javascript y permite ejecutar comandos sobre la página)

    El mejor depurador sigue siendo Firebug para Firefox https://addons.mozilla.org/es-ES/firefox/addon/1843/ aunque en próximas versiones del Speed Tracer aparecerá cierta integración con el servidor lo que permitirá depurar rendimiento desde ambos extremos.

    Suerte con la depuración.

  3. Hola,

    ¿ Cómo pondría un punto de ruptura ?¿ En donde se lo digo ?¿Cómo pregunto o cambio el valor de una variable ?

  4. Menú de Página -> Opciones para desarrolladores -> Herramientas para desarrolladores

    En la pestaña Scripts, aparece un desplegable con los ficheros javascript, selecciona el que te interesa depurar.
    Aparece el listado de código con números a la izquierda, pulsa sobre un número, esto coloca un breakpoint en esa línea.
    A la derecha aparecen los breakpoints y las variables sobre las que estás haciendo seguimiento y un menú superior para avanzar tras el breakpoint
    Recarga la página, cuando se deba ejecutar la línea donde está el breakpoint, el depurador se detendrá.
    Si expandes “Watch Expressions” puedes añadir variables sobre las que quieras ver su valor y una vez listadas pulsar dos veces sobre su valor para modificarlas

  5. Y colocando varios puntos de ruptura ¿ cómo haces para que se ejecute “en silencio”, sin ver las lineas que se van ejecutando hasta el siguiente punto ?

  6. hola!!
    me podiais informar de como guardar cambios en inspeccionar elemento??
    gracias un saludo! espero respuestas muy pronto!

  7. hola muy buen tema lo que quiero saber es como guardar cambios en mi buscador con el inspector de elementos para eliminar publicidad, ya que viendo en el youtube solo se elimina un rato y al cerrar la pagina ahi esta otra vez la publicidad enfadosa que aveces molesta mucho

  8. EN YAHOO ME SALE UNA RAYA AZUL VERTICAL ,CUANDO VOY A MANDARE UN MENSAJE
    COMO SE SOLUCIONA?

  9. tengo mal el correo no lo reciben los que envio


Deja un comentario


Sin trackbacks por el momento.