10 herramientas útiles para desarrolladores de Firefox que debes saber

Firefox es el "navegador del desarrollador" y tiene muchas herramientas excelentes para ayudarnos a facilitar nuestro trabajo. Puede encontrar más información sobre su colección de herramientas en la página web Herramientas para desarrolladores de Firefox y también puede probar su navegador Developer Edition, que tiene más funciones y herramientas que se están probando.

Para esta publicación, he enumerado 10 herramientas útiles puede que te guste de su colección de herramientas para desarrolladores. También he demostrado qué pueden hacer estas herramientas con los GIF y cómo acceder a ellos para una referencia rápida.

1. Ver reglas horizontales y verticales

Herramienta Firefox - regla

Firefox tiene una herramienta de regla que muestra reglas horizontales y verticales con unidades de píxeles en la pagina. La herramienta es útil para organizar sus elementos en la página.

Para acceder a las reglas a través del menú:

  1. Ve a: ☰> Desarrollador > Barra de herramientas para desarrolladores (atajo: Cambio + F2)
  2. Una vez que la barra de herramientas aparece en la parte inferior de la página, escriba rulers.
  3. Pess Entrar.

Para que esto aparezca en la ventana de herramientas del desarrollador:

  1. Vaya a "Opciones de Toolbox".
  2. En la sección "Botones disponibles de Toolbox", marque la casilla "Alternar reglas para la página"casilla de verificación.

2. Tome capturas de pantalla usando selectores CSS

Herramienta Firefox: captura de pantalla

Aunque la barra de herramientas de Firefox te permite tomar capturas de pantalla de la página completa o partes visibles, en mi opinión, el método selector de CSS es más útil para capturar capturas de pantalla de elementos individuales así como para elementos que son visibles al pasar el mouse solo (como menús).

Para tomar capturas de pantalla a través del menú:

  1. Ve a ☰> Desarrollador > Barra de herramientas para desarrolladores (atajoCambio + F2)
  2. Una vez que la barra de herramientas aparece en la parte inferior de la página, escriba screenshot --selector any_unique_css_selector.
  3. prensa entrar.

Para que esto aparezca en la ventana de herramientas del desarrollador:

  1. Haga clic en "Opciones de Toolbox" y en la sección "Botones disponibles de Toolbox".
  2. Verificar "Tomar una captura de pantalla de página completa " caja.

3. Elige colores de las páginas web

Herramienta Firefox - colorpicker

Firefox tiene una herramienta de selección de color incorporada con el nombre de "Cuentagotas".

Para acceder a la herramienta "Cuentagotas" a través del menú, vaya a ☰> Desarrollador > Cuentagotas.

Para que esto aparezca en la ventana de herramientas del desarrollador: haga clic en "Opciones del cuadro de herramientas" y en la sección "Botones disponibles del cuadro de herramientas" marque "Toma un color de la página"casilla de verificación.

4. Ver diseño de página en 3D

Herramienta Firefox - vista 3d

Ver páginas web en 3D ayuda con los problemas de diseño. Podrá ver los diferentes elementos en capas con mucha más claridad en la vista 3D. Para ver la página web en 3D, haga clic en el botón de herramienta "Vista 3D".

Para que esto aparezca en la ventana de herramientas del desarrollador, haga clic en "Opciones de Toolbox" y en la sección "Botones disponibles de Toolbox" marque la casilla "Vista 3D"casilla de verificación.

5. Ver el estilo del navegador

Herramienta Firefox - estilo de navegador

Los estilos del navegador constan de dos tipos: el estilo predeterminado que asigna un navegador para cada elemento y los estilos específicos del navegador (los que tienen el prefijo del navegador). Echando un vistazo a los estilos del navegador podrás diagnosticar cualquier problema de anulación en su hoja de estilo y también conocer cualquier estilo específico de navegador existente.

Para acceder a "Estilos del navegador" a través del menú:

  1. Ve a ☰> Desarrollador > Inspector.
  2. Haga clic en la pestaña "Computado" en la sección derecha.
  3. Marque la casilla de verificación "Estilos del navegador".

También puedes abrir el "Inspector"pestaña a través del atajo Ctrl +Cambio + do y luego accediendo a "Estilos del navegador".

6. Desactivar JavaScript para la sesión actual

Herramienta Firefox: deshabilita JS

Para una mejor práctica y compatibilidad con el lector de pantalla, siempre se recomienda codificar cualquier sitio web de tal manera que su funcionalidad no se vea obstaculizada en un entorno con JavaScript deshabilitado. Para probar dichos entornos, puede deshabilite el JavaScript para la sesión en la que está trabajando.

Para deshabilitar JavaScript para la sesión actual, haga clic en "Opciones de Toolbox" y en la sección "Configuración avanzada" marque la casilla "Deshabilitar JavaScript* "casilla de verificación.

7. Ocultar el estilo CSS de la página

Herramienta Firefox - deshabilitar estilo

Al igual que JavaScript, debido a problemas de accesibilidad, es mejor diseñar sitios web de tal manera que las páginas deberían ser legibles incluso sin ningún estilo. Para ver cómo se ve la página sin ningún estilo, puede deshabilitarlos en las herramientas del desarrollador.

Para eliminar cualquier estilo CSS (en línea, interno o externo) aplicado en una página web, solo haga clic en el símbolo del ojo de las hojas de estilo enumeradas en la pestaña "Editor de estilos". Haga clic de nuevo para volver a la vista original.

Para acceder al "Editor de estilos" a través del menú, vaya a ☰> Desarrollador > Editor de estilo (atajo: Cambio + F7.

8. Vista previa de la respuesta de contenido HTML a una solicitud

Herramienta de Firefox: respuesta de vista previa

Las herramientas para desarrolladores de Firefox tienen una opción para Vista previa de las respuestas de tipo de contenido HTML. Esto ayuda al desarrollador a obtener una vista previa de los redireccionamientos 302 y verificar si se ha presentado o no información confidencial en la respuesta.

Para acceder a "Vista previa" a través del menú:

  1. Ve a ☰> Desarrollador > Red (atajo: Ctrl +Cambio + Q.
  2. Abra la página web de su elección o vuelva a cargar la página actual, haga clic en el solicitud deseada (con respuesta HTML) de la lista de solicitudes.
  3. Haga clic en el "Avance"en la sección derecha.

9. Vista previa de la página web en diferentes tamaños de pantalla

Herramienta Firefox: receptiva

Para probar la capacidad de respuesta de una página web, utilice la "Vista de diseño receptivo", a la que puede acceder ☰> Desarrollador > Vista de diseño receptivo o con el atajo: Ctrl +Cambio + METRO.

Para que aparezca el botón de la herramienta "Modo de diseño receptivo", haga clic en "Opciones de la caja de herramientas" y en la sección "Botones disponibles de la caja de herramientas", marque la casilla de verificación "Modo de diseño receptivo".

10. Ejecute JavaScript en las páginas

Herramienta Firefox: receptiva

Para ejecuciones rápidas de JavaScript en cualquier página web, simplemente use la herramienta "Scratchpad" de Firefox. Para acceder a "Scratchpad" a través del menú, vaya a; ☰> Desarrollador > Scratchpad o use el atajo de teclado Cambio + F4.

Para que el botón de la herramienta "Bloc de notas" aparezca en la ventana de herramientas del desarrollador para un uso rápido: haga clic en "Opciones de caja de herramientas"y debajo de"Botones de caja de herramientas disponibles"verifique la sección" Bloc de notas " caja.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *