Firefox

ErrorZilla: página de error para Firefox

ByLuis October 17, 2006

Muchas de las veces cuando navegamos por internet y nos da una pÃ¡gina de error no sabemos a ciencia cierta si es porque el servidor estÃ¡ caido, porque nos acaba de fallar la conexiÃ³n de internet o vete a saber por quÃ©.
Para estas ocasiones, nada mejor que ErrorZilla, una extensiÃ³n para Firefox, que modifica la pÃ¡gina de error y nos ofrece a parte del “vuelve a intentarlo”, la posibilidad de mirar en la cachÃ© de Google, buscar un pantallazo en Wayback Machine, hacer un ping, un trace y un whois.

[Esta entrada me la dedico a mi mismo y a mi proveedor de internet]
ErrorZilla
VÃa / Lifehacker

Firefox

Server Switcher: extensión para Firefox

ByLuis December 3, 2007

Server Switcher es una extensiÃ³n para Firefox que nos ayudarÃ¡ en el desarrollo de aplicaciones para poder cambiar de servidor de pruebas al de real, y viceversa, con un simple click del ratÃ³n. Esto nos es de mucha utilidad cuando estamos trabajando en diferentes entornos y queremos comprobar las diferencias entre uno y otro. AdemÃ¡s, nos ahorra el tener que modificar las URLs de la barra de navegaciÃ³n del Firefox, ya que con un solo click realiza el cambio.
Cuando la extensiÃ³n detecta que la pÃ¡gina que accedemos estÃ¡ en su lista de servidores intercambiables, nos mostrarÃ¡ un icono en la ruta de la pÃ¡gina que serÃ¡ el que pulsemos para realizar el cambio de servidor.
Entre otras caracterÃsticas permite HTTPS, directorios y accesos directos a fichero (file:///D:/www).
Server Switcher
Gracias David por el aviso

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

Firefox

Firebug 1.0, lo que nos va a ofrecer

ByLuis November 17, 2006

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

Navegadores

Crear extensiones para Chrome

ByLuis June 10, 2010June 10, 2010

La gente de Tutorialzine nos enseña cómo realizar extensiones para Google Chrome, y la verdad parece bastante sencillo. Para ello realizan una extensión de ejemplo que muestra los últimos posts de su feed.

La extensión debe constar de un fichero de configuracion (manifest.json) y luego el CSS, HTML5 y jQuery de la extensión. Chrome permite desarrollar las extensiones sin tener que instalarlos, para lo que desde chrome://extensions/ tendremos que ir a Developer mode y desde allí cargar el script.

Para tener más información podéis ir a la página oficial de Google

Making Your First Google Chrome Extension

Vía / @jlantunez

Firefox | How to

FireMarker: cómo crear una extensión para Firefox

ByLuis March 2, 2007

Si el otro dÃa os hablaba de FireMarker, la extensiÃ³n de Firefox para marcar texto en una pÃ¡gina, hoy voy a intentar explicar cÃ³mo la desarrollÃ© y asÃ conseguir que otras personas no se encuentren con las mismas dificultades que yo.

Vamos a ir paso a paso, explicando la estructura, los distintos ficheros y sus contenidos, siempre dentro de mi limitado conocimiento, ya que lo que he aprendido ha sido destripando otras extensiones y mirando la documentaciÃ³n que hay sobre XUL.

Desarrollo web | Firefox

View Source Chart: extensión de Firefox para el código HTML

ByLuis April 6, 2006

Gracias a Hugo y a otro amigo anónimo vía formulario de contacto, nos ha llegado esta extensión, que si bien podía llevar mucho tiempo, yo desconocía.

Se trata de View Source Chart, una extensión que nos devuelve el código HTML que se genera después de las modificaciones que hace el javascript del DOM.

Por ejemplo, escribimos el siguiente código HTML:

document.write("Hola Mundo");

Nos mostrará el siguiente código HTML:

<script>
...
</script>
Hola Mundo

Muy útil para ver el código real que nos muestra el navegador, y no tener que ir destripando el javascript para saber que saca.

View Source Chart

Similar Posts