24Aug
Cuando se configura correctamente, Firefox puede convertirse en la mejor herramienta de desarrollo web, dá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 deberíamos crear un nuevo perfil para Firefox.
Puede lanzar un perfil separado al mismo tiempo que su perfil regular creando un nuevo atajo 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-remote
Ahora que tiene Firefox configurado con un perfil separado solo para desarrollo web, echemos un vistazo a las extensiones que podemos usar para convertir a Firefox en la mejor herramienta de desarrollo web.
Extensiones Web Dev imprescindibles
Estas son todas las extensiones que utilizo 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 usarlo para depurar su código Ajax. Es realmente la mejor extensión que hay.
Web Developer Extension
Una de las mejores extensiones por x años consecutivos. Esta es una herramienta imprescindible para cualquier desarrollador, pero ya has oído hablar de ella.
Aardvark Extension
Esta extensión es una extensión muy liviana que le mostrará fácilmente los elementos en la página y su clase / identificación asignada. Es más fácil de usar que la extensión de desarrollador web para aquellos momentos en los que solo necesitas la información rápida para un elemento. También puede usarlo para eliminar elementos de la página.
Colorzilla
Selecciona colores fácilmente. No más dolor de encontrar colores incrustados en alguna parte de una hoja de estilo.
Ver origen con
Puede configurar múltiples perfiles de origen de vista para abrir el origen en diferentes aplicaciones.
HTML Validator
Esta extensión le permite validar fácilmente el HTML de su página y se instala en el panel Ver fuente.
Greasemonkey
No es exactamente una extensión de desarrollador web, pero Greasemonkey es increíble, sobre todo por la capacidad de automatizar acciones realizadas comúnmente, 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 usarla como comparación.
IE Ver / IE Tab / OperaView / FirefoxView / Safari Ver / IE View Lite
Estas extensiones( elija) 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 deseas.
Borrar el botón de caché
Borra la caché.Especialmente útil para verificar nuevos cambios de CSS.
Restart Firefox
La extensión Restart 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 útiles para los desarrolladores web: Duplicate Tab y Copy Tab URL.
YSlow
La extensión YSlow es una nueva extensión de Yahoo que analizará su página y le indicará dónde está cometiendo los errores. Incluso le dará una calificación sobre el rendimiento de su sitio. Notarás el pequeño indicador en la esquina inferior derecha. .. te dice el tamaño total de tu página y el tiempo de carga. Extensión muy útil, pero requiere la extensión Firebug.
Dummy Lorem Ipsum
La extensión del generador Dummy Lipsum generará contenido ficticio basado en el famoso texto de Lorem Ipsum que es muy útil para diseñar contenido falso en su sitio.
Screengrab!
La extensión Screengrab te 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 ha convertido a Firefox en la mejor herramienta de desarrollo web. Tómese el tiempo para aprender a usar Firebug especialmente.