Depuradores Guía rapida de uso

Depuradores de Código
para
Internet Explorer
Firefox
&
Chrome

Miguel Ángel López Torralba
2 Daw
Desarrollo de aplicaciones Web, Entorno Cliente
2013-14

Indice
Internet Explorer
puntos de interrupción
controlando la ejecución
inspeccionando variables

1
6
7
8

Firefox: firebug
instalación
como ejecutar firbug
visión general
depurando errores
validación de documentos

10
10
11
11
12
15
16
18

Chrome DevTools
ejecución
depurando errores
validación de documentos

Conclusión
Bibliografía
Códigos de Prueba

19
19
19
23
24
25

26
27
28

Desarrollo Web en entorno Cliente
Manual de uso de depuradores para JavaScript

2013-14

Internet Explorer
Dependiendo
de
su
configuración
Internet
Explorer
puede
tener
desactivada
la
notificación de errores de JavaScript,
para activarla debemos de acceder a:
menú herramientas >> Opciones
pestaña opciones avanzadas y se
activa la opción Mostrar una
notificación sobre cada error de
secuencia de comandos.
Tal y como se muestre en la figura 1.
De este modo, se mostrará un
mensaje de error cada vez que se
produzcan errores de JavaScript en
una página. Además, en la esquina
inferior izquierda se muestra un
pequeño mensaje indicando que la
página tiene errores.

Figura 1

Además pinchando sobre el
botón Mostrar detalles, es posible
acceder a cierta información sobre el
error que se ha producido.
Internet Explorer es el navegador que menos información proporciona
añadiendo que no siempre indica correctamente cual es la posición del error.
Debido al tipo de mensajes, cortos y ambiguos, así como la falta de
precisión sobre el lugar en el que se ha producido realmente el error, hacen que
depurar un script en este navegador sea una tarea muy complicada.
Cuando el trabajo de desarrollo ha finalizado, es interesante saber que el
código es conforme con diversos estándares, tales como los de HTML, CSS y
accesibilidad. Las Herramientas de desarrollo han recopilado estos recursos de
gran utilidad para ayudarle a comprobar el código fuente con respecto a estos
validadores. Basta con elegir el tipo de validación que se desea realizar, o bien
optar por una sesión de varias validaciones.
Internet Explorer nos permite guardar el código HTML modificado como
un documento aparte, pero debemos de decirle bajo que nombre guardarlo, ya
que no modifica las páginas web.
1


2013-14

Como podemos ver en la siguiente figura (figura2), al intentar abrir un
archivo con errores denominado Página modelo

Figura 2

Como podemos ver no has localizado el fallo, colocándolo en la línea
correcta.
Para poder abrir el depurador de errores debemos pulsar F12, o en
Herramientas seleccionar Herramientas de Desarrollo.
Al abrir el depurador nos aparecerá una pantalla como en la siguiente
figura (figura 3)donde se aprecian dos columnas, la de la derecha nos muestra
el código y en la segunda se nos muestran los posibles errores con un enlace
que nos señala la línea donde se encuentra exactamente.
Nota: En la captura ya hemos pinchado en la entrada para que nos marque la
línea.

2


2013-14

Figura 3

Una vez que hemos encontrado y localizado el fallo, podemos corregirlo
en nuestro documento y volver a ejecutarlo, en este caso solo habría que
corregir el ponerle una "e" a: document.write("Colocar el código aquí");

Figura 4
Al ejecutar la prueba 2 (confirm), nos salta directamente el siguiente
mensaje:

Figura 5

Como se puede ver nos marca el error, y como ha saltado el mismo.
También nos define en la derecha donde se encuentra el error y el tipo del
mismo.

3


2013-14

Para solucionar este error debemos de corregirlo en nuestro documento o
bien modificar el código HTML en la propia consola y luego grabarlo pulsando
sobre el icono de salvar como se muestra en la figura 6:

Figura 6

Una vez hecho esto ya podemos recargar nuestra página y esta estará en
funcionamiento como se observa en la figura 7

Figura 7

4


2013-14

En el siguiente ejemplo (Prueba 3: Print) vamos a repetir los pasos anteriores
para afianzar lo explicado hasta el momento:
Al abrir el Script nos saltará un error...

Figura 8

Tras identificar el error tan solo hay que modificarlo en el HTML y
salvarlo, para conseguir que se ejecute el script...

Figura 9

5


2013-14

Para poder analizar variables, hacer puntos de interrupción... se debe de
iniciar el proceso de depuración haciendo click en el botón Iniciar Depuración o
presionando F5, lo cual desencadenará los siguientes eventos:
• El cuadro de depuración requiere que la página se actualice, de modo
que si se acepta, se iniciará la depuración y la página se actualizará, pero
si se cancela no ocurrirá nada de las dos cosas.
• Una vez iniciada la depuración la ventana Herramientas de desarrollo se
desancla.
Para detener la depuración tan solo hay que hace click en el botón
Detener depuración o pulsar SHIFT + F5.

Puntos de Interrupción
Para establecer puntos de interrupción, tanto si el depurador esta
iniciado como si no, hay tres opciones:
• Hacer click en el numero de línea para introducir o quitar un punto de
interrupción
• Hacer click derecho en una línea y elegir Insertar punto de interrupción
• Colocar el cursor en una línea y pulsar F9 para insertar o eliminar el
punto de interrupción.
Una vez que el punto de interrupción está declarado aparece el siguiente
icono en la línea en cuestión:
Un punto de interrupción pausa inmediatamente la ejecución del script antes de
la línea del punto, resaltando la próxima línea que se va ejecutar.
Cualquier error durante la depuración hará que esta se detenga por el error. Se
puede evitar esta interrupcíon desactivando el botón de alternancia Error de Interrupción
o presiendo CTRL+SHIFT+E.
Mientras que el depurador mantiene pausada la ejecución, el explorador no
responde a ninguna intervención del usuario.
Los puntos de interrupción se guardan en una lista en la cual se pueden anular, o
acceder directamente al punto en cuestión con tan solo hacer doble click sobre la
localización en la lista.

Figura 10

6


2013-14

Cuando se establece un punto de interrupción, la ejecución se pausa cada vez que se
encuentra ese punto. Si se desea que la ejecución se pause en el punto de interrupción
únicamente cuando se cumpla determinada condición, debe establecerse una condición
para ese punto de interrupción. Para establecer una condición de punto de interrupción,
deben de seguir los siguientes pasos:
• Se hace click derecho en el punto de interrupción apareciendo un menú
• Se selecciona la opción Condición, apareciendo un cuadro de diálogo
• Se escribe la condición en el cuadro de dialogo y se acepta.

Controlando la ejecución
Los puntos de interrupción son utilizados para pausar la ejecucion y
permitir al desarrollador el examinar el estado del codigo en ese punto. Cuando
se detiene en un punto la ejecucion se puede controlar mediante cualquiera de
los siguientes botones:
• Continuar: Continúa ejecutando el script sin pausarlo, hasta que se
encuentra otro punto de interrupción o un error de script. Método
abreviado de teclado: F5.
• Interrumpir todo: Pausa la ejecución inmediatamente antes de que se
ejecute la siguiente instrucción de script. Haga clic en el botón o presione
CTRL+SHIFT+B para activar este comando; a continuación, realice las
acciones que desea depurar.
• Error de interrupción: Pausa la ejecución en el punto donde se ha
producido el error. Este comando está activo de forma predeterminada.
Si no desea que se pause la ejecución en estos puntos de error, haga click
en este botón para desactivar este comando; sin embargo, en ambos
casos se presentará un mensaje de error en la consola por cada error
encontrado. Método abreviado de teclado para activar o desactivar el
comando alternativamente: CTRL+SHIFT+E.
• Paso a paso por instrucciones: Ejecuta la siguiente línea de script y
pausa, aunque la próxima línea se encuentre dentro de un nuevo
método. Método abreviado de teclado: F11.
• Paso a paso por procedimientos: Continúa hasta la próxima línea de
script del método actual y, a continuación, pausa. Resulta útil para no
pasar por las llamadas a métodos. Método abreviado de teclado: F10.
• Paso a paso para salir Sigue ejecutando el script hasta la próxima línea
del método que ha llamado al método actual. Resulta útil para salir de bucles y
llamadas a métodos. Método abreviado de teclado: SHIFT+F11.

Figura 11

7


2013-14

Inspeccionando Variables
Todas las variables se pueden inspeccionar en el recuadro Variables
locales y en el recuadro Inspección, una vez se ha iniciado depuración con uno
o varios puntos de interrupción a lo largo de ejecución.
Una vez el depurador se detenga en el primer punto de de interrupción
se pueden inspeccionar y editar las variables en los recuadros de variables
locales e inspeccion.
El recuadro Variables locales del depurador muestra el Nombre el Valor
y el Tipo de todas las variables disponibles en el ámbito de ejecución actual. Si
una variable está fuera del ámbito, no está disponible y ni se muestra en el
recuadro Variables locales. Las variables y los objetos que están 'fuera de
ámbito' se pueden examinar en cualquier momento en el recuadro Inspección.

Figura 12
En la figura 12 podemos observar como las variables cuenta e i aun no
han sido definidas, interesándonos por la variable i, vamos a observar como va
cambiando de valor en sus pasos por el bucle for

Figura 13

Al entrar en el bucle podemos ver como las dos variables han sido
inicializadas y al ir pasando repetidamente por él, van a aumentar de valor.

8


2013-14

Figura 14

Al terminar de recorrer el bucle vemos que i ha tomado el valor 6,
rompiendo la condición del for y saliendo a la línea 12, mientras que cuenta se
ha mantenido en el valor 5
El resultado del script sería el siguiente:

Figura 15

9


2013-14

Firefox: FireBug
A pesar de que Firefox ya trae su propio depurador, dispone de una
herramienta mucho más potente y de forma gratuita llamada firebug, aun así si
se quiere trabajar con el depurador nativo se puede abrir pulsando las teclas
CTRL+SHIFT+I, (o en herramientas >> desarrollador web)el cual tiene algunas
características muy interesantes como el poder observar la página en 3D para
observar las capas.
En la figura 16 podemos observar este navegador abierto y mostrando mi
blog (netrunning.blogspot.com) en este formato 3D.

Figura 16

Pero a pesar de esto, Firebug nos ofrece una cantidad mucho mayor de
posibilidades como veremos a lo largo de este manual.

Instalación
Para instalarlo es tan sencillo como hace click sobre la pestaña naranja de
firefox y luego en complementos, tras ello nos saldrá un página como la que la
aparece en la figura 17, donde tenemos que poner en el buscador firebug y
directamente nos aparece, desde ese momento hay que darle a instalar y seguir
las instrucciones hasta que se nos avise de que firefox debe ser reiniciado y ya lo
tenemos instalado.

10


2013-14

Figura 17

Como ejecutar firebug
Hay varias formas de ejecutar firebug:
• F12 : Firebug se ejecuta integrado en la parte inferior de ventana de la
página.
• Control + F12 : Firebug se ejecuta en una ventana nueva
• Desde Herramientas >> Firebug >> Abrir Firebug.
• Clic sobre la imagen del bicho en la barra inferior del navegador.

Visión general de firebug
Podemos encontrar multitud de funciones de depuración en firebug, su
visión principal es:

Figura 18

Donde podemos trabajar cómodamente, además si vamos pasando el
ratón por el código se nos van marcando las zonas a las que se refiere en la
página web.
Desde las pestañas HTML como en CSS se pueden editar los códigos en
caliente aunque no se pueden grabar como si se podía hacer en Internet
Explorer, aunque la facilidad de ver los resultados de los cambios en caliente es
mucho mas fácil e intuitiva en Firebug.

11


2013-14

Depurando errores
Al igual que con Internet Explorer vamos a depurar los errores que
aparecen en los mismos códigos para que se vea como funcionarían ante los
mismos problemas.
Prueba 1: Página modelo
Como podemos ver en la figura 19, firebug no nos salta una ventana,
sino que junto al icono del "bug" nos aparece un numero con los errores
encontrados, y en muchas ocasiones a pesar de los errores se ejecutan páginas
enteras, cosa curiosa que se va descubriendo conforme se va utilizando este
depurador o simplemente se va navegando.
Una vez que demos que el
depurador ha detectado los fallos, tan
solo hay que abrirlo de cualquiera de las
formas
expuestas
arriba,
apareciéndonos
la
interface
del
Figura 19
depurador,
donde
podremos
modificarlo para arreglar los fallos.
Firebug nos muestra los errores de la página desde la pestaña consola en
el apartado errores tal y como puede verse en la figura 20

Figura 20

Marcándonos la línea y copiándola, diciéndonos cual es el error, por
ejemplo (writ is not a function)
De forma análoga a como lo hacía el depurador de Internet Explorer si
clicamos sobre los textos en azul o en verde, nos envía a la línea del script
donde esta el error.
Aunque puede modificarse editando el HTML dentro de su pestaña no
se puede grabar como si hacía IE, por lo que se debe de modificar el código con
un editor, aunque los cambios en el código si se reflejan en tiempo real en la
página tal y como se representa en la figura 21

12


2013-14

Figura 21

Una vez que modificamos el código en nuestro documento y lo
guardamos podemos recargar la página dándonos el resultado final que
queremos.

Figura 22

Como vemos hemos tenido que cambiar también lenguage="javascript"
por type="text/javascript" para que acepte el código.

13


2013-14

Prueba 2: Confirm
Al abrir el código de la prueba dos, vuelve saltarnos el error, que
tenemos que limpiar en nuestro editor y finalmente podemos arreglarlo

Figura 23

Prueba 3: Print
Nos percatamos de que en este caso no nos sale ningun error, por lo que
hay que buscarlo manualmente. Como puede verse en la figura 24, el error de
prin() lo tenemos resaltado nosotros, pero Firebug no se percata de ello:

Figura 24
Por ese motivo nos vemos avocados a buscar este error que SÍ saltaba en
IE, pero que afortunadamente es sencillo de arreglar, dandonos el siguiente
resultado. figura 25

14


2013-14

Figura 25

Puntos de interrupción
Para poner puntos de interrupción, al igual que en IE se puede hacer con
el ratón clicando detrás de la línea, y aparecerá la burbuja roja como aparece en
la figura 26, donde la burbuja de la variable cuenta esta activa y la del bucle for
esta deshabilitada:

Figura 26
Si se quieren poner condiciones a los puntos de interrupción tan solo
hace falta hacer click derecho sobre el punto de interrupción y nos saldrá un
dialogo donde poner la condición, tal y como aparece en la figura 27.

15


2013-14

Figura 27

Inspeccionando variables
Para inspeccionar las variables hay que poner puntos de interrupción
como en las figura 26, pero con los dos puntos activos en ese momento.
Tras esto se ejecuta el código, el cual se puede ir haciendo avanzar con
los siguientes botones (en orden según la figura 28):
• Reejecutar SHIFT+F8
• Continuar F8
• Entrar F11
• Saltar F10
Figura 28
• Salir SHIFT+F11
Cuando la ejecución se detiene en una instruccion aparece una flecha
amarilla para indicar por que punto esta la ejecución del mismo.

Figura 29

En la pastaña observar nos aparecen multitud de expresiones de
seguimiento donde podemos ver el valor de las variables que como podemos
ver en la figura 30, comienzan estando indefinidas:

16


2013-14

Figura 30
Mientras que cuando empieza a ejecutarse van cambiando el valor de las
variables y en la ventana comienza a ejecutarse el código como vemos en la
figura 31, a mitad de ejecución del mismo.

Figura 31

Finalmente obtenemos el valor de las variables al pasar por el bucle
completamente dando como resultado la figura 32, donde cuenta termina
valiendo 5 e i vale 6:

17


2013-14

Figura 32

Validación de documentos
De forma ordinaria Firebug no valida documentos, se le deben de
añadirs complementos para que lo haga.

18


2013-14

Chrome DevTools
Ejecución
Nos encontramos ante las herramientas de desarrollo de Chrome, las
cuales vienen incluida de forma nativa, incluyendo el proyecto Chromium.
Para abrir estas herramientas tan solo es necesario pulsar F12 en la
pestaña donde este la web que queremos depurar. O podemos, dentro de la
página hacer click derecho y escoger "Inspeccionar elemento"

Figura 33

Como podemos observar el depurador que se nos abre es muy similar al
que aparece con los otros navegadores, donde poder analizar y modificar el
código.

Depurando errores
Prueba 1: Página Modelo
En principio chrome
no nos da ningún error, lo
que hace es simplemente
dejar la página en blanco ,
por lo que hay que abrir el
depurador.

Figura 34

19


2013-14

Una vez que abrimos el depurador tenemos que irnos a la consola para
que nos diga donde esta el error y haciendo click en la ubicación nos dirigirá a
la parte del código donde este se encuentra:

Figura 35

Figura 36

De este modo nos aparece la línea donde esta el error marcada con
información adicional sobre el mismo para que resulte más sencilla su
corrección.
Nota: Puede ocurrir que no cargue el código directamente pero si se pulsa F5 aparece de
inmediato con el error marcado.
Una vez que
tenemos localizado el
error
en
nuestro
documento,
tenemos
que modificarlo fuera,
ya que no nos permite
salvar, y una vez que ya
tenemos
el
error
corregido, recargamos
la página.
Figura 37

20


2013-14

Prueba 2: Confirm
De la misma forma vamos a corregir el segundo ejemplo:
Abrimos el archivo, abrimos el depurador y nos aparece el error desde la
consola:

Figura 38
Tras clickar en el enlace del error nos lleva a Sources donde podemos ver
el error y su descripción ubicada en el código despues de pulsarle F5

Figura 39
.
Se modifica el código y tenemos el resultado deseado para nuestro script:

Figura 40

21


2013-14

Prueba 3: Print
Abrimos el archivo, abrimos el depurador y nos aparece el error desde la
consola, cliqueamos sobre el error, y al ir a source pulsamos F5:

Figura 41

Se modifica el código y tenemos el resultado deseado para nuestro script:

Figura 42

22


2013-14

Puntos de Interrupción
Se puede añadir un punto de interrupción desde la pantalla Source, sobre
nuestro archivo, basta con dar click derecho en la línea que queremos poner un
punto en la barra de la izquierda, donde además nos permite la opción de
poner o no, un punto de interrupción normal o condicional.

Figura 43

En este caso los puntos de interrupción no aparecen como una burbuja
roja sino como una marca azul como podemos ver en la figura 44:

Figura 44

Si se desea desactivar un punto de interrupción en el cuadro de la
derecha podemos hacerlo tal y como aparece en la figura 45:

Figura 45

23


2013-14

Inspeccionando Variables
Otra utilidad útil tal y como estamos viendo
en este manual, es la inspección de variables, en
chrome
hay que añadirlas para poder ir
observándolas en el cuadro de la derecha,
pulsando sobre el icono + en la pestaña watch
expressions
Una vez las tenemos añadidas y colocados
nuestros puntos de interrupción, podemos ir
viendo como se va ejecutando nuestro script, tal y
como podemos ver en las figuras 47 (antes de
entrar en el bucle for), 48 (durante la ejecución del
script) y 49 (una vez que ha terminado de ejecutar el bucle)

Figura 47

Figura 48

24


2013-14

Figura 49

Para poder avanzar en la ejecución del script se pueden utilizar los
siguientes elementos:
• Continuar con la ejecución del Script F8
• Saltar sobre la próxima función F10
• Saltar a la próxima función F11
• Salir de la función actual SHIFT + F11
Representadas por los siguientes iconos:

Validación de documentos
Chrome tiene una extensión denominada HTML Validator que sirve para
poder validar los documentos, sin embargo con su configuración por defecto
envía mucho trafico a los servidores de W3C y puede acabar bloqueándose.
Desde Chrome DevTools, se pueden encontrar errores de sintaxis, y
warnings, pero no una función que pueda servir como validación como tal.

25


2013-14

Conclusión
Aunque IE tiene peor fama, tiene algunas cosas en su depurador que son
muy interesantes, como poder guardar el documento siendo más fácil de editar
que en firebug o en Chrome, además reconoce algunos errores que Firebug no,
aunque firebug mantiene algunas aplicaciones como el reconocimiento de
partes de la página en código y viceversa que lo hacen muy potente.
Por su parte Chrome DevTools tiene algunas cosas que no me son del
todo practicas, como por ejemplo tener que ir poniendo manualmente el
nombre de las variables que se quieren observar, aunque es cierto que cuando
el script es muy grande puede resultar interesante, aunque el problema de que
no salte ninguna alarma, ya sea como en IE o en Fierebug no es de mi agrado,
aparte de que el interface es el que mas se separa de los demás.
Tras hacer el trabajo con los tres me quedaría con pasar el depurador de
IE y de Firebug, ya que entre los dos pueden hacer que el desarrollo sea mucho
más facíl.
El problema que le veo a IE es que hay que configurarlo, frente a la
instalación de Firebug, pero este ultimo se puede utilizar junto al nativo de
Firefox, lo cual es otro valor importante, junto a la posibilidad de incrustarle
addons lo cual le hace mucho más potente.
Otro valor de IE frente al resto es la posibilidad de validar documentos
directamente.
En definitiva creo que habría que utilizar al menos dos de los
depuradores de forma más o menos continua, teniendo en cuanta el tipo de
proyecto o el tipo de errores que pueden encontrarse en el proyecto.

26


2013-14

Bibliografía
Introducción a JavaScript (www.librosweb.es)
http://msdn.microsoft.com/es-es/library/dd565625%28v=vs.85%29.aspx
http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=firebugAvanzado
https://developers.google.com/chrome-developer-tools/

27


2013-14

Códigos de Prueba
Código de la prueba 1: (Página Modelo)

Código de la prueba 2: (Confirm)

28


Código de la prueba 3: (Print)

Código de prueba 4: (buclefor)

29

2013-14

Depuradores Guía rapida de uso

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (14)

Destaque

Destaque (8)

Semelhante a Depuradores Guía rapida de uso

Semelhante a Depuradores Guía rapida de uso (20)

Mais de Miguel Angel Lopez Torralba

Mais de Miguel Angel Lopez Torralba (15)

Último

Último (11)

Depuradores Guía rapida de uso