Similar Posts

|

CSSViewer: visor de CSS para Firefox

ByLuis

cssviewer.jpgCSSViewer es una extensión para Firefox que nos permite visualizar en una ventana los estilos que posee un elemento de la página web que estamos viendo. Muy útil para cuando desarrollamos o para cuando visitamos páginas que nos gustan y queremos destripar los estilos sin necesidad de meternos en el código fuente.

Un par de fallos sí que le veo:

  • los iframes los trata como objecto, cuando podría profundizar en ellos, y los frames no sabe tratarlos, por ejemplo en la página de GMail, supongo que será porque tira del elemento body, el cual no existe en la página que contiene los frames (claro que esto es una suposición),
  • el segundo fallo es que la ventana que muestra los estilos es demasiado Web 2.0, algo más anticuado hubiera quedado mejor, es demasiado grande y se sale de la pantalla y no sigue bien al ratón, por lo que a veces el ratón se posiciona encima de la ventana y obtiene los estilos de la ventana que muestra los estilos (un poco recursivo, ¿no?).

Salvo estas cosillas, una extensión que ya tengo instalada y que creo que me será muy útil.

CSSViewer

Vía / Bartelme Design

Firefox depurará su código

ByLuis

firefox.pngMozilla pretende que las próximas versiones y funcionalidades que se incorporen a Firefox sean más seguras, para ello ha contratado a la anterior jefa de seguridad de Microsoft y ex-hacker. Según la nueva “Chief Security Something”.

Deseamos reducir el riesgo general de Firefox evaluando constantemente donde hay funcionalidad no aprovechada, desechando luego el código antiguo.

Mientras que las antiguas funcionalidades pretenden usarlas como extensiones y no como parte de código completo, también quieren aumentar la seguridad del navegador como integrando la nueva herramienta de anti-phishing de Firefox 2.0, y evitar que código maligno escriba en la memoria.

Firebug 1.0, lo que nos va a ofrecer

ByLuis

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

Fireclipese: Debug de Firefox en Eclipse

ByLuis

fireclipse.pngFireclipse es un proyecto opensource que permite depurar el código javascript ejecutado en Firefox.

Las características que nos ofrece Fireclipse son las siguientes:

  • Envía los mensajes de error de la consola de Firefox a la consola de Eclipse.
  • Apunta el editor de Eclipse en la línea que Firefox ha marcado como errónea.
  • Llama a la función dump() en la consola de Eclipse.
  • Añade un botón de Eclipse en la extensión Firebug.
  • La extensión de Firebug permite: depurar el código eval(), depurar manejadores de eventos, enviar mensajes de error a Eclipse y marcar las líneas ejecutables.

fireclipse2.png

Una ayuda para aquellos que desarrollen con Eclipse y Firofox.

Fireclipse

Vía / Ajaxian

Novedades en el sitio de extensiones de Firefox

ByLuis

firefox-addons.pngMozilla va a renovar su sitio de extensiones para Firefox (debería estar ya disponible), el cual incluye algunas novedades bastante interesantes:

  • Habrá 7 comunidades dependientes del idioma: alemán, chino, coreano, eslovenio, español, francés y japonés. Aunque esto me puede preocupar un poco, porque aunque las extensiones serán las mismas, las reseñas que puedan aportar personas de una comunidad no estará disponible a las de las otras comunidades.
  • Búsquedas y clasificaciones mejoras, incluyendo previsualización mediante Ajax.
  • Inclusión de aspectos sociales en el sitio, las extensiones podrán ser valoradas y puntuadas por los usuarios. A parte será los usuarios quienes aprueben nuevas extensiones y solo se mostrarán aquellas que sean más populares, aunque el total de la lista estará también disponible para los desarrolladores.

Podéis obtener más información en el artículo referenciado.

Mike Shaver habla sobre la renovación del sitio de extensiones de Mozilla

|

Fireflix: controla tu cuenta de Flickr desde Firefox

ByLuis

fireflix.pngEncuentro en firefoXtensions (página que recomiendo que sigas si eres usuario de Firefox), una extensión que facilitará mucho el trabajo a los usuarios de Flickr.
Con esta extensión podras subir fotos nuevas, crear thumbnails en formato HTML de las fotos seleccionadas, buscar fotos en Flickr, eliminiar fotos, trabajar con sets de fotos y más cosas.
La primera vez que lo ejecutas, te aparecerá en Flickr una pestaña nueva para poder permitir el acceso a la extensión, una vez concedido ya podrás trabajar con ella perfectamente.
fireflix
Vía / firefoXtensions