Firefox: Marcar imagenes no encontradas

Este es un pequeño tip para usuarios de Firefox, usualmente en Internet Explorer o en otros navegadores cuando no se encuentra alguna imagen (Broken Images) se muestra un rectángulo y un ícono para indicarlo pero Firefox no muestra nada y si estamos desarrollando un sitio no nos enteramos que faltan cosas.

La solución es muy simple basta agregar las siguientes líneas a nuestra hoja de estilos:

De esta forma se comportará similar a otros navegadores mostrando un pequeño ícono para indicarnos que falta alguna imagen

Firefox: Aumentar el espacio disponible

Google Chrome fue pensado para netbooks así que cuenta con una interfaz más adecuada para una pantalla widescreen pequeña, Firefox no contará con una interfaz así hasta su versión 4.0 pero si no quieres esperar tanto hay varias formas de aumentar el espacio.


Lo primero podemos ocultar el menú y en vez de este simplemente mostrar un ícono que aal darle click nos muestre el menú (similar a lo que hace Internet Explorer), para esto debemos instala la extensión Compact Menu2

Luego tenemos una barra de marcadores que nunca utilizamos o a la que podemos acceder desde el menú, para ocultarla vamos al menu ver/barras de herramientas/marcadores

Si crees que no es suficiente y necesitas más espacio también puedes ocultar la barra de estado usando el complemento autoHideStatusBar

Si después de todo eso aún te parece que te falta espacio puedes apretar la tecla F11 para navegar a pantalla completa de esta forma se ocultan todas las barras pero basta con deslizar el mouse hacia arriba y puedes acceder a todas las opciones.

Firequery: Depurando jquery con firebug

Firebug tiene excelentes herramientas para depurar código javascript sin embargo se queda corto en algunas cosas sobre todo cuando se trata de averiguar si los selectores funcionan correctamente y si nuestros eventos en realidad son considerados por jquery, es ahí donde viene otro excelente plugin del plugin llamado Firequery.

¿Cómo lo instalo?

Lo podemos descargar de la página de Addons para Firefox AQUI, si deseamos ver más detalles y darle una ojeada a su documentación en su web oficial

¿Cómo funciona?

Luego de instalarlo a simple vista no hay cambios en nuestro firebug salvo una pestaña adicional llamada jquerify en la consola, esta pestaña nos permite añadir nuestro script jquery a cualquier página web, en caso que ya exista no hará la indicación correspondiente.

Los detalles interesantes se ven la pestaña inspeccionar HTML que ahora adiciona las funciones que se viene ejecutando y los elementos afectados
En esta imagen por ejemplo estoy usando el jquery cycle para hacer un slider como vemos se ha añadido un pequeño texto adicional donde muestra la función que viene ejecutándose si le doy click me va a dar más detalles como los valores que le estoy enviando.

En este segundo caso estoy usando tooltips, firequery me da información adicional, además de la función que es invocada y los parámetros que se le dan, me indica además el evento que se está utilizando (mousehover en este caso).

Tiene algunas otras funciones adicionales que podemos probar en su página de ejemplo

ErrorZillla diagnosticar páginas caidas

No hay duda que para el tema de desarrollo web Firefox es el mejor navegador(si, ya se en cuanto a consumo de memoria y velocidad esta perdiendo terreno frente a Chrome), es el único con la suficiente variedad de extensiones que cubren cada aspecto del diseño, desde colorzilla hasta el imprescindible Firebug.

Ahora veamos una extensión llamada ErrorZilla, cuando tenemos una página caída con un error 404 usualmente no sabemos que hacer (de hecho muchas veces no hay nada que hacer) sin embargo esta extensión nos brinda algunas opciones que van desde reintentar, revisar Google Cache y hasta poder ver versiones anteriores de este sitio usando Wayback; pero no queda ahí también podemos diagnosticar que ocurre mediante herramientas como Whois, Trace y así hacernos una idea de porque el sitio se encuentra caído, este detalle es especialmente útil si es uno de nuestros sitios.

Podemos instalarlo de un sólo click desde AQUI

Usar Regla en Diseño Web

Esta es una de mis extensiones favoritas para Firefox se llama MeasureIt nos permite hacer aparecer una regla para medir cualquier objeto dentro de una página web, resulta muy util para poder modificar la hoja de estilos y acomodar los objetos en nuestro diseño, aunque puede tener algunos problemas a la hora de medir objetos Flash creo que cumple bien con su propósito.

measureit extension firefox

¿Como funciona Measure It?

Una vez instalado le das un click al ícono con forma de regla que aparece en la parte inferior izquierda del navegador, la pantalla cambiará de color y usando arrastrar y soltar podrás medir el area que desees para desactivarla simplemente presiona la tecla “ESC” o le das otro click a su ícono.

Download