Firebug 1.0, lo que nos va a ofrecer

firebug1.0.png Ya 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

Drag & Drop de ficheros en Firefox

ByLuis February 18, 2010

Esto puede dar mucho juego, pero tan solo funciona en Firefox 3.6+, por lo que no podemos depender de este script en nuestras aplicaciones. A partir de la versión 3.6, Firefox permite realizar drag&drop de ficheros en nuestra web y mediante Javascript poder obtener los ficheros o textos que se arrastren contra un elemento específico.

Su uso es muy sencillo:

dropzone.addEventListener("drop", function(event) {
  event.preventDefault();
  // Ready to do something with the dropped object
  var allTheFiles = event.dataTransfer.files;
  alert("You've just dropped " + allTheFiles.length + " files");
}, true);

Y dispone de una API tanto para el drag&drop como para los ficheros.

Recomiendo ver el código fuente de este ejemplo para tener una librería que te hace todo el trabajo.

file drag and drop in Firefox 3.6

Firefox

Firefinder: plugin para Firebug que localiza elementos

ByLuis May 14, 2009

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

Javascript | Quicklinks

FireQuery

ByLuis August 23, 2010

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

Firefox

ScrapBook: colecciona sitios web mediante Firefox

ByLuis July 24, 2006

Interesante extensiÃ³n para Firefox que nos permite guardar pÃ¡ginas web y manejar colecciones. Siendo ante todo bastante Ã¡gil y sencillo. Entre las caracterÃsticas que ofrece, nos encontramos con: guardar una pÃ¡gina web, una parte de ella o el sitio completo, ordenar la colecciÃ³n de la misma manera que los marcadores, bÃºsqueda de texto en las colecciones, editar la pÃ¡gina web que hemos almacenado y editor de texto/HTML parecido a Opera’s Notes.
ScrapBook
VÃa / genbeta

AJAX | EstÃ¡ndares | Firefox | Javascript

FireBug: extensión de Firefox para depurar

ByLuis April 10, 2006

Una extensión que nos va a ser muy útil ya que nos permite depurar nuestras aplicaciones web. Entre las opciones que nos ofrece se encuentra la posibilidad de crear trazas en nuestras páginas web, olvidándonos así de los mensajes con alert para ver qué es lo que hace el código; nos avisa de los errores visualmente, algo que siempre he echado en falta en Firefox; inspector del DOM, CSS y eventos; línea de comandos para Javascript, se acabó el escribir el javascript: para ejecutar pruebas aisladas; monitoriza las peticiones AJAX, así como las respuestas; editor de elementos del DOM.

Completa e imprescindible
FireBug
Vía / Genbeta

Firefox

Firefox 2: ahora sí

ByLuis October 25, 2006

Bueno, tantas prisas por tener Firefox 2 antes de la salida oficial, y tantos lÃos con que si no es bueno bajÃ¡rse la versiÃ³n no oficial, que al final no se ha tenido que esperar nada porque ya es oficial la salida de Firefox 2.
No vamos a volver a comentar las novedades porque ya lo hemos dicho en otras ocasiones, por lo que solo nos falta decir… que ustedes lo disfruten.
Firefox 2

Similar Posts