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.
Cree 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 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 un explicación más detallada de cómo hacer esto.
firefox.exe -P WebDev -no-remoto
Ahora que tiene Firefox configurado con un perfil separado solo para el desarrollo web, echemos un vistazo a las extensiones que podemos usar para convertir Firefox en la herramienta de desarrollo web definitiva.
Extensiones de desarrollo web imprescindibles
Todas estas son extensiones que utilizo regularmente para el desarrollo web.
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 usarlos para depurar su código Ajax. Realmente es la mejor extensión que existe.
Extensión de desarrollador web
Una de las mejores extensiones durante x años consecutivos. Esto es imprescindible para cualquier desarrollador, pero ya ha oído hablar de él.
Esta extensión es una extensión muy liviana que le mostrará fácilmente los elementos en la página y su clase / id asignada. Es más sencillo de usar que la extensión para desarrolladores web para aquellos momentos en los que solo necesita la información rápida de un elemento. También puede usarlo para eliminar elementos de la página.
Selecciona colores fácilmente. No más dolor de encontrar colores incrustados en algún lugar de una hoja de estilo.
Puede configurar varios perfiles de fuente de visualización para abrir la fuente en diferentes aplicaciones.
Esta extensión le permite validar fácilmente el HTML de su página y se instala en el panel Ver código fuente.
No es exactamente una extensión para desarrolladores web, pero Greasemonkey es increíble, sobre todo por la capacidad de automatizar las acciones que se realizan con frecuencia, lo que ahorra mucho tiempo a los desarrolladores web.
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 usarlo como comparación.
Vista de IE / Pestaña IE / OperaView / FirefoxView / Vista de Safari / IE View Lite
Estas extensiones (elija) le permiten ver fácilmente la página actual en diferentes navegadores. IE Tab incluso le permitirá ejecutar IE dentro de una pestaña, si así lo desea.
Borra la caché. Especialmente útil para comprobar nuevos cambios de CSS.
La extensión Reiniciar Firefox es muy útil para cerrar y reiniciar Firefox con todas las pestañas y sesiones intactas.
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.
La extensión YSlow es una nueva extensión de Yahoo que analizará tu página y te dirá dónde estás cometiendo errores. Incluso le dará una calificación sobre el rendimiento de su sitio. Notará el pequeño indicador en la esquina inferior derecha ... le indica el tamaño total de su página, así como el tiempo de carga. Extensión muy útil, pero requiere la extensión Firebug.
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 diseñar contenido falso en su sitio.
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 hacer: puede tomar una imagen de toda la página, no solo de la parte visible.
Hay muchas otras extensiones que puede 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, ha convertido a Firefox en la herramienta de desarrollo web definitiva. Tómese el tiempo para aprender a usar Firebug especialmente.
