|

FireQuery

This is a very cool extension for Firebug (add-on for an add-on?) that expands Firebug’s capabilities with jQuery. For instance, a built in jQueryify button, showing attached event handlers in the Content / DOM tree view, and highlighting all elements in a jQuery collection. I don’t think it’s new but I hadn’t seen it until I finally watched Remy S …

Post original

FireQuery: optimizaciones para FireBug centradas en jQuery

FireQuery es un plugin para Firefox que permite añadir mejoras a Firebug basadas en jQuery. Permite añadir jQuery a cualquier web, algo muy útil si necesitas ejecutar algún script en la consola y te apañas mejor con jQuery.
Además permite ver los eventos que está asociados en los elementos HTML desde la pestaña HTML de Firebug.
FireQuery (web)
Vía / DZone

Firefinder: plugin para Firebug que localiza elementos

Firefinder es un plugin para Firefox que se integra con Firebug y que nos permite localizar de forma rápida y sencilla elementos HTML en la página.
Permite usar selectores CSS y XPath, por lo que no es necesario conocer una nomenclatura nueva, y además nos ayuda cuando trabajemos con los selectores jQuery o cuando estemos parseando HTML.
Firefinder
Vía / Robert’s talk

FireUnit: extensión para pruebas unitarias de Javascript

FireUnit es un plugin para Firefox que permite realizar pruebas unitarias de Javascript y mostrar los logs en una pestaña de Firebug. El plugin está desarrollado entre otras personas por John Resig, desarrollador de jQuery.

Se pueden realizar pruebas como las siguientes:

// Simular eventos del navegador
var input = document.getElementsByTagName("input")[0];
fireunit.mouseDown( input );
fireunit.click( input );
fireunit.focus( input );
fireunit.key( input, "a" );

FireUnit

Vía / John Resig

Evitar errores de producción debidos a Firebug

Aquellos que usamos Firebug para depurar nuestras aplicaciones, podemos cometer el error de dejar una traza (console.log())y que al subirlo a producción el usuario tenga un error de Javascript. Para evitar esto, podemos incluir en nuestro script lo siguiente:

if(!window.console) {
window.console = {
log: function() {}
}
}

Visto en este ejemplo

NitobiBug: debug para Javascript

NitobiBug es un script similar a Firebug que nos permite realizar debugs en nuestros scripts. Permite mostrar una ventana emergente con el contenido de objetos (diferenciando entre tipos), elementos DOM o simplemente mensajes.

nitobibug.png

Usarlo es tan sencillo como esto:

var myObject = {a:234523, something:'else', mylist:[32423,4556,'sdfs']}; nitobi.Debug.log(myObject);

Y para instalarlo solo hay que añadir el archivo js.

Una alternativa a Firebug, sobre todo para IE, pero me sigo quedando con Firebug.

NitobiBug

Firebug y el rendimiento Ajax

Ajax es una de las técnicas que más se están extendiendo por Internet. Su desarrollo es sencillo, pero su abuso es importante. Hay que tener en cuidado al desarrollar usando Ajax ya que podemos tener problemas de rendimiento.
En IBM nos ofrecen un artículo interesante sobre el rendimiento de estas aplicaciones y como medirlo y mejorarlo mediante Firebug e YSlow.
El tiempo de una llamada Ajax se centra en tres aspectos: tiempo de respuesta del servidor, tiempo de transferencia y tiempo de procesado en el cliente. Es importante bajar estos tiempos ya que así agilizaremos nuestras aplicaciones.
Reduce el número de llamadas HTTP, aunque en el cliente se puedan anular, en el servidor se procesan, por lo que es tiempo de proceso malgastado. También es interesante reducir el tamaño del contenido de la respuesta que devuelve el servidor, cuanto menos haya para mandar, menos se tarda en enviar y menos se tarda en procesar.
Una lectura interesante que nos ayudará paso a paso a mejorar nuestras aplicaciones.
Ajax performance analysis

Así funciona Firebug

logo de FirebugFirebug es una extensión de Firefox integrada en las que yo denominaría como “imprescindibles para el desarrollador web”. Su versión definitiva (1.0) está aún en fase Beta pero se puede trabajar con ella perfectamente.
Ya se ha hablado aquí sobre Firebug , hoy vamos a ver algunas de sus funcionalidades.
Las ventajas que presenta son muchas, aunque una de las más espectaculares, y que cualquier persona que se dedique a diseñar / maquetar webs debe conocer, es la de poder editar “en línea” las hojas de estilo de una web, utilidad que cualquiera que de los que hemos perdido horas debugeando una página valoramos infinitamente.
Veamos cómo hacerlo.

Read More “Así funciona Firebug”

Firebug 1.0, lo que nos va a ofrecer

firebug1.0.pngYa en otras ocasiones hemos hablado de Firebug, y esta vez no puede ser menos debido a todo lo que nos va a ofrecer la versión 1.0, lo cual es mucho:

  • Usabilidad: posibilidad de abrirlo en una ventana nueva, pudiendo situarla en un segundo monitor. Listas de páginas en las que queremos que esté activo o no Firebug. Tecla de acceso directo para abrir Firebug de forma normal o en una ventana nueva. Facilidad de lectura ya que se puede aumentar o disminuir el tamaño de la letra.
  • Código HTML: visor de código fuente de forma estructurada, con posibilidad de desplegar etiquetas. Ver qué es lo que se está modificando en la página web. Editar el código HTML en el momento. Encontrar elementos HTML en el código posicionándonos en ellos con el ratón. Busquedas. Si se modifica la página y se recarga, Firebug seguirá apuntando al elemento que teníamos antes de la recarga. Copiar el código HTML al portapapeles.
  • CSS: Inspección en cascada. Previsualización de colores e imágenes. Facilidad para ajustar los estilos mediante la edición de las propiedades. Autocompletado. Modificar los valores numéricos aumentando y disminuyendo los valores usando las flechas de cursor. Selección de valores posibles de los estilos. Posibilidad de desactivar propiedades en los estilos para ver las diferencias. Inspeccionar cualquier hoja de estilos. Copiar al portapapeles colores y rutas de imágenes.
  • Visualización de CSS: Se puede ver el modelo de caja de los elementos HTML. De igual manera, se puede visualizar las medidas de la caja del elemento. Uso de reglas y guías como si se tratara de un programa de diseño gráfico. Modificación de las medidas de las cajas en el acto.
  • Monitor de red: Toma los tiempos de carga de del fichero y de los ficheros adjuntos. Separar los tiempos por tipo de fichero. Distinción entre ficheros de la caché y los que se han descargado de la red. Visualizador de la cabecera HTTP. Monito de las peticiones XMLHTTPRequest.
  • Debug: Permite encontrar ficheros js de forma sencilla. Poner puntos de interrupción en nuestro código. Incluir condiciones en los puntos de interrupción. Ejecución paso a paso. Parar automaticamente la ejecución si encuentra un error. Cuando se produce un error existe la posibilidad de ver la pila de llamdas a funciones que esperan respuesta. Visor de los valores de los objetos y de las propiedades. Uso de tooltips cuando está parada la ejecución del script para ver el valor de las variables. Medición de tiempos de ejecución. Logs de las llamadas a funciones. Acceso rápido a números de línea.
  • Búsqueda de errores: Los errores se muestran en la barra de estado del navegador. Visualización de los errores javascript solo de la página a la que se accede. Información descriptiva de los errores. Acceso fácil al debugger. Búsquedas rápidas. Filtro por tipo de errores.
  • Inspector DOM: Diferenciación entre código estándar y el creado mediante Javascript. Resumen informativo de los objetos inspeccionados. Edición de los objetos con posibilidad de autocompletado. Al recargar la página accede al mismo objeto que estaba seleccionado anteriormente. Navegación por el código Javascript.
  • Ejecución de código Javascript: consola para ejecución de código javascript. Autocompletado. El texto de la consola no es tratado como texto plano sino como hipertexto.
  • Trazas: posibilidad de mostrar trazas en la consola desde Javascript. Las trazas pueden ser de texto, objetos y texto formateado usando variables. Distintos colores para distintos tipos de logs (error, warm, debug e info). Marcas de tiempo. Stack traces. Agrupación de trazas. Inspección de objetos.

Estoy deseando que salga la beta para poder probarla.

Firebug

Vía / Ajaxian

| | | |

Nueva versión de FireBug

firebug2.pngYa hablamos en su día de FireBug, una extensión que nos permite depurar nuestras aplicaciones web. La nueva versión tiene una gran novedad, “debuguear” Javascript. Ahora es posible poner puntos de ruptura, ejecutar el código paso a paso, inspeccionar variables, comprobar código, … Si antes ya era indispensable, ahora es totalmente obligatorio para cualquier desarrollador (vale, quizás me he pasado). A parte de el debugger hay otra serie de cambios que no dejan de tener importancia.
FireBug
Vía / SitePoint