Crea el perfil de desarrollo web Ultimate Firefox

Cuando se configura correctamente, Firefox puede convertirse en la mejor herramienta de desarrollo web, brindándole acceso directo a la página en la que está trabajando para que pueda diseñar su página en tiempo real, depurar javascript o incluso editar el html..

Crear un perfil separado para el desarrollo web

La instalación de todas estas herramientas de desarrollo convertirá a Firefox en un navegador muy pesado, por lo que primero debemos crear un nuevo perfil para Firefox..

Puede iniciar un perfil separado al mismo tiempo que su perfil normal creando un nuevo acceso directo con estos argumentos, reemplazando WebDev con el nombre de su perfil. También hay una explicación más detallada de cómo hacer esto..

firefox.exe -P WebDev -no-remoto

Ahora que tienes Firefox configurado con un perfil separado solo para el desarrollo web, echemos un vistazo a las extensiones que podemos usar para hacer de Firefox la mejor herramienta de desarrollo web..

Must-Have Web Dev Extensions

Estas son todas las extensiones que uso regularmente para el desarrollo web.

Firebug

Firebug es la extensión más poderosa para depurar javascript, ver CSS y html. Puede realizar cambios dinámicos en el código y CSS, y utilizarlo para depurar su código Ajax. Es realmente la mejor extensión que hay.

Extensión de desarrollador web

Una de las mejores extensiones para x años consecutivos. Esto es imprescindible para cualquier desarrollador, pero ya lo has oído..

Extensión de Aardvark

Esta extensión es una extensión muy ligera que le mostrará fácilmente los elementos en la página y su clase / id asignada. Es más fácil de usar que la extensión para desarrolladores web para esos momentos en que solo necesita la información rápida de un elemento. También puedes usarlo para eliminar elementos de la página..

Colorzilla

Seleccionar colores fácilmente. No más dolor por encontrar colores incrustados en algún lugar de una hoja de estilo.

Ver código fuente con

Puede configurar varios perfiles de fuente de vista para abrir la fuente en diferentes aplicaciones.

Validador de HTML

Esta extensión le permite validar fácilmente el HTML de su página y se instala en el panel Ver código fuente.

Greasemonkey

No es exactamente una extensión para desarrolladores web, pero Greasemonkey es impresionante, sobre todo por la capacidad de automatizar acciones que se realizan comúnmente, lo que es un gran ahorro de tiempo para los desarrolladores web..

Mídelo

Mida fácilmente una distancia en la pantalla con esta extensión. Una vez que haya medido un área, puede arrastrar el rectángulo alrededor de la pantalla para usar como una comparación.

Vista IE / IE Tab / OperaView / FirefoxView / Vista de safari / IE View Lite

Estas extensiones (elija su opción) le permiten ver fácilmente la página actual en diferentes navegadores. IE Tab incluso te permitirá ejecutar IE dentro de una pestaña, si así lo quisieras.

Botón Borrar caché

Borra el caché. Especialmente útil para comprobar nuevos cambios de CSS..

Reinicie Firefox

La extensión Reiniciar Firefox es muy útil para cerrar y reiniciar Firefox con todas las pestañas y sesiones intactas.

Tab Mix Plus

La extensión Tab Mix Plus es una gran extensión en general, pero tiene algunas características esencialmente útiles para los desarrolladores web: Duplicar pestaña y Copiar URL de pestaña.

YSlow

La extensión YSlow es una nueva extensión de Yahoo que analizará su página y le dirá dónde está cometiendo errores. Incluso te dará una calificación en el rendimiento de tu sitio. Notará el pequeño indicador en la esquina inferior derecha ... le indica el tamaño total de su página y el tiempo de carga. Extensión muy útil, pero requiere la extensión Firebug.

Maniquí Lorem Ipsum

La extensión del generador Dummy Lipsum generará contenido ficticio para usted basado en el famoso texto de Lorem Ipsum que es muy útil para presentar contenido falso en su sitio.

Captura de pantalla!

La extensión de Screengrab le permitirá tomar capturas de pantalla de páginas, pero puede hacer algo que una herramienta de captura de pantalla normal no puede: puede tomar una imagen de toda la página, no solo la parte visible.

 

Hay muchas otras extensiones que puedes usar, pero estas son las mejores de todas las que he visto. Si tiene otra extensión que usa regularmente, deje una mención en los comentarios.

En este punto, ahora has convertido a Firefox en la mejor herramienta de desarrollo web. Tómese el tiempo para aprender a usar Firebug especialmente.