Información Relacionada Consultoría tecnológica Optimizar la carga de un sitio web

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 [¹]).

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 

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).

Medidas de los elemento 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.

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.

Habiendo 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:

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.

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.

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

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:

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).

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

• 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.

• Fijar el punto de interrupción:

• 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:

• 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.

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.

[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.