Firefox sigue siendo "el navegador del desarrollador", y por eso cuenta con muchas herramientas para ayudarnos a que nuestro trabajo sea más fácil. Puedes encontrar más información sobre la colección de herramientas de Firefox en la página web de Firefox Developer Tools y también puedes probar su navegador Developer Edition que tiene más funciones y herramientas que aún se están testeando.
Para este artículo, os he enumerado 10 útiles herramientas que seguramente te gusten de su colección de herramientas para desarrolladores. Esperamos que dichas herramientas sean de tu agrado. ¿Comenzamos?
Ver reglas horizontales y verticales
Firefox cuenta con una herramienta regla que muestra unas regla en horizontal y en vertical con medidor de píxeles en la página. La herramienta es muy útil para distribuir los elementos en la página. Para acceder a las reglas a través del menú, vete a: ☰ > Developer > Developer Toolbar (atajo: Shift + F2). Una vez que la barra de herramientas aparezca en la parte inferior de la página, escribe rulers y presiona Enter.
Para que esto aparezca en la ventana de herramientas para desarrolladores, vete a "Toolbox Options". Debajo de la sección "Available Toolbox Buttons", marca la casilla de "Toggle ruler for the page".
Tomar capturas de pantalla utilizando selectores de CSS
Aunque la barra de herramientas de Firefox te permite tomar capturas de pantalla de la página, tanto de la página completa o solo de las partes visibles, en mi opinión, el método de los selectores de CSS es más útil para capturar imágenes de elementos individuales, así como para elementos que solo son visibles cuando se hace hover (como los menús).
Para realizar capturas de pantalla mediante el menú, vete a ☰ > Developer > Developer Toolbar (atajo Shift + F2). Una vez que la barra de herramientas aparezca en la parte inferior de la página, escribe screenshot --selector any_unique_css_selector y pulsa Enter.
Para que esto aparezca en la ventana de herramientas para desarrolladores, vete a "Toolbox Options". Debajo de la sección "Available Toolbox Buttons", marca la casilla de "Take a fullpage screenshot".
Capturar color en páginas web
Firefox cuenta con un selector de color incorporado con el nombre de "Eyedropper" o cuentagotas. Para acceder a la herramienta "Eyedropper" a través del menú de vete a ☰ > Developer > Eyedropper.
Para que esto aparezca en la ventana de herramientas para desarrolladores, vete a "Toolbox Options". Debajo de la sección "Available Toolbox Buttons", marca la casilla de "Grab a color from the page".
Ver el diseño de una página en 3D
Ver páginas web en 3D ayuda a resolver problemas de diseño. Podrás ver los distintos elementos en capas de manera más clara con la vista 3D. Para ver una página web en 3D, haz clic en el botón "3D View".
Para que esto aparezca en la ventana de herramientas para desarrolladores, vete a "Toolbox Options". Debajo de la sección "Available Toolbox Buttons", marca la casilla de "3D View".
Ver los estilos del navegador
Los estilos de navegador consisten en dos tipos: el estilo por defecto que un navegador asigna a cada elemento, y los estilos específicos del navegador (los que tienen el prefijo del navegador). Al echar un vistazo a los estilos del navegador podrás diagnosticar cualquier problema de anulación en tu hoja de estilo y también llegar a conocer de cualquiera de los estilos específicos de los navegadores actuales.
Para acceder a los estilos del navegador a través del menú, vete a ☰ > Developer > Inspector. A continuación, haz clic en la pestaña "Computed" que se encuentra a la derecha y marca la casilla "Browser styles".
También puedes abrir la pestaña "Inspector" a través de la combinación de teclas Ctrl + Shift + C y luego accediendo a "Browser styles".
Desactivar JavaScript en la sesión actual
Para una mejor experiencia del usuario se aconseja siempre implementar cualquier sitio web de tal manera que su funcionamiento no se vea obstaculizado en un entorno en donde Javascript esté deshabilitado. Para probar este tipo de entornos puedes deshabilitar JavaScript en la sesión en la que estás trabajando.
Para deshabilitar JavaScript para la sesión actual haz clic en "Toolbox Options", y en la sección "Advanced settings", marca la casilla "Disable JavaScript *".
Ocultar el CSS de la página
Al igual que con JavaScript, para una mejor experiencia del usuario se aconseja diseñar los sitios web de tal manera que las páginas puedan ser aún legibles, a pesar de no tener estilos. Para ver cómo queda tu página sin ningún estilo, puede desactivarlos a través de las herramientas de desarrollo.
Para eliminar cualquier estilo CSS (online, interno o externo) que se aplique en la página web, haz clic en el símbolo del ojo en el listado de hojas de estilo que figuran en la pestaña "Style Editor". Haz clic de nuevo en el ojo para volver a la vista original.
Para acceder al editor de estilos a través del menú, vete a ☰ > Developer > Style Editor (atajo: Mayús + F7).
Ver el contenido HTML de una respuesta a una solicitud
Las herramientas para desarrolladores de Firefox tienen una opción para previsualizar las respuestas de contenido HTML. Esto ayuda al desarrollador a previsualizar las redirecciones 302 y comprobar si existe información importante en la respuesta.
Para acceder a la vista previa a través del menú, vete a ☰ > Developer > Network (atajo: Ctrl + Shift + P). A continuación, abre la página web que quieras o recarga la actual, haz clic en la solicitud deseada (con respuesta HTML) de la lista de solicitudes y después, pincha en la pestaña "Preview" que está a la derecha.
Vista previa de página web en diferentes tamaños de pantalla
Para probar la capacidad responsive de una página, lo mejor es utilizar el "Responsive Design View", al cual se puede acceder por ☰ > Developer > Responsive Design View o con el atajo: Ctrl + Shift + M.
Para que aparezca el botón "Responsive Design Mode", haz clic en "Toolbox Options" y en la sección "Available Toolbox Buttons", marca la casilla "Responsive Design Mode".
Ejecutar JavaScript en páginas
Para ejecutar sentencias de Javascript rápidas en cualquier página web sólo tienes que utilizar la función "Scratchpad" de Firefox. Para acceder a "Scratchpad" a través del menú, vete a ☰ > Developer > Scratchpad, o utilizar la combinación de teclas Shift + F4.
Para hacer que el botón de la herramienta "Scratchpad" aparezca en la ventana de herramientas para desarrolladores haz clic en "Toolbox Options" y en la sección "Available Toolbox Buttons," marca la casilla "Scratchpad".
Fuente: hongkiat.com