En los últimos años, Mozilla ha estado trabajando arduamente para volver a la ubicuidad y la participación de mercado que tenía antes de que Google Chrome se convirtiera en el navegador favorito de casi todos. Atrás quedaron los días en que Mozilla Firefox era la primera y única descarga con Safari, Internet Explorer o Microsoft Edge. Esa distinción se ha trasladado a Chrome. Y con Firefox Developer Edition, Mozilla no tiene nada de eso.
En caso de que no haya quedado claro por el nombre, Mozilla se dirige específicamente a desarrolladores y diseñadores web con Firefox Developer Edition. Uno de los grandes atractivos de Chrome son las fantásticas herramientas de desarrollo que vienen con el inspector. Puede profundizar en el sistema de archivos de los sitios web, jugar en la consola de JavaScript como si el sitio de otra persona fuera su propia caja de arena privada y probar el estilo y las herramientas en tiempo real.
Pero, ¿y si te dijera que Firefox Developer Edition también puede hacer eso… y más ?
Uno de los mayores obstáculos para usar la edición de desarrollo de Firefox es llegar a ella. Cuando te diriges a la página de inicio de Firefox, obviamente se te indica que descargues el bueno, viejo y cotidiano Firefox de consumo. Eso no es algo malo, especialmente con las mejoras que han hecho últimamente (creo que en realidad supera a Chrome para mis tareas diarias últimamente desde la actualización de Quantum ), pero no es por eso que estás aquí. Quieres la edición de desarrollo.
Por lo tanto, debe desplazarse hasta el pie de página hasta que encuentre el enlace Beta, Nightly, Developer Edition .
Está relativamente escondido, pero está bien. Este vale la pena, todos ustedes.
Entonces, una vez que lo haya encontrado, descárguelo e instálelo. Ya sabes que hacer.
En la superficie
Cuando inicias Firefox Developer Edition por primera vez, no hay nada especial. Cuando ve una foto de lado a lado de las versiones para desarrolladores y para consumidores, no hay mucha diferencia en la superficie.
Izquierda: Base Firefox; derecha: edición para desarrolladores
Pero realmente lo hay. Si bien ambas versiones se ejecutan de manera rápida y eficiente sobre la misma base, la mejor analogía que se me ocurre es que la edición para desarrolladores es como conducir un Tesla Model S, mientras que la edición para consumidores es similar a un Toyota Prius completamente equipado. Funcionan de manera similar en teoría, pero la aplicación práctica es muy diferente.
Continuando con la extraña analogía del automóvil eléctrico, Google Chrome sería como el Tesla Model X, la versión para el mercado masivo de la línea Tesla. Tiene muchas de las mismas características que el Model S, pero deben agregarse por separado (como complementos del navegador en este caso).
¡Características!
Si está acostumbrado a usar las herramientas de desarrollo de Chrome, probablemente esté acostumbrado a ir al menú y seleccionar Más herramientas -> Herramientas de desarrollo o hacer clic derecho en algo y seleccionar Inspeccionar elemento y ver la ventana dividida en varios paneles.
En algún lugar de esos nuevos paneles se encuentra prácticamente todo lo que necesita para un flujo de trabajo de desarrollo completo.
- Consola JavaScript
- Editor de estilo y CSS
- Fuentes de archivos
- actividad de la red
- Emulación y depuración de viewport/dispositivo
- Resaltado de elementos
- Otras cosas que he tenido que dejar de lado que están escondidas en diferentes menús
Ahora, comparemos el acceso a esas funciones con la edición de desarrollo de Firefox:
Como puede ver en esta imagen, Firefox presenta su menú mucho mejor. En Chrome, también hay acceso al menú, pero es una sola opción con todo dentro del propio panel de desarrollo. (Vea la imagen numerada arriba).
En Firefox, una vez que ingresa al modo Herramientas o Inspector , obtiene un panel similar al que ve en Chrome. En términos de preferencia personal, me gusta más el de Firefox, pero también trabajo en IDE de temática oscura.
Para mí, uno de los principales puntos de venta de Firefox Developer Edition es la facilidad de acceso a todas las herramientas en comparación con Chrome. Tal vez sea solo yo, pero me olvido de dónde están algunas de las opciones de Chrome, y Firefox las presenta de una manera mucho más fácil de usar. Además, están etiquetados en lugar de solo usar íconos, para que pueda encontrar las cosas más fácilmente.
(Ejemplo: un elemento de menú etiquetado como Modo de diseño receptivo en lugar de un ícono de un teléfono inteligente escondido en una esquina del panel de desarrollo. Consulte el número 5 en el ejemplo anterior ).
Complementos, Complementos Shmad
Probablemente el mayor beneficio en mi mente de la edición de desarrollo de Firefox es cómo el equipo de desarrollo de Mozilla siguió adelante y arrojó todo el fregadero de la cocina al navegador. Donde las herramientas de Chrome están incluidas en el navegador base (lo cual es increíble y muchas de las de Firefox también están en el navegador principal), la edición de desarrollo realmente no necesita complementos como Chrome para realizar tareas bastante básicas.
Hay cuatro que se destacan en mi mente.
- WebIDE
- Barra de herramientas para desarrolladores de la línea de comandos
- Bloc de notas de JavaScript
- Cuentagotas (selector de color)
Puede instalar cada uno de estos como una extensión en Chrome, pero generalmente son de terceros, lo que puede generar problemas de actualización a largo plazo, así como problemas de compatibilidad. Sin mencionar el soporte técnico.
Con las funciones integradas y respaldadas por Mozilla, eso no es un problema, realmente, y definitivamente puede contar con el soporte técnico disponible para usted. Mozilla lo mata en la documentación últimamente.
Personalmente, estoy más entusiasmado con un cuentagotas incorporado. Tomo colores todo el tiempo, y odio la mayoría de las extensiones de Chrome que he usado para ello. El de Firefox simplemente funciona. Y es perfecto en píxeles.
Además, el bloc de notas de JavaScript y WebIDE son adiciones increíbles para probar ideas, y ser ventanas emergentes es solo una característica de calidad de vida que hace que usarlos sea tan, tan agradable.
Y luego está la barra de herramientas del desarrollador, una pequeña y maravillosa interfaz de línea de comandos (CLI) que te permite hacer todo tipo de ingeniosos trucos que no puedes hacer en Chrome. Básicamente, les da a los nerds de CLI como yo (y probablemente a usted, si está leyendo esto) un poco más de control y eficiencia sobre cómo profundizamos en nuestros proyectos.
BateríasComplementos no incluidos
Eso no quiere decir que no haya complementos para Firefox. Al momento de escribir este artículo, hay una ventana adicional a la que puede acceder e instalar cualquiera de las 9 herramientas adicionales más especializadas. No todos necesitan las herramientas de Vue.js o React, pero están disponibles para quienes las necesitan.
Estas también son aplicaciones de terceros, así que tenlo en cuenta. Todos los problemas que mencioné anteriormente también son aplicables aquí. Dado que hay tan pocos aquí, y debido a que son tan especializados, no es como instalar una extensión CLI defectuosa para Chrome o una extensión no optimizada que bloquea su navegador.
Mi cosa favorita
No dedicaré mucho tiempo a esto, pero lo que me convenció inicialmente de la edición para desarrolladores del navegador fue lo increíble que era la herramienta de cuadrícula. Después de años de jugar con el resaltador de elementos de Chrome, la herramienta de cuadrícula en Firefox me hizo un converso.
Puede que no parezca mucho, pero cuando lo uses por un tiempo, verás por qué es increíble. (Y nuevamente, es algo predeterminado en lugar de tener que instalarlo a través de un complemento).
Entonces… ¿Firefox Developer Edition puede reemplazar a Google Chrome?
Eso depende. Como su conductor diario… no, probablemente no. Creo que el navegador Firefox principal puede hacerlo, pero la edición para desarrolladores se siente un poco más pesada y no tan ágil como el navegador Firefox normal. ¿Pero para tu rutina de desarrollo?
Abso-maldito-lutely . El único problema real con el que me he encontrado al incorporarlo en mi propio desarrollo es simplemente tener que cambiar de navegador para trabajar. Dado que Chrome es mi opción, a menudo solo mantengo un montón de ventanas y pestañas separadas abiertas y uso las herramientas de forma predeterminada allí.
Pero cuando los proyectos necesitan atención real a los detalles, y las cosas básicas que uso en Chrome no son suficientes, aparece el navegador de desarrollo Firefox.
¿Has usado Firefox Developer Edition? ¿Qué piensas al respecto?
Imagen destacada del artículo por gst / shutterstock.com