Contenido

FireQuery, jQuery con Firebug con cualquier página

31 Oct

+ 3

Jose Dueñas publica en Twitter una interesante aplicación que nos permite disponer de jQuery en cualquier página con Firebug.

jQueryfy
(Ver Imagen)

De esta forma tienes a tu disposición todas las facilidades que jQuery en cualquier página que este editando. Ideal para depurar las aplicaciones que no podemos editar directamente.

Versión sin plugin

Básicamente podemos conseguir lo mismo sin necesidad de usar ningún plugin ejecutando un pequeño script desde Firebug.

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
document.getElementsByTagName("head")[0].appendChild(s);

De esta forma, usaremos Google Ajax Libraries para cargar jQuery desde los servidores de Google.

Firefox + Firebug vs IE8 + Developer Toolbar

21 May

+ 15

Con la llegada de Internet Explorer 8, nos llevamos la sorpresa de que Developer Toolbar no estaba tan mal como creíamos, incluso hay gente que se atreve a compararlo al todopoderoso Firebug. En esta comparativa, nos encontramos una tabla que nos testéa de todos los Firebug de los diferentes navegadores una buena serie de factores a tener en cuenta y que muestran que Developer Toolbar es una herramienta genial para los desarrolladores web.

Feature IE8 FireBug + FireFox Opera Safari Chrome Usefulness
HTML
Syntax Highlighting Yes Yes Yes Yes Yes star star
Code Folding Yes Yes Yes Yes Yes star star
Html Editing Yes Yes No No No star star star
HTML Validator Yes* No No No No star
Clear Cache Yes No** No** No** No** star star
Select and Highlight Yes Yes Yes Yes Yes star star star star
Layout Yes Yes Yes Yes Yes star star
CSS
Css Viewer/Editor Yes Yes Yes Yes Yes star star star star
Css Syntax Highlight Yes Yes No No No star star
Disable CSS Styles Yes Yes No No No star star
Create New Styles Yes Yes No No No star star
Validate CSS Yes* No No No No star
JavaScipt
Javascript Highlight Yes No Yes Yes No star
JavaScript Debug Yes Yes Yes Yes No*** star star star star
Breakpoints Yes Yes Yes Yes No*** star star star star
Step Over/In/Out Yes Yes Yes Yes No*** star star star star
JavaScript Profiler Yes Yes No Yes No star star
Execute JavaScript Yes Yes Yes Yes Yes star star
Call Stack Yes Yes Yes Yes No star star star
Local Variables Yes Yes No Yes No star star star
Watch Variables Yes Yes Yes No No star star
Web Service Viewer No Yes No No No star star
Intangibles
YSlow No Yes No No No star star
Browser Mode Switch Yes No No No No star star star
Dockable Yes Yes Yes Yes Yes star
Color Picker Yes No No No No star
Net Tab No Yes No No No star star

(Tabla de elegantcode.com)

Personalmente me parece un maravilla poder hacer, casi lo mismo que con Firebug, en Internet Explorer (aunque solo en el 8.0). Esto me ayuda bastante a la hora de desarrollar para este navegador y me ahorra mucho tiempo de modificar en el fichero real, grabar y recargar el navegador.

¿Que opinas? ¿Le has dado una oportunidad?

FireDiff, complemento de Firebug que nos muestra los cambios en el DOM y el CSS

20 Abr

+ 1

FireDiff, es un complemento para Firebug que nos permite ver claramente los cambios realizados en el DOM y el CSS. A modo de log gráfico nos muestra cuando se inserta un elemento o cuando se le cambia una propiedad CSS a un elemento. Una gran herramienta para controlar mejor, aún, nuestras aplicaciones.

firediff_small
(Ver Imagen)

[Descargar]

WiderBug, el Firebug para pantallas gigantes

12 Abr

+ 4

Widerbug es un versión de Firebug para pantallas panorámicas que nos permite disponer de las ventajas de Firebug en el lateral del navegador.

widerbug_preview
(Ver Imagen)

Esta versión, que nos obliga a desinstalar Firebug previamente, nos ayuda a editar nuestro código viendo el largo completo de nuestras aplicaciones web.

FireUnit: haz tests a tus aplicaciones desde Firebug

18 Dic

+ 0

Via Sentido Web descubro FireUnit, una aplicación que nos permite extender Firebug para permitirnos hacer pruebas unitarias del javascript de nuestras aplicaciones web. John Resig y Jan Odvarko la han desarrollado ambos nos muestran una serie de opciones disponibles:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
fireunit.ok(true, "Passing test result");
fireunit.ok(false, "Failing test result.");
fireunit.compare("expected data", "expected data",
    "Passing verification of expected and actual input.");
fireunit.compare("<div><a>expected</a></div>", "<div><a>actual</a></div>",
    "Failing verification of expected and actual input.");

// Wait for asynchronous operation.
setTimeout(function(){
    // Finish test
    fireunit.testDone();
}, 1000);
</script>
</head>
<body/>
</html>

fireunit-scr-example1

Instalación

Como todas las extensiones de Firefox, se basa en un .xpi que podrás encontrar en la página oficial.

Modo de empleo

Una vez instalado y reiniciado el navegador, nos encontramos con una nueva pestaña en Firebug (Test), como podemos ver en la siguiente imagen.

fireunit-scr-bar

En ella veremos los resultados de los tests que lanzemos desde la consola de Firebug. Gracias a la API que nos ofrecen, podemos hacer un serie de tests

Firebug Lite 1.2, Buscando las 7 diferencias

25 Jul

+ 8

A ver si alguien puede decirme, que hay de diferente entre estas imagenes:

Imagen A

imagen-4

Imagen B

firebug-lite-776x656

Imagen C

opera_html

Imagen D

safari_dom

Es dificil, ¿verdad? Es normal que sea complicado ya que la gente de Firebug ha conseguido algo realmente sorprendente. Si nos fijamos bien, la imagen A es Firebug 1.2 desde Firefox 3 en MacOs, las demás son Firebug Lite 1.2 sobre Internet Explorer 7 (B), Opera (C), Safari (D).

El resultado es soprendente y es que esta nueva versión de Firebug Lite ha revolucionado el concepto de debug de aplicaciones web. Da igual en que navegador estes desarrollando o teniendo problemas, con Firebug Lite creerás que estás en Firefox, con la confianza y seguridad que eso conlleva.

Recordemos como instalarlo en nuestra aplicación:

  • Añadimos entre nuestros tags <head></head> el siguiente código.
    <script type='text/javascript'
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

o podemos tener un acceso directo en nuestro navegador para poder añadir la funcionalidad a cualquier página.

Firebug Lite 1.2

Firebug pasa a ser parte del Proyecto Mozilla

18 Jul

+ 10

Han tardado, pero por fin se ha anunciado, atraves de John Resig,  que Firebug pasa a ser un proyecto de la compañía Mozilla, al igual que Dragonfly en Opera, Firefox tendrá su aplicación de debugueo propia de la casa, lo que seguro nos aportará importantes y interesantes sorpresas 😀

Un firebug para cada navegador ¿con cual te quedas?

2 Jul

+ 22

Emilio me pasa este enlace en el que nos muestran una recopilación de 4 navegadores y sus 4 versiones de Firebug.

safariwebinspector1firefoxfirebug1

ie8devtools1operadragonfly1

¿con cual te quedas?

Gracias Emilio.

4 extensiones para complementar Firebug

1 Jul

+ 10

Firebug, ya de por sí es (para mí) la mejor extensión existente para Firefox y de la que no podría prescindir en el día a día. Dispone de todas las herramientas necesarias para hacer un debug exhaustivo de nuestras aplicaciones web. Así y todo siempre se puede mejorar, todo se puede mejorar.

Con estas 4 extensiones podremos complementar unas opciones para que Firebug se convierta en «la única» de mi navegador.

  1. Jiffy, una extensión que mejora el apartado Net mostrando más detalladamente la información referente a la carga de la página.
  2. YSlow, extensión que testea una serie de reglas para comprobar el correcto rendimiento del sitio.
  3. FireCookie, integra un apartado extra llamado Cookies en el que podremos gestionar, manipular o eliminar las cookies que intervienen en cualquier página.
  4. FirePHP, nos permitirá interactuar desde PHP con nuestra consola Firebug.

via

Actualización

Edusanver nos extiende el listado de extensiones.

Opera DragonFly alpha 2, firebug para Opera cada vez más cerca

27 Jun

+ 0

Opera ha lanzado la versión alpha 2 de Opera DragonFly, lo que será el «Firebug» para este navegador. Recomendado echarle un vistazo.