HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

Las nuevas y acojonantes herramientas para desarrolladores de Firefox

Un vistazo a las mejoras que incorporan las últimas versiones de Firefox en el navegador enfocadas al desarrollo de sitios web.

Firefox Developer ToolsEn las últimas versiones de Firefox, Mozilla se ha propuesto mejorarnos la vida a los desarrolladores web, incluyendo funcionalidades y herramientas en el navegador para hacernos el trabajo más fácil y rápido.

Las herramientas para desarrolladores han ido mejorando en cada nueva versión, pero ahora que ya nos encontramos con la beta de Firefox 16, Mozilla nos sorprende muy gratamente con la nueva Developer Toolbar, que es la que ha motivado este post para hacer un repaso a las herramientas que actualmente vienen de serie en el navegador.

El nuevo asistente para probar diseños adaptables o responsive

El concepto de diseños web responsive o adaptables está teniendo una fuerza enorme en la actualidad. Podemos encontrar multitud de herramientas que están surgiendo a la velocidad del rayo para ayudarnos a realizar pruebas y a desarrollar bajo este nuevo prisma. Firefox también ha hecho los deberes e incluye una vista de diseño adaptable.

Firefox: vista de diseño responsive Vista de diseño adaptable en Firefox 16 Beta.

Desde esta vista podemos jugar modificando en vivo la resolución de la pantalla de visualización de la página, incluyendo algunas resoluciones comunes en los dispositivos móviles y ordenadores actuales.

El inspector de elementos, consola de errores y depuración

A principios de año comentábamos la nueva herramienta para desarrolladores de Firefox 10. Se trata de un Firebug nativo en el navegador, con un diseño espectacular. Por fin Firefox implementa de forma nativa un inspector de elementos, una consola de errores y un asistente de depuración.

Firefox: inspector de elementos, consola y depuración Inspector de elementos, consola de errores y depuración.

El editor de estilo en tiempo real

Cuando se abre el inspector de elementos, veremos también un botoncito para activar la columna con el estilo. En el lado derecho veremos todos los estilos aplicados a los elementos seleccionados en el inspector, incluso podremos modificarlos desde ahí para ver los cambios en directo sobre la página web.

Firefox: mapa de estilos básicos del elemento

Un añadido interesante es el mapa con la información de dicho elemento: un gráfico en el que se muestran visualmente el tamaño del elemento, los márgenes, bordes y paddings.

La vista en 3D de cualquier sitio web

Para mí, esto es más un juguetito que una herramienta realmente útil. Es una vista que incorpora Firefox para visualizar todo el árbol de nodos de la web en tres dimensiones y aplicado sobre el propio contenido y diseño de la página.

Firefox: vista en 3D Vista en 3D de la página web.

Puede resultar útil para detectar errores de elementos flotantes o de contenedores de otros elementos, porque aporta una visualización completamente diferente de la habitual.

Developer Toolbar: la nueva barra de herramientas para desarrolladores

Se trata de una barra de herramientas desde la que no sólo se pueden activar el inspector de elementos, la consola web o el asistente de depuración de errores, sino que también incluye una línea de comandos para ejecutar diferentes acciones y mejorar muchísimo la velocidad de algunas herramientas.

Firefox: la nueva Developer Toolbar

La nueva barra de herramientas y línea de comandos en Firefox 16 Beta.

Pero… ¿qué puede hacerse con esa nueva Developer Toolbar? Pues casi todo lo que estás pensando:

  • lo primero de todo, tecleando el comando "help" muestra un popup con todos los comandos disponibles. Tecleando "help COMANDO" muestra una ayuda más detallada sobre ese COMANDO en concreto.
  • tecleando el comando "inspect h1" abre el inspector de elementos y lo enfoca en el elemento "" del código fuente.
  • tecleando el comando "inspect #header" o "inspect .left" abre el inspector y lo enfoca en el elemento con ID “header”, en el primer caso, y en los elementos con clase “left” en el segundo.
  • con el comando "cookie" podemos modificar las cookies para esa página: añadir, eliminar o mostrar todas las cookies.
  • "pagemod" es un comando que nos permite cambiar contenidos en la página en directo. Por ejemplo, eliminar o reemplazar algún contenido.

La idea es conseguir hacer un montón de cosas de una forma sencilla y utilizando solamente el teclado, permitiendo controlar de una forma muy rápida todas las herramientas de desarrollo del navegador. Incluso se incluye el comando "restart" para reiniciar la aplicación al completo, :)

Capturas de la página web en PNG desde la barra de herramientas

Una de las funcionalidades que más me han gustado de la nueva Developer Toolbar es la posibilidad de crear capturas de la página web con un solo comando. Por eso le he creado un apartado separado a esta nueva feature.

El comando "screenshot captura" captura la página web que se está visualizando y guarda la imagen con nombre “captura” en formato PNG en la carpeta de descargas que tengas configurada en las preferencias de Firefox.

Además, puedes ejecutar la captura con más parámetros para incluir un retraso en segundos al realizar la fotografía, elegir si capturar toda la web o sólo un elemento HTML…

Pues nada, que Firefox está gananado un montón de puntos con la evolución de sus herramientas para desarrolladores en los últimos meses. Creo que, por mi parte, ya sólo les queda implementar de una vez la búsqueda integrada en la (no tan) Awesome Bar, :)

Enlaces: