Recomendamos e introducimos numerosas herramientas para desarrollo y depuración de proyectos web, las más conocidas en la actualidad para Firefox. No importa cuál sea nuestro nivel… ¡es algo que siempre necesitaremos!

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.

Introducción: ¿Por qué necesito depurar mis proyectos?

Con el tiempo y la experiencia vamos aprendiendo a sortear más y más problemas relacionados con el desarrollo web, pero siempre surgen nuevos obstáculos que nos harán perder mucho tiempo. El uso correcto de las distintas herramientas de depuración nos permitirá reducir esta pérdida de tiempo, permitiéndonos optimizar nuestro trabajo.

Los buenos proyectos web necesitan de las mejores herramientas para su desarrollo y depuración.

No importa cuál sea nuestro nivel, este tipo de herramientas son indispensables en nuestro día a día, pues nos ayudarán a analizar, depurar y optimizar las distintas áreas que componen nuestro proyecto.

En este caso nos centraremos en el navegador web Mozilla Firefox como principal herramienta para el desarrollo de nuestros proyectos.

Herramientas integradas en Firefox

Antes de comenzar, si todavía no has instalado Mozilla Firefox, estás tardando. No es que sea indispensable para seguir este artículo, pero seguro que te interesa echarle un vistazo a todo lo que vamos comentando ;) .

Mozilla Firefox

Firefox incluye de base un extenso set de herramientas para desarrollo web, pero como veremos a lo largo de este artículo, su potencia se incrementa con una gran cantidad de plugins y herramientas de desarrollo adicionales. Todo esto nos permitirá mejorar nuestra calidad de trabajo, optimizando los tiempos de desarrollo.

Algunas de las principales herramientas integradas por defecto en el navegador son:

  • Visor de código fuente.
  • Información detallada de página.
  • Consola de errores.

A continuación analizamos de forma ligera las distintas herramientas integradas para posteriormente continuar con los plugins y desarrollos de terceros. ¡Vamos a ello!

Visor de código fuente

Al igual que la mayoría de navegadores, Firefox permite visualizar el código fuente de una página. Pero al contrario que algunas soluciones, lo que hace es abrir una ventana integrada dentro del navegador, en lugar de enviarnos a un editor de código externo.

Visualizador de código fuente

El visor de código fuente colorea los distintos elementos facilitando la lectura del mismo. Por si no fuese suficiente, seleccionando una porción concreta de la página podremos visualizar dicho contenido en lugar de tener que cargar todo el código de la página, teniendo una mayor claridad de lectura.

Como curiosidad comentar que también puede ser activado con la combinación de teclas: Control+U (Command+U en MAC).

Información detallada de página

Firefox permite visualizar información detallada de cada página web, así pues tendremos todo tipo de información en las distintas pestañas:

  • General: Muestra entre otras cosas la URL, el tamaño, el modo de renderizado, etc.
  • Medios: Muestra elementos media de toda la página: imágenes, iconos, etc.
  • Canales: Muestra los canales de difusión: RSS, Atom, etc.
  • Permisos: Muestra los permisos y permite activar / desactivar cómo se vería nuestra web sin carga de imágenes, cookies, ventanas emergentes, etc.
  • Seguridad: Muestra la Identidad del sitio web, si la conexión está cifrada o no, privacidad y cookies, etc.

Esta es la vista previa de la herramienta:

Detalle de página

A simple vista puede no ser suficiente información, pero para eso tenemos las extensiones que veremos a lo largo del artículo, permitiéndonos profundizar en el tipo de información que nos interese.

Al igual que la herramienta anterior, podremos activarla mediante teclas de acceso rápido: Control+I (Command+I en MAC).

Consola de errores

Firefox incorpora una consola de errores, permitiéndonos a los desarrolladores escribir y comprobar pequeñas porciones de javascript o código de otros archivos externos.

Consola de errores Mozilla Firefox

Además incorpora una interfaz para la utilización de componentes XPCOM (carga dinámica de scripts), detección de errores javascript y detección de errores CSS en la página web.

La combinación de teclas Control+Shift+J (Command+Shift+J en MAC) nos permite acceder directamente a la herramienta, en lugar del menú de firefox Herramientas > Consola de errores.

Ampliando las capacidades con las extensiones

Como comentábamos anteriormente, si bien Firefox incorpora algunas herramientas básicas para el desarrollo y depuración de nuestras páginas web, la verdadera potencia reside en la cantidad de plugins que nos permiten ampliar todo esto para Firefox.

Trataremos de ver las más recomendadas bajo mi punto de vista, y os comentaremos donde buscar otars q puedan ser de interes particular para vosotros. ¡Vamos a ello!

Web Developer Extension

Chris Pederick es el autor de esta extensión que añade una barra de opciones a nuestro Firefox con varias herramientas. También disponible para Google Chrome.

Vista previa de Developer Web Extension

Entre sus características destacan el salientado de elementos de una página, muestra el tamaño de las imágenes, información sobre CSS y formularios, deshabilitado de ciertos elementos en la página y mucho más.

Consigue esta extensión: Descargar Web Developer Extension.

Extensiones de Accesibilidad: iCITA, Fangs y Accesibar

Cada día son más las personas que disfrutan de internet, pero también son muchos los desarrolladores que se olvidan de las personas con algún tipo de discapacidad.

El iCITA: Centro de Información Tecnológica y Accesibilidad web, recomienda a estas personas la instalación de la extensión Firefox Accesibility Extension. Como desarrolladores nos servirá para ver cómo verán los usuarios finales nuestra página web via este plugin, y corregir así posibles errores de accesibilidad.

A la hora de comprender y afrontar los diversos problemas de accesibilidad web es importante ponerse en la piel del usuario, simulando el escenario en nuestro propio equipo.

También podemos simular un lector de pantalla de texto plano con la extensión Fangs Screen Reader Emulator, por la misma razón que mencionábamos anteriormente: es importante simular y ponerse en la piel de las personas que utilizarán nuestra web.

Por último os recomiendo que le echéis un vistazo a la extensión Accesibar que provee de numerosas herramientas como: zoom a página completa, deshabilitado de imágenes, flash y javascript, cambios en espaciado de texto… etc.

Colores con Colorzilla

Herramienta basada en un cuentagotas al más puro estilo Photoshop. Pasando el puntero por encima de un elemento podremos obtener información de color, información de la ruta de acceso DOM, la posición horizontal y vertical (X, Y) respecto a un punto marcado, etc.

Consigue esta extensión: Descargar Colorzilla.

Cookies

En mayor o menor medida todos trabajamos con Cookies en nuestros proyectos, Add & Edit Cookies es el original nombre de esta extensión que por si no lo habías adivinado nos permite añadir y editar cookies para nuestra página web en desarrollo. Por supuesto esto incluye el manejo de tiempo de expiración y sus valores.

Consigue esta extensión: Descargar Add & Edit Cookes.

MeasureIt: ¿Cuánto mide esto?

Imagino que todos aquellos que habéis lidiado con problemas de maquetación siempre surge la misma pregunta ¿Cuánto mide esto? La primera opción que un servidor tomaba era la de capturar esa porción de pantalla, abrir la imagen en Photoshop y medirla.

Ciertamente no es el colmo de la productividad, para solventar esta pérdida de tiempo y ser más rápidos y eficaces tenemos MeasureIt, una extensión que permite medir en pixels los distintos elementos de una página.

Consigue esta extensión: Descargar MeasureIt.

Simulando y visualizando en otros navegadores

Este problema es también un clásico. Echando un vistazo al dock de mi iMac tengo ahora mismo instalados 4 navegadores nativos: Safari, Firefox, Chrome y Opera. Además están las máquinas virtuales Windows para las distintas versiones de Internet Explorer.

Para saber si se visualizará correctamente nuestra página web en navegadores que suelen ser “problemáticos” tenemos dos extensiones: OperaView y IE Tab.

Además, si queremos simular los distintos agentes web tenemos la extensión User Agent Switcher pudiendo seleccionar entre: Opera, Internet Explorer, iPhone, motores de búsqueda, etc.

Parámetros de página

A menudo necesitamos comprobar nuestras páginas web recibiendo distintos parámetros a los que responder de forma distinta en nuestro código, para ello tenemos dos extensiones: Live HTTP Headers y UrlParams.

Live HTTP Headers nos muestra información en tiempo real acerca de las cabeceras HTTP. Por otra parte, UrlParams muestra parámetros de formulario que se han enviado al servidor através de nuestro navegador, permitiendo el cambio o el añadido de parámetros para su reenvío.

Firebug: el todoterreno

Quizás los usuarios más experimentados se hayan estado preguntando todo el rato dónde estaba Firebug… pero es que no quería que esto se quedase en el típico artículo hablando de Firebug y menospreciando al resto de soluciones.

Firebug

Firebug nos ayuda en numerosas formas, nos permite depurar AJAX, DHTML y Javascript. Muestra errores que ocurren durante el renderizado de página, permite inspeccionar de arriba abajo el DOM, el código CSS.

Consigue esta extensión: Descargar Firebug.

Reflexión final

Si bien no hemos cubierto todas las areas de desarrollo web, es un buen comienzo para adentrarse en el mundo de las extensiones para desarrolladores. Os recomiendo que os paséis por el directorio de extensiones y tratéis de buscar otras alternativas a las mencionadas que satisfagan vuestras necesidades.

¿Crees que hay mejores alternativas a las mencionadas? ¿Te gustaría recomendar alguna? Como siempre te invitamos a que participes y comentes ;) .

¡Nos vemos en la próxima publicación!

Te sugerimos otras entradas relacionadas...

No hay entradas relacionadas para esta publicación.

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (7 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

I Love Firebug.. el mejor de todo sin dudas.. los otros que me llamaron la atención Colorzilla y MeasureIt, pero el cierre es el mejor, la verdad para mi el desarrollo web se divide A.FB(Ates de Firebug) D.FB (Después de Firebug), nos ayuda prácticamente a desmembrar una web y conocer todos los secretos que hay en ella.. una muy buena herramienta para debugear y otras cosas si sabes que hacer con toda la información (6) que te da firebug

Victor Montol

Muy buen articulo! Claro y sencillo, sobre todo por las extensiones de accesibilidad, no las conocía…
Particularmente desinstalé el MeasureIt porque suelo ‘medir’ con el ruler integradoen Web Developer, y tambien uso “Open With” (https://addons.mozilla.org/es-ES/firefox/addon/11097) para sustituir el famoso IETab y similares. User Agent Switcher no acaba de convencerme, ya que en principio sólo hago uso de el a la hora de “mobilizar” el diseño xD y me parece más práctico hacerlo con las opciones de desarrollador de Safari. Sobre gustos…

Un saludo!

Firebug imagino que todo el mundo que “sepa” un poco lo tendrá instalado… pero algunas extensiones enfocadas en cosas concretas, como formularios, control de parámetros de página, etc.. son realmente potentes :)

Sante

Para depurar cookies también está Firecookie (https://addons.mozilla.org/es-ES/firefox/addon/6683/), que funciona como una extensión de Firebug.

javier gallegos
geO

bien explicado el articulo, gracias por sus aportes

Tambien fireQuery no debe faltar si desarrollas con ésta Libreria…..