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
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 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.
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.
f.q.value = "new search term"
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
$ 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)
trueAdministrador 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.
julio 21, 2010 - 12:03
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”
julio 21, 2010 - 13:32
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.
julio 22, 2010 - 01:54
Hola,
¿ Cómo pondría un punto de ruptura ?¿ En donde se lo digo ?¿Cómo pregunto o cambio el valor de una variable ?
julio 22, 2010 - 10:34
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
julio 22, 2010 - 12:49
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 ?