firebug. manual de usuario v1.0

FirebugManual de usuario

Fecha: 24/07/2008

Referencia:

EJIE S.A. Mediterrneo, 3 Tel. 945 01 73 00* Fax. 945 01 73 01 01010 Vitoria-Gasteiz Posta-kutxatila / Apartado: 809 01080 Vitoria-Gasteiz www.ejie.es

Este documento es propiedad de EJIE, S.A. y su contenido es confidencial. Este documento no puede ser reproducido, en su totalidad o parcialmente, ni mostrado a otros, ni utilizado para otros propsitos que los que han originado su entrega, sin el previo permiso escrito de EJIE, S.A.. En el caso de ser entregado en virtud de un contrato, su utilizacin estar limitada a lo expresamente autorizado en dicho contrato. EJIE, S.A. no podr ser considerada responsable de eventuales errores u omisiones en la edicin del documento.

Control de documentacinTtulo de documento: Firebug. Manual de Usuario

Histrico de versionesCdigo: Versin: Fecha: 1.0 24/07/2008

Resumen de cambios:

Cambios producidos desde la ltima versinPrimera versin.

Control de difusinResponsable: Ander Martnez Aprobado por: Ander Martnez Firma: Distribucin: Fecha:

Referencias de archivoAutor: Consultora de reas de conocimiento Nombre archivo: Localizacin: Firebug. Manual de instalacin v1.0.doc

Firebug. Manual de usuario

2/36

ContenidoCaptulo/seccin Pgina

1 2 3 3.1 4 4.1

Introduccin Conceptos bsicos Integracin con Firefox Ventana de Firebug Utilidad Prctica Consola

5 5 5 7 8 8 9 10 12 12 16 18 21 22 22 23 23 23 23 26 27 28 29 30 31 33

4.1.1. Monitorizacin de peticiones AJAX 4.1.2. Depuracin Javascript 4.2 HTML

4.2.1. Visualizacin de cdigo HTML 4.2.2. Bsqueda de cdigo HTML 4.2.3. Edicin de cdigo HTML 4.2.4. Modificacin de las dimensiones de la caja de un elemento 4.3 CSS

4.3.1. Modificacin de propiedades de un estilo 4.3.2. Modificacin de estilos 4.3.3. Deshabilitacin de estilos 4.4 Script

4.4.1. Puntos de ruptura 4.4.2. Ejecucin paso a paso 4.4.3. Inspeccin de expresiones 4.4.4. Gestin de scripts 4.5 DOM

4.5.1. Visualizacin de la informacin 4.5.2. Modificacin de propiedades 4.6 NET


3/36

4.6.1. Filtrado por tipo de fichero 4.6.2. Control de las peticiones HTTP

34 34


4/36

1

Introduccin

En este manual se describen los distintos aspectos que debe conocer el usuario sobre el componente para Firefox, Firebug.

2

Conceptos bsicos

Firebug es una extensin (add-on) de Firefox creada y diseada especialmente para desarrolladores y programadores web. Es un paquete de utilidades con el que se puede analizar (revisar velocidad de carga, estructura DOM), editar, monitorizar y depurar el cdigo fuente, CSS, HTML y JavaScript de una pgina web de manera instantnea y en tiempo de visualizacin, sin necesidad de modificar fuentes y recargar de nuevo la pgina. Para obtener informacin adicional sobre el producto se puede acceder a su pgina Web: http://www.getfirebug.com/ En el momento de escribir este manual la ltima versin para Firefox 2 es la 1.0.5, y para Firefox 3, la 1.2 (en estado beta): https://addons.mozilla.org/es-ES/firefox/addons/versions/1843

3

Integracin con FirefoxCuando se aade la extensin Firebug a Firefox, en la barra de estado inferior del navegador aparece, a

la derecha, el smbolo: que indica que Firebug est activo. Mientras Firebug est activo, se ralentiza un poco la carga de la pgina que se consulta, ya que se tiene que analizar el contenido de la pgina. Por ello, Firebug da la opcin de deshabilitarlo o incluso de definir en que sitios web estar activo, si su opcin por defecto es deshabilitado o en que sitios web estar deshabilitado si su opcin por defecto es activo. Cuando Firebug est deshabilitado se muestra con el siguiente icono: . Si se pincha el icono de Firebug con el ratn, la zona de navegacin se hace ms pequea, y en la parte inferior que ocupaba sta, aparece ahora un panel donde interaccionar con la funcionalidad que ofrece la extensin y que se explicar a fondo en este manual.


5/36

Pinchando con el botn derecho del ratn sobre el icono de Firebug que est en la barra inferior de Firefox, aparece el siguiente men contextual:

Las acciones que se pueden realizar son: Deshabilitar Firebug (Disable Firebug): con esta opcin Firebug deja de analizar los contenidos de las pginas visitadas. Deshabilitar Firebug for: con esta opcin Firebug deja de analizar los contenidos del sitio web que se est visitando en ese momento. Configuracin de sitios web (Allowed Sites): con esta opcin se permite configurar para qu sitios web se activar Firebug o para cuales se bloquear su accin, es decir, se deshabilitar; independientemente de la opcin por defecto que est activa.


6/36

Abrir Firebug en una nueva ventana (Open Firebug in New Window): Como se ha explicado anteriormente, Firebug, se despliega ocupando parte de la ventana de navegacin, con est opcin, la zona de navegacin no se modifica y se lanza el panel de Firebug en una ventana a parte.

3.1

Borrar consola (Clear Console): esta opcin elimina el contenido de la consola de Firebug.

Ventana de Firebug

Como se ha comentado anteriormente la ventana de Firebug se despliega en la parte inferior del navegador, reduciendo la zona de navegacin. A continuacin se muestra una figura con los elementos de la ventana de Firebug:


7/36

Pestaas: Cada pestaa atae a una parte de la funcionalidad que ofrece Firebug. Cada una presenta su propia informacin. Men rpido: Cambia para cada pestaa seleccionada, para ampliar las opciones de cada funcionalidad. Ventana auxiliar: Aparece en determinadas funcionalidades para ampliar la informacin que se presenta. Panel de bsquedas: Muy til para buscar palabras en el cdigo de la pgina. Barra de estado: Da informacin de los errores que ocurren en la carga de la pgina.

4

Utilidad Prctica

En este punto se comentar la funcionalidad que ofrece Firebug, dividindola en base a las pestaas que aparecen en la ventana de la extensin. Pestaa Console: Muy til en el desarrollo javascript de la pgina. Permite ejecutar comandos javascript. Adems muestra las peticiones AJAX de una pgina. Pestaa HTML: Permite ver el HTML generado de una pgina web y lo ms interesante: modificarlo y visualizar los cambios sin necesidad de cargar la pgina de nuevo. Adems da facilidades para encontrar el cdigo correspondiente a un elemento de la pgina. Pestaa CSS: Permite la edicin de los estilos de la pgina de una forma sencilla e intuitiva. Los cambios en la pgina se muestran en tiempo real, es decir, inmediatamente despus de ser realizados, sin necesidad de grabar y recargar la pgina. Pestaa Script: Muy til para la depuracin de cdigo javascript, permite ver los scripts de la pgina, adems de poner puntos de ruptura e incluso, puntos de ruptura condicionales. Pestaa DOM: Permite ver la informacin de los objetos DOM cargados por la pgina, adems de su modificacin de forma dinmica. Pestaa NET: Muestra el tiempo de carga de los diferentes elementos de la pgina. Muy til para comprobar las prestaciones de la pgina.

4.1

Consola

La pestaa con la consola, es una de las ms tiles para el desarrollo Javascript y AJAX de una aplicacin web. Las funcionalidades que ofrece la pestaa son, entre otras:


8/36

4.1.1.

Monitorizacin de peticiones AJAX. Depuracin de cdigo Javascript.

Monitorizacin de peticiones AJAX

Cuando cargamos en Firefox con Firebug activado, una pgina que tiene peticiones AJAX, en la pestaa Console, aparecen una lnea con el resumen de cada peticin, indicando el protocolo utilizado: GET, POST o HEAD, la URL llamada, el tiempo de respuesta y el script desde el que se realiza la llamada.

Si se despliega la lnea de la peticin, pinchando en el smbolo + o en la URL de la peticin, aparece informacin detallada de la misma. Params: Los parmetros con los que fue invocada. No aparece informacin si no se han enviado parmetros. Headers: Las cabeceras, tanto de la peticin como de la respuesta. Response: El contenido completo de la respuesta.

Esta informacin es particularmente til cuando se invoca a servicios web que no ha desarrollado uno mismo y de los que no se tiene mucha informacin. Si se pincha en la informacin del script que realiza la peticin AJAX, Firebug presentar en la pestaa Script la lnea del fichero que realiz la invocacin para su depuracin.


9/36

4.1.2.

Depuracin Javascript

Uno de los puntos fuertes de Firebug, es su uso para la depuracin de cdigo Javascript. Podemos dividir la funcionalidad que ofrece la pestaa Console respecto a este punto en: visualizacin de errores Javascript, ejecucin de cdigo fuera de los scripts de la pgina, insercin de trazas en el cdigo de la pgina y medicin de las prestaciones del cdigo ejecutado. Visualizacin de errores Javascript Firebug muestra los errores que ha habido en la carga de una pgina. Cabe resaltar, que muestra los errores de la pgina que se est visitando en cada una de las ventanas del navegador, a diferencia de otros depuradores Javascript, que vuelcan los errores de todas las pginas visitadas, en la misma presentacin. En la barra de estado se muestra el nmero de errores que tiene cada pgina: , y en la zona de la consola se muestra un resumen de los errores. Adems del texto del error, si se despliega la lnea con el error, se presenta el script y el nmero de lnea donde se ha producido:

En la opcin de men Options que aparece a la derecha de la barra de pestaas, se puede indicar que tipo de errores se desea que muestre Firebug:


10/36

Los cambios sern efectivos en la siguiente carga de una pgina. Ejecucin de cdigo Javascript Algunas veces, en el desarrollo de una pgina se desea ejecutar cdigo nicamente por comprobar que se tiene la sintaxis correcta. Firebug, ofrece en la Pestaa Console esta posibilidad. En la parte inferior de la zona de la consola, aparece una lnea precedida de: >>>, en la que se puede escribir cualquier sentencia javascript y es ejecutada inmediatamente en el contexto de la pgina cargada:

Esto es muy til para hacer pruebas, inspeccionar y modificar el contenido de un objeto y lanzar eventos desde la lnea de comandos. Insercin de trazas El punto ms innovador de la funcionalidad de consola, tiene que ver con la variable global console que Firebug aade a todas las pginas cargadas en Firefox, y al API que ofrece dicho objeto. La variable console dispone de varios mtodos para escribir informacin en la Consola de Firebug, que se pueden utilizar en el cdigo para dejar trazas, evitando as el molesto uso de los alert comnmente utilizados


11/36

para ese fin. Una completa informacin sobre el API Console que ofrece Firebug puede encontrarse en: http://getfirebug.com/console.html Medicin de las prestaciones En el men rpido de la pestaa Console, aparece el botn Profile. Su funcionamiento es el siguiente: 1. En el momento que se pulsa el botn se lanza un medidor de tiempos de respuesta de las funciones javascript que se van ejecutando. 2. A continuacin se realizar la accin o acciones que se quiere medir, por ejemplo pasar el ratn por los diferentes elementos de una pgina o cargar una pgina concreta y se volver a pulsar el botn profile. 3. Deber aparecer en la consola la informacin de rendimiento de las funciones ejecutadas, ver imagen:

4.2

HTML

A travs de esta pestaa, Firebug nos permite ver el cdigo HTML generado y editarlo, visualizando los cambios inmediatamente, adems mediante el inspector de HTML facilita mucho la tarea de encontrar el cdigo relativo a un elemento de la pgina. 4.2.1. Visualizacin de cdigo HTML

En la pestaa HTML, se muestra el cdigo HTML generado para la pgina dividido jerrquicamente. Inicialmente aparecen desplegados nicamente los elementos principales de toda pgina HTML: y . A partir de ellos se puede ir desplegando el cdigo de la pgina para encontrar cualquier elemento integrado en ella. En el ejemplo con el que vamos a describir la funcionalidad hemos seleccionado un elemento imagen: .


12/36

Cuando mantenemos el ratn encima del cdigo de un elemento de la pgina, se sombrea dicho elemento para ayudarnos a identificarlo.

Por otro lado, seleccionando el elemento en el cdigo, en el men rpido se muestra la estructura jerrquica de los elementos que contienen al seleccionado, pudiendo seleccionar cualquiera de ellos, subiendo as en la jerarqua hasta el elemento inicial .


13/36

En el panel auxiliar, se muestra informacin ms detallada del elemento seleccionado: estilos aplicados, colocacin en la composicin de la pgina y objetos DOM que le afectan. A continuacin se muestra una breve explicacin de las pestaas que aparecen en el panel auxiliar. Si mantenemos el ratn sobre el elemento seleccionado, en funcin del tipo de elemento que es, aparece una informacin contextual. Por ejemplo, para un elemento aparece la imagen a la que hace referencia:

Estilos En la pestaa estilos (style), se muestra informacin de los estilos aplicados al elemento seleccionado.

La informacin se muestra en orden de relevancia, es decir, apareciendo primero el estilo heredado del elemento ms cercano jerrquicamente al seleccionado. En el ejemplo puede verse el estilo del borde que se aplica al elemento seleccionado. Se puede ver tambin como la definicin del estilo de borde que se da a los elementos dentro de un elemento , no se tiene en cuenta, ya que dicha definicin queda sobrescrita por la que figura unas lneas ms abajo en la hoja de estilos (css) de la clase boton2. Se van mostrando todos los estilos aplicados, indicando la hoja de estilos en la que se definen e incluso el nmero de lnea. Si se pincha en la css que define un estilo, Firebug presentar en la pestaa CSS la lnea donde se define el estilo. Se muestran tachados los estilos que a pesar de ser aplicables al elemento seleccionado, son sobrescritos por estar definidos tambin en un elemento de relevancia mayor.


14/36

Ubicacin en la composicin de la pgina En el panel auxiliar de la pestaa HTML se muestra tambin informacin relativa a la ubicacin dentro del diseo de la pgina del elemento seleccionado. Esta informacin se presenta en la pestaa Layout. En la siguiente figura se detalla el tipo de informacin que se puede obtener para un elemento.

Adems, pasando con el ratn por encima de las diferentes cajas que conforman la ubicacin y tamao del elemento en el contexto de la pgina HTML, aparecen unas guas y una regla (en pixels) sobre la visualizacin de la pgina, muy tiles para la tarea de alinear elementos de una misma pgina.


15/36

Informacin del objeto DOM En la pestaa DOM, se muestra toda la informacin de forma jerarquizada, del objeto DOM creado por el navegador para el elemento seleccionado.

4.2.2.

Bsqueda de cdigo HTML Otra de las tareas que facilita Firebug es la de encontrar cdigo HTML.

Es conocido que cada vez el cdigo HTML de una pgina es ms complejo. Firebug ofrece dos formas muy sencillas de encontrar el cdigo asociado a un elemento, bien de forma visual (Inspector), bien conociendo el nombre del elemento (panel de bsquedas). Inspector HTML Una de las funcionalidades ms innovadoras de la pestaa HTML es la posibilidad de encontrar el cdigo de un elemento pasando el ratn sobre dicho elemento. Para ello: 1. Pulsar el botn Inspect que se encuentra en el men rpido de Firebug. 2. Pasar el ratn sobre los distintos elementos de la pgina, se podr ver como aparecen enmarcados los distintos elementos y como en la zona de edicin del HTML aparece el cdigo del elemento enmarcado. 3. Pinchar finalmente sobre un elemento enmarcado si se desea pasar a la edicin del cdigo de dicho elemento.


16/36

Otra forma todava ms rpida si cabe es pinchar con el botn derecho del ratn sobre un elemento del que se desea buscar el cdigo. En el men contextual que aparecer, ir a la opcin Inspect Element.


17/36

Se desplegar la ventana de Firebug, si todava no lo estaba, y en la pestaa HTML aparecer el texto del elemento seleccionado.

Bsqueda rpida HTML Otra de las opciones que ofrece Firebug es la de buscar un elemento si se conoce su nombre: id, class, tipo de elemento, etc. Para ello, en el panel de bsquedas introducir el texto que se desea buscar y pulsar Enter sucesivamente hasta encontrar el elemento buscado. 4.2.3. Edicin de cdigo HTML

Como se ir viendo a lo largo del presente manual, Firebug facilita mucho el desarrollo de pginas web mediante el mtodo de prueba y error. Es decir, permite modificar el cdigo de una pgina para ver como quedara, sin necesidad de cambiar los ficheros fuente y recargar la pgina de nuevo. Por supuesto, una de las cosas que permite modificar es el cdigo HTML. A continuacin para explicar esta funcionalidad, se mostrarn dos formas de cambiar el ttulo del enlace que contiene la imagen del ejemplo, es decir, la propiedad title del elemento .


18/36

Eso hace que al pasar con el ratn sobre la imagen aparezca un texto de ayuda que dice Iniciar compra, ver imagen:

Modificacin desde ventana de cdigo El primer modo y quiz el ms sencillo para los desarrolladores acostumbrados a editar HTML desde un editor de textos normal, es el de realizar la modificacin desde la ventana de cdigo de la pestaa HTML. 1. Hacer un slo clic sobre el texto que se quiere editar. Firebug presentar el texto resaltado.

2. Editar el texto.

3. El cambio en la pgina HTML deber haberse realizado automticamente, sin necesidad de recargar la pgina.

Tambin es posible realizar el mismo cambio pulsando el botn Edit del men rpido de la pestaa HTML. 1. Seleccionar el elemento que se desea editar:

2. Pulsar el botn Edit del men rpido:

. Firebug presentar en la ventana de edicin el texto


19/36

para editar, como si fuera un editor de textos normal.

3. Al modificar el texto, Firebug presentar los cambios inmediatamante sin necesidad de guardar ningn cambio ni de recargar la pgina.

4. Para volver al modo normal pulsar de nuevo el botn Edit. Se ver como los cambios tambin se mantienen en este modo.

Modificacin desde pestaa DOM Otra forma de modificar las propiedades de los elementos de una pgina HTML, es ir al objeto DOM que define el elemento. Para ello: 1. Seleccionar el elemento que se desea editar sobre la ventana de cdigo HTML.

2. Ir a la pestaa DOM del panel auxiliar (no confundir con la pestaa DOM de la barra de pestaas) donde aparecern las propiedades del elemento seleccionado.


20/36

3. Buscar la propiedad que se desea cambiar, en este caso: title, y modificarla.

4. Los cambios se vern reflejados automticamente, sin necesidad de recargar la pgina.

4.2.4.

Modificacin de las dimensiones de la caja de un elemento

Como se ha visto antes, en la pestaa Layout del panel auxiliar, aparecen las dimensiones que se tienen en cuenta para la ubicacin de un elemento en una pgina HTML. Es posible editar dichas dimensiones, nicamente haciendo clic sobre el dato que se desea alterar.


21/36

4.3

CSS

En la pestaa CSS se puede acceder fcilmente a la edicin de estilos de la pgina, es muy intuitivo y tremendamente til ya que todos los cambios se visualizan en tiempo real. En el men rpido aparece un botn desplegable con las diferentes hojas de estilos cargadas por la pgina.

Seleccionar el fichero del que se quieren ver los estilos. Para ver los estilos aplicados a un elemento en cuestin, ir a la pestaa HTML y actuar como se ha explicado en el punto 4.2.1. 4.3.1. Modificacin de propiedades de un estilo

La modificacin de los estilos de un elemento, es tan fcil como la modificacin de una propiedad HTML. Vamos a ver un ejemplo con la alineacin de uno de los textos de la pgina ejemplo. 1. Hacer un slo clic sobre el estilo que se quiere editar. Firebug presentar el texto resaltado. En este caso es la propiedad text-align.

2. Modificar la propiedad. Firebug ofrece la posibilidad de utilizar las flechas de arriba y abajo para recorrer en orden alfabtico todos los valores posibles que tiene la propiedad. Firebug dispone de un completo diccionario de palabras claves del estndar CSS, adems de algunas propietarias de Mozilla. La opcin de recorrer las opciones posibles, se da tanto para los valores de una propiedad, como para el nombre clave de la propiedad. Para eliminar una propiedad, simplemente modificarla dejndola en blanco. Firebug, la eliminar del estilo.


22/36

4.3.2.

Modificacin de estilos Es posible tambin aadir propiedades a un estilo. Puede hacerse de dos formas: Haciendo doble clic sobre el estilo al que se quiere aadir la propiedad. Se resaltar el hueco donde incluir la propiedad. Escribir en ese hueco la nueva propiedad.

Pinchando con el botn derecho del ratn y sobre el men contextual que aparece seleccionar: New Property.

4.3.3.

Deshabilitacin de estilos

Cuando se pasa con el ratn por encima de la propiedad de un estilo, aparece el smbolo: , pinchando sobre l, se deshabilita la propiedad indicada, provocando los oportunos cambios en la visualizacin del HTML.

4.4

Script

Como se ha comentado anteriormente en este manual, Firebug ofrece un gran nmero de funciones para ayudar a la depuracin de cdigo Javascript. Muchas de esas funciones se llevan a cabo en la pestaa Console y ya han sido comentadas, pero otras se realizan en la pestaa Script y se detallarn en este punto. En la pestaa Script se ofrece la posibilidad de poner puntos de ruptura (breakpoints), ver el valor de las variables en tiempo de ejecucin, ejecutar paso a paso un conjunto de sentencias, etc. As se consigue controlar la ejecucin del cdigo Javascript de una pgina. 4.4.1. Puntos de ruptura

Firebug da la posibilidad de poner puntos de ruptura, lo que permite al depurador parar en una lnea especfica. Cuando esto ocurre, pueden verse los valores de las variables, inspeccionar objetos, continuar la


23/36

ejecucin paso a paso, etc. Puntos de ruptura en una lnea especfica Para poner puntos de ruptura en un lnea especfica, nicamente pinchar con el ratn en la parte izquierda de la zona de cdigo, donde aparece la numeracin de la lnea. Firebug indicar el punto de ruptura con un crculo.

Puntos de ruptura condicionales En ocasiones, al desarrollador no le interesa que se pare la ejecucin siempre, sino nicamente cuando se cumplen unas determinadas condiciones. Firebug permite poner puntos de ruptura condicionales, de tal forma que slo parar la ejecucin si al evaluar una condicin especificada previamente el resultado es verdadero. Para poner un punto de ruptura condicional, realizar la misma accin que en el punto anterior, pero pinchando en la lnea de cdigo con el botn derecho del ratn. Aparecer un cuadro de dilogo en el que introducir la condicin.

Parar ejecucin si existe error Firebug tambin da la posibilidad de parar automticamente en caso de error, para realizar la depuracin del cdigo que ha dado el problema. Para activar esta opcin, a la derecha de la barra de pestaas est el botn Options. Pulsando en l aparece un men contextual con la opcin Break on All Errors (parar en los errores). Se mostrar un tic a la izquierda de la opcin si est activada, si no lo est, pinchar en la opcin Break on All Errors para activar.

Si durante la navegacin existe un error, Firebug desplegar su ventana de ejecucin (si no estuviera desplegada) y mostrar la lnea en la que ocurri el error.


24/36

Gestin de puntos de ruptura Como la mayora de los depuradores grficos, Firebug ofrece la posibilidad de visualizar todos los puntos de ruptura que hay definidos para una pgina web. En este caso, Firebug los muestra en el panel auxiliar, en la pestaa Breakpoints.

Las acciones que se pueden realizar con cada punto de ruptura definido son: Deshabilitarlo. De esta forma, sigue definido, pero la ejecucin no se parar en ese punto. Para ello desmarcar el cuadro de comprobacin (checkbox) que aparece a la izquierda de la definicin (1). Ir a la lnea de cdigo en el que est definido. Para ello pinchar en el enlace en el que indica la lnea (2). Eliminar el punto de ruptura. Para ello pinchar en el smbolo con la cruz que aparece a la derecha de la lnea de la definicin (3).

Pila de llamadas Cuando se detiene la ejecucin de un script, Firebug muestra la pila de llamadas hasta llegar a ese punto. Tal como muestra la figura, en la barra de men rpido aparecen las funciones que se han llamado hasta llegar al punto en el que se ha parado la ejecucin. Pinchando en cualquiera de ellas, lleva al punto (de la funcin seleccionada) en el que se origin la llamada.


25/36

4.4.2.

Ejecucin paso a paso

Como cualquier depurador, Firebug ofrece la posibilidad de ejecutar paso a paso el cdigo. Para ello pueden elegirse tres mtodos. Utilizando los botones para tal fin dispuestos en el men rpido.

Utilizando el men contextual que aparece al pinchar con el ratn sobre la zona de cdigo.

Utilizando las teclas de funcin (F8, F10 y F11).

Y como cualquier depurador ofrece las siguientes posibilidades: Ejecutar hasta la siguiente lnea: ( , Step Over y F10). , Step Into y F11). y Step Out. No tiene tecla funcin)

Ejecutar hasta la primera lnea de la funcin llamada: ( Ejecutar hasta la siguiente lnea de la funcin llamante: ( Continuar ( , Continue y F8)

Ejecutar hasta una lnea dada. Para ello posicionarse en la lnea deseada, abrir el men contextual pinchando con el botn derecho del ratn y acceder a la opcin Run on This Line.


26/36

4.4.3.

Inspeccin de expresiones

Como cualquier depurador, Firebug ofrece la posibilidad de ver los valores de las variables en tiempo de ejecucin. Tambin ofrece varias formas de hacer esto. Si la variable u objeto a inspeccionar est cerca (y en una lnea anterior) del punto en el que est detenida la ejecucin, simplemente con pasar con el ratn por encima de dicha variable, Firebug mostrar una etiqueta de ayuda (tooltip) con el valor de la variable. Ver imagen:

En la pestaa Watch del panel auxiliar, aparece un cuadro de texto que pone New watch expression....

Al pinchar encima con el ratn se pondr en modo edicin. Escribir la variable o propiedad del objeto que se desee estudiar.

Firebug mostrar la expresin y su valor. A la derecha de la lnea con la expresin aparecer el smbolo: . Pinchando en l se elimina la expresin de la lista.

Por ltimo, se puede observar una variable, tambin buscndola en la lista de objetos que aparece en la pestaa Watch. Por ejemplo, para buscar: ajaxObjects.requestFile, se despliega el objeto ajaxObjects y se busca entre sus propiedades que aparecen ordenadas alfabticamente (con las maysculas primero).


27/36

4.4.4.

Gestin de scripts

En la zona de cdigo de la pestaa Script, aparece el cdigo de un determinado script cargado por el sitio web que se est visitando. En el men rpido, Firebug muestra un desplegable con todos los scripts cargados por la pgina, incluso da la posibilidad de ver el cdigo Javascript que se encuentra directamente en la pgina HTML, el definido entre los tags , pudiendo tambin en este caso, poner puntos de ruptura en dichas lneas de cdigo.

Bsqueda de cdigo en un script Con el panel de bsquedas puede buscarse cualquier texto en el script seleccionado. No busca en todos los scripts, sino nicamente en el seleccionado.


28/36

La bsqueda la realiza del mismo modo que lo hace Firefox, inmediatamente despus de cada pulsacin de tecla. Para bsquedas sucesivas, pulsar Enter cuando el foco est en el panel de bsquedas. Ir a un lnea especfica de un script Para ir a una determinada lnea de un script, estando seleccionado dicho script, en el panel de bsquedas, escribir: #n de lnea. Por ejemplo, para ir a la lnea 106 se escribir #106.

Firebug, adems de ir a la lnea, la resaltar temporalmente para facilitar su localizacin. 4.5 DOM

Firebug tambin ofrece la posibilidad de visualizar de una forma ordenada y de modificar al vuelo los objetos DOM creados por el navegador al cargar una pgina web. Los objetos DOM (Document Object Model) son la interfaz que crea un navegador para que a travs de scripts se permita el acceso a ellos y a sus propiedades, tanto de visualizacin como de modificacin en alguna de ellas. En la pestaa DOM se muestran todos los objetos creados a partir del objeto window (que es el padre de todos ellos).


29/36

Existen objetos DOM estndar, como: window, document, etc. y objetos definidos por el desarrollador de la pgina web. Firebug, muestra en negrita y en primer orden en la lista los definidos por el desarrollador y sin negrita los objetos estndar. Adems distingue por colores entre objetos y propiedades (en negro), funciones (en verde) y constantes (en negro y maysculas). Adems ofrece la posibilidad de mostrar o esconder los objetos en base a su origen, seleccionndolos del desplegable que aparece al pinchar en el men Options que aparece a la derecha de la barra de pestaas.

4.5.1.

Visualizacin de la informacin

Existen muchas clases diferentes de objetos (Array, Texto, Fecha, Tipo Document, numricos, etc.). Firebug intenta en la lnea en la que visualiza el objeto mostrar la mayor informacin posible para cada uno de esos tipos, ya que no es lo mismo mostrar el valor de una variable de tipo texto que el valor de todos los elementos de un array.


30/36

Adems, inicialmente Firebug muestra todos los objetos DOM derivados del objeto raz window en la zona de edicin de la pestaa DOM, pero es posible que toda la zona la ocupe la informacin de un nico objeto y sus propiedades, para ello, simplemente pinchar con el ratn en la columna de la derecha en la fila correspondiente al objeto. Firebug, utilizar toda la zona de edicin para mostrar la informacin del objeto. Ver en la imagen el ejemplo al pinchar sobre: window.document.location.

Adems al ir accediendo a diferentes objetos, Firebug mostrar toda la jerarqua de objetos hasta llegar al seleccionado, pudiendo pinchar en cualquiera de ellos para cambiar de nuevo la vista de la zona de edicin.

4.5.2.

Modificacin de propiedades

Adems de visualizar el valor de todos los objetos y sus propiedades, Firebug permite tambin editarlos y mostrar los cambios al vuelo. Por ejemplo, para modificar el ttulo de una pgina habr que editar la propiedad: window.document.title. Para ello: 1. Desplegar el objeto document y buscar la propiedad title.


31/36

2. Hacer doble clic sobre la columna izquierda de la fila en la que est definida la propiedad o pinchar con el botn derecho del ratn sobre la fila y en el men contextual que aparece, seleccionar Edit Property.

3. Editar la propiedad y pulsar Enter. Firebug mostrar los cambios inmediatamente.


32/36

Al recargar la pgina de nuevo, Firebug restablecer los cambios, volviendo a los valores originales. Escritura automtica de objetos y propiedades La caja de texto de edicin de propiedades en Firebug viene a ser una pequea lnea de comandos javascript, por tanto, pueden utilizarse sentencias javascript para modificar el valor de una determinada propiedad de un objeto DOM. Cualquier cosa que se escriba en la caja de edicin, se evaluar en el contexto actual y su resultado se le asignar a la propiedad que se est editando. Firebug ofrece una funcionalidad muy til para encontrar una propiedad o un objeto si por ejemplo no se recuerda exactamente su nombre pero s por que letra empieza. Permite recorrer las propiedades de un objeto utilizando el tabulador. Puede verse un ejemplo actualizando el ttulo de una pgina con la URL de la misma. Para seguir el ejemplo, hacer: 1. Escribir: document.loc. 2. Pulsar el tabulador hasta que se complete a: document.location 3. Aadir un punto: . 4. Pulsar el tabulador hasta que se complete a document.location.href Esta facilidad es tremendamente til para buscar nombres de variables o funciones en el complejo entramado de una pgina web. 4.6 NET

Por ltimo, la pestaa NET ofrece una vista del tiempo de carga de los diferentes elementos de una pgina web: cdigo de la pgina, scripts, imgenes, hojas de estilo, ficheros XML.

Cada fichero se muestra en una lnea en la zona de visualizacin, indicando cuando comenz a descargarse, en relacin al resto de ficheros de la pgina y cuanto tiempo tard.


33/36

Esta visin, muestra como los ficheros nunca se descargan en paralelo, sino uno detrs de otro. Esto puede ayudar al desarrollador a definir el orden de descarga, para que el usuario no tenga que esperar demasiado para visualizar la primera parte de la pgina. 4.6.1. Filtrado por tipo de fichero

Firebug ofrece la posibilidad de filtrar por tipo de fichero. Algunas veces, al desarrollador slo le interesa conocer las prestaciones de las imgenes o de los ficheros javascript, en ese caso con los botones que aparecen en el men rpido, se puede seleccionar de qu tipo de ficheros queremos ver la informacin.

4.6.2.

Control de las peticiones HTTP

Las cabeceras de las peticiones HTTP ofrecen informacin muy til, como: el tipo mime del fichero descargado, el tipo del servidor web, las directrices para las cachs con respecto a dicho fichero, etc. Firebug, simplemente pinchando con el ratn sobre el fichero en la pestaa Net, muestra las cabeceras tanto de la peticin como de la respuesta, as como los datos de la respuesta.

Esa misma informacin poda conseguirse para las peticiones AJAX desde la pestaa Console, pero en esta pestaa puede conseguirse para cualquier tipo de fichero descargado desde un servidor web, incluso las peticiones AJAX.


34/36

Comprobacin de la carga desde la cach No todas las peticiones HTTP son iguales, unas veces, la peticin no llega a lanzarse a la red, sino que la respuesta la da la cach del navegador. Firebug, muestra en un gris ms claro las peticiones a las cuales ha respondido la cach del navegador.


35/36

firebug. manual de usuario v1.0

Documents