Firebug

Curso AJAX Y DOM 2007 Marcos A. San Martín Calera

Septiembre 2007

1

EXTENSIONES ÚTILES (3H) EXTENSIONES ÚTILES (3H)......................................................................................... 1 WEBDEVELOPER.......................................................................................................... 2

Qué es ..................................................................................................................... 2 Cómo instalarlo........................................................................................................ 2 Su uso ..................................................................................................................... 3

FIREBUG...................................................................................................................... 11 ¿Qué es? .................................................................................................................. 11 ¿Cómo instalarlo? ..................................................................................................... 11 Su uso....................................................................................................................... 11 Inspeccionar y editar HTML ...................................................................................... 12 Para escribir y ejecutar comandos............................................................................ 15 Inspeccionar y editar CSS......................................................................................... 16 Inspeccionar y editar JavaScript ............................................................................... 16

Me paro ante un error............................................................................................ 18 Vigilar las expresiones........................................................................................... 19 Variable tooltip....................................................................................................... 19 Perfil de la ejecución de JavaScript....................................................................... 20 Tala en función de las llamadas ............................................................................ 20 Ir a una línea directamente.................................................................................... 20

Exploración DOM...................................................................................................... 20 NET: Monitorizando la red ........................................................................................ 21

Caché o no en caché............................................................................................. 22 Examinar las cabeceras HTTP ................................................................................. 22

XMLHttpRequest vigilancia ................................................................................... 22 EJERCICIOS: ............................................................................................................... 23

1.- Sobre CSS. ...................................................................................................... 23 2.- Sobre JavaScript y DOM.................................................................................. 23

ENLACES RELACIONADOS. ...................................................................................... 24


Septiembre 2007

2

WEBDEVELOPER Qué es Web Developer Toolbar es un plugin de Firefox que nos añade una barra de utilidades para habilitar, desabilitar, editar, etc. los CSS, JavaScript, formularios, etc. que contenga la página que estamos visualizando.

Cómo instalarlo Podemos buscarlo en la página oficial de plugins de Firefox (https://addons.mozilla.org/en-US/firefox/addon/60?id=60) o mejor aún en la oficial del plugin: http://chrispederick.com/work/web-developer/

Elegimos “Other languages” y vamos a otra página muy parecida.


Septiembre 2007

3

Su uso 1 En Desactivar podremos desactivar JavaScript, Java, popup blocker, etc.

Ejemplo: En la página de ejemplo http://127.0.0.1/tema1/ejercicios/servervar.html podemos eliminar el color rojo del enlace “Desactivando colores”.


Septiembre 2007

4

Podemos desactivar el javascript y comprobar como ya no da más la bienvenida. Podemos desactivar los referrers. Al pinchar sobre aquí se abrirá una ventana de ASP que nos informa que desconoce desde donde venimos. NOTA: La situación en que dejemos estos valores serán los que perduren en la navegación, por lo que conviene desactivarlos una vez probados. Otra opción es opciones >> reestrablecer página”. 2 En Cookies podremos deshabilitar, visualizar, eliminar o modificar los valores de las cookies.

Ejemplo: En la página de ejemplo http://127.0.0.1/tema1/ejercicios/servervar.html podemos jugar con las cookies. En concreto vamos a ver información de las cookies. Vemos que hay 2. Podemos jugar con ellas editandolas y cambiando la información que contienen. 3 En CSS podremos deshabilitar las hojas de estilos, visualizar las correspondientes a otros tipos de medios (impresora, handheld, etc.), visualizar y editar las hojas de estilo, etc.

Ejemplo: Podemos intentar destripar cómo se ha hecho está página http://127.0.0.1/tema1/ejercicios/urgencia.html.


Septiembre 2007

5

Si desactivamos el CSS no veremos nada pues la página está hecha integramente en CSS. Si usamos el modelo de borde de caja y hacemos clic en una posición de la tira podremos ver el CSS de ese punto formateado. Pero no nos deja experimentar cambiando los parámetros. Podemos editar el código CSS y cambiar los parámetros. Por ejemplo podemos cambiar la primera línea por #streak {width:485px; height:170px; background:url(streaky.gif); margin:3em auto;}

4 En Formularios podremos ver información detallada de los formularios de la página, habilitar campos o visualizar passwords, cambiar el método de envío, hacer editables campos readonly, etc.

Ejemplo: Tenemos una página web (http://127.0.0.1/tema1/ejercicios/ajax.html) que consta de un formulario de asignación de test a grupos. En el momento que damos a “Enviar consulta” se haría una grabación haciendo una llamada Ajax a un ASP en la base de datos. Podemos jugar a ver los detalles del formulario. Observamos como los que están con un estilo de visibility none no aparecen. OJO: Podemos modificar los valores de los campos ocultos. Podemos probar que hace rellenar los campos del formulario. Podemos borrar los botones radio, escribir en campos y eliminar la restricción de caracteres.


Septiembre 2007

6

5 Imágenes.

Ejemplo: ¿Qué ocurre cuando desactivamos las imágenes de http://127.0.0.1/tema1/ejercicios/urgencia.html? ¿Y si vemos las imágenes a tamaño completo? Podemos observar que como esta imagen está en un CSS apenas nos ofrece información. Probemos con http://cv1.cpd.ua.es/album/segunda.asp?menu=162 a encontrar imágenes perdidas, ver las propiedades “Alt” y resaltar aquellas imágenes que nos las tiene la propiedad “Alt”. 6 Información. De aquí destacamos la opción de “Mostar la información de los elementos”. Detacamos también la opción que permite ver el código JavaScript, pero no modificarlo. Veremos como modificarlo con la barra de Firebug.


Septiembre 2007

7

7 Varios. A destacar las líneas guía y mostrar reglas. Son dos opciones fundamentales para diseño CSS. Cuando seleccionamos mostrar reglas pincha y arrastra y aparece una rejilla. Tambien podemos modificar el html y guardar el resultado. Ejemplo: Medición de movimiento en http://127.0.0.1/tema1/ejercicios/css.html. Traducir con esta herramienta la frase central.


Septiembre 2007

8

8 Resaltar (outline). Sirve para encontrar las cosas del código.

Por ejemplo en http://127.0.0.1/tema1/ejercicios/css.html# podemos encontrar los “div”, los “tables”, etc. 9 Tamaño. Para ver cómo quedan nuestros diseños en distintas resoluciones de pantalla.


Septiembre 2007

9

Ejemplo: ¿Cómo queda http://127.0.0.1/tema1/ejercicios/css.html# con una resolución de pantalla menor? 10 Herramientas. Con ellas podemos validar el CSS, el HTML, links, etc. Podemos configurarlo desde “Editar Herramientas”.

Ejemplo: Podemos pasarle los distintos validadores a: http://www.ua.es/personal/marcos.sanmartin/ajax/tema1/css.html incluyendo el de “Speed Report”. Puedes probar con validar archivo local HMTL para probar un html de tu PC que no cuelga de un servidor: vemos como http://127.0.0.1/tema1/ejercicios/css.html es “tentatively valid HTML 4.01 Transitional”


Septiembre 2007

10

11 Código fuente. Desde Opciones >> Ver código fuente podemos marcar “Ver código fuente en una pestaña nueva”. De esta manera cuando pulsemos control + mayus + U habrá una diferencia con el Control + U de Mozilla. Podemos ver el código generado para ver las alteraciones que se hacen desde JavaScript en el DOM.

Con control + May + U podemos ver http://127.0.0.1/tema1/ejercicios/ajax.html que el código que vemos es el original, aunque no es el realmente mostrado. En cocreto hay 10 checkbox y solo vemos 5. Pero podemos ver el código generado desde “Ver código generado” y observamos como algunos inputs tienen la propiedad CSS de “display” a “none”.


Septiembre 2007

11

12 Opciones. Opciones persistentes para que las opciones que hemos marcado permanezcan en la navegación. O podemos usar restablecer página para hacer desaparecer todas nuestras selecciones.

FIREBUG

¿Qué es? Firebug es una extensión de Firefox que nos brinda un paquete de utilidades para el desarrollo de páginas y aplicaciones Web. Nos permite debugear, monitorizar y modificar el CSS, HTML y JavaScript “en caliente”, es decir, a medida que lo visualizamos. Como ejemplo casi siempre vamos a usar un fichero llamado ajax.html

¿Cómo instalarlo? Podemos buscarlo en la página oficial de plugins de Firefox (https://addons.mozilla.org/en-US/firefox/browse/type:1) o mejor aún en la oficial del plugin: http://www.getfirebug.com/

Su uso Activamos el plugin presionando F12 o el icono nuevo que aparece en la barra de estado.


Septiembre 2007

12

Inspeccionar y editar HTML Muestra el HTML en forma jerárquica (no como viene formateado en el HTML original). A medida que abrimos el árbol podemos ver todos los elementos. Es el HTML transformado por DOM

Si nos posicionamos sobre ellos, se indicará con un gris sobre la página web el elemento que corresponde y veremos sus atributos.

Además podremos editar los atributos.


Septiembre 2007

13

Y podemos hacer el camino inverso: seleccionar un elemento de la página y con el botón derecho seleccionar “InspectElement” para ver el código fuente correspondiente.

Para conseguir el mismo efecto también podemos usar la barra de herramientas superior:

Con Inspect:

Si seleccionamos en la página web veremos resaltado el código HTML correspondiente.

Con Edit: Editamos el código HTML que tenemos seleccionado.

Con etiqueta: Seleccionamos lo que incluye la etiqueta, cuanto más a la derecha más código engloba.

En la parte derecha podemos cambiar los valores de CSS.


Septiembre 2007

14

Si seleccionamos un elemento (por ejemplo una capa) y seleccionamos la pestaña Layout (bajo la lupa) podremos ver, además de las reglas:

a medida que nos desplazamos por las cajas concéntricas podemos ver los valores de padding, border, margin, etc. junto a reglas que nos ayudan a visualizarlo en la página y la posibilidad de cambiar los valores. Con la pestaña DOM podremos recorrer el Document Object Model de la página y visualizar sus valores. Si queremos cambiarlos deberemos recurrir al botón derecho del ratón.


Septiembre 2007

15

Para escribir y ejecutar comandos Si seleccionamos Console podremos ver los errores y warnings de javascript según tengamos configurado desde “Options”

Haciendo click sobre un error el programa nos lleva a la opción de Script y señala la línea causante del error. A la derecha nos permite escribir y ejecutar comandos:

En caso de usar AJAX, en este apartado veremos lo que carga (en AJAX.HTML al dar a guardar):

Pero tendremos que comprobar que Options tiene seleccionado “Show XMLHttpRequest”:


Septiembre 2007

16

Inspeccionar y editar CSS Con la pestaña CSS visualizamos y editamos CSS.

Podemos desde cambiar los parámetros desde esta opción, hasta desactivar ( ) pasando por añadir nuevas propiedades usando el botón derecho del ratón.

También podemos editar el CSS de una forma más cómoda usando el botón de arriba “Edit”.

Inspeccionar y editar JavaScript Con la pestaña Script podemos visualizar los JS, ponerle breakpoints y ver las variables:


Septiembre 2007

17

Primero podremos elegir el js que queremos analizar:

En este caso hemos seleccionado el js embebido en la página html. Podemos elegir una línea donde interrumpir el código haciendo click sobre la misma:

Podemos ver en los breakpoints una relación de los puntos que hemos puesto.

Si quitamos la marca del checkbox “dormimos” el breakpoint:

Podemos crear un breakpoint condicional usando el botón derecho del ratón sobre el número de interrupción:


Septiembre 2007

18

Una vez que se ha parado podemos ejecutar el código una línea por vez, moviendo el

triangulo con :

El primero continua la ejecución. El segundo avanza línea a línea. El tercero retrocede línea a línea. El cuarto elimina el breakpoint.

Me paro ante un error A veces el debugger te da la opción de que crees un breakpoint automáticamente cuando un error ocurre y que puedas así analizar detenidamente el error (de Ajax_error.html).

Firebug también te muestra donde se ha interrumpido y cómo se ha llegado a esa interrupción. En el ejemplo se ha interrumpido la función “seltodo” que se ha lanzado desde un onclik.


Septiembre 2007

19

Vigilar las expresiones Mientras estas depurando, Firebug te ofrece ver el valor de las expresiones o objetos que están enterrados en el DOM. Estos valores se actualizarán cada vez que des un paso en el depurador.

También se puede usar “New watch expression…” para escribir una expresión javascript que será ejecutada en ese momento. Y es aquí donde se puede usar la tecla Tab para autocompletar las propiedades de los objetos. Usar la tecla entrar para ejecutar las expresión. Podemos controlar que variables queremos ver desde opciones:

Variable tooltip

Mientras que el depurador está detenido, puede mover el ratón encima de cualquier variable para ver el valor de esa variable.


Septiembre 2007

20

Perfil de la ejecución de JavaScript Con Firebug, sabremos si nuestro código es lento: usando el “profile”. 1.- Ir a la consola. 2.- Pulsar profile. 3.- Ejecutar código JavaScript o recargar la página. 4.- Volver a pulsar sobre profile.

A continuación veremos un informe detallado que muestra las funciones y cuánto tiempo cada una de ellas ocupa.

Tala en función de las llamadas A veces una función problemática se llama muchas veces y no se puede parar el depurador cada vez. Sólo queremos saber cuándo se llama y qué parámetros se pasan.

Para ello haga clic derecho sobre la función la pestaña “script” y seleccione "Log calls to…”. Cuando ejecute el JavaSript saltará a la consola y verá el flujo de las llamadas a esa función.

Ir a una línea directamente Basta con escribir #Nº desde la pestaña “script” en la lupa de búsqueda rápida.

Exploración DOM Firebug te ayuda a encontrar objetos DOM rápidamente y luego editarlos en el momento.


Septiembre 2007

21

Hay dos tipos de objetos y funciones: las que forman parte del estándar DOM, y las que son de su propio código JavaScript. Firebug conoce la diferencia, y le muestra los comandos y funciones de Javascript en negrita arriba de la lista. En cualquier caso desde opciones podemos elegir que queremos ver:

El DOM es un pequeño editor de línea de comandos JavaScript, es decir, podemos escribir cualquier expresión de JavaScript. Cuando se pulsa enter se evalua y el resultado será asignado a la variable . Haciendo click sobre una función de la columna derecha esta aparecerá marcada automáticamente en la pestaña “script”.

NET: Monitorizando la red Con Net podemos ver todos los recursos que carga la página, en qué orden, cuánto tarda y lo más importante: señala en rojo aquellos que no pudo encontrar (esto quita muchos dolores de cabeza). Además nos ofrece un pequeño preview de la imágen y/o datos del recurso. Con las pestañas a derecha de “ALL” podemos filtrar los tipos de peticiones y lo mejor: captura también las peticiones AJAX con lo que podemos ver tanto lo que se envía como lo que se recibe:

(Probando con css.html)


Septiembre 2007

22

Caché o no en caché No todas las peticiones de red son iguales: algunas se cargan desde la caché en lugar de la red. Firebug usa códigos de color para saber que se carga desde la caché con un color gris mas claro. Para ver la diferencia: css.html tiene establecida la etiqueta <META HTTP-EQUIV="Cache-Control" CONTENT ="no-cache"> que impide que la carga sea desde la cache, siempre se hará por red. Elimina esta etiqueta y observa la diferencia.

Examinar las cabeceras HTTP Las cabeceras HTTP contiene información interesante, como el tipo de MIME del archivo, el tipo de servidor web, caché de las directivas, la cookie, y más.

XMLHttpRequest vigilancia El fenómeno que gira en torno a Ajax es una pequeña cosa llamada XMLHttpRequest. Firebug muestra por cada XMLHttpRequest, tanto en la pestaña de Net como en la pestaña de la consola, el texto que publicó y el texto de la respuesta.


Septiembre 2007

23

EJERCICIOS: 1.- Sobre CSS. Página http://www.ua.es/personal/marcos.sanmartin/ajax/tema1/ejercicios/capas.html Contesta estas preguntas: 1.- (Web Developer) En caso de desactivar el CSS el html ¿se mostrará de forma lineal de manera que se pueda leer de una forma lógica? 2.- (Web Developer) ¿Serias capaz a través de la edición de CSS arreglar el que la columna derecha salga debajo?. 3.- (Web Developer) Resalta los elementos de bloque, pero mostrando los nombres de los elementos de bloque a mostrar ¿Cuántos DIV se han usado?. 4.- (Web Developer) Al redimensionar la página a una pantalla de 800x600 ¿las capas se mueven de sitio? 5.- (Web Developer) Valida el CSS ¿Cuántos elementos de enlace o instrucción de procesamiento de hoja de estilo xml hay no reconocidas? 6.- (Web Developer) ¿Es una página HTML 4.01 Transitional válida? ¿por cuantos errores?

2.- Sobre JavaScript y DOM Páginas: http://www.ua.es/personal/marcos.sanmartin/ajax/tema1/ejercicios/carrusel_A.html http://www.ua.es/personal/marcos.sanmartin/ajax/tema1/ejercicios/carrusel_B.tml 1.- (Firebug) ¿Alguna de esas páginas usa AJAX? 2.- (Web Developer) Observa como los informes de view speed report son iguales para ambas páginas. 3.- (Firebug) Aunque se trata de páginas que aparentemente hacen lo mismo hay una diferencia. Una carga las imágenes según le va haciedo falta mientras que la otra hace una carga total. Con ayuda de NET de Firebug ¿podrías decir cúal es la que carga todas de golpe?. 4.- (Firebug) Calcula cual es más rápida (hay que esperar a que se pare la rotación de las imágenes). OJO para poder probar la velocidad primero hay que usar Web Developer para vaciar la caché. 5.- ¿Cuál dará mayor sensación de velocidad de carga al usuario?. 6.- (Firebug) Usa la opción DOM para contestar ¿qué funciones se han usado en cada página?.


Septiembre 2007

24

7.- (Firebug) Vacia la caché y mira las estadísticas de carga desde Consola >> Profile ¿Cuántas veces se llama a opacidad? Encarga es la función que se carga nada más arrancar esas páginas ¿verifica tu respuesta a la pregunta 3?. 8.- (Firebug) Observa que cambia en la página cuando la recargas con la solapa HTML. Cambia alguna position de absolute a relative y observa la diferencia. 9.- (Firebug) En carrusel_A.html vamos a observar el comportamiento del jasvascript a través de la ficha Script ¿Qué vale imgs[indice] en la función cambiafoto() cuando indice vale 4? Averigua con un log to call a cambiafoto() para que se usa esta función. 10.- (Firebug) Compara la página HTML original con la que luego se dibuja en carrusel_A.html y en carrusel_B.html

ENLACES RELACIONADOS. http://www.getfirebug.com/ http://www.sidar.org/recur/desdi/traduc/es/css/box.html http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=FireBug

Firebug

Documents

Transcript of Firebug