10 herramientas útiles para desarrolladores de Firefox que debe conocer

Firefox, que es el “navegador de los desarrolladores”, tiene muchas herramientas excelentes para ayudarnos a hacer nuestro trabajo más fácil. Puede encontrar más sobre su colección de herramientas en la página web de 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 que le pueden gustar de su colección de herramientas para desarrolladores. También he demostrado lo que estas herramientas pueden hacer con GIF y cómo acceder a ellas para una referencia rápida.

1. Ver reglas horizontales y verticales

Firefox>muestra> en la página. La herramienta es útil para organizar sus elementos en la página.

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

  1. Vaya a: ☰> Desarrollador > Barra de herramientas para desarrolladores (acceso directo: Mayús + F2 ).
  2. Una vez que la barra de herramientas aparezca en la parte inferior de la página, escriba rulers.
  3. Pess Enter .

Para que esto aparezca en la ventana de herramientas para desarrolladores:

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

2. Toma capturas de pantalla con selectores CSS

Aunque>capturas> , así como para elementos que son visibles solo al pasar el mouse (como menús).

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

  1. Ve a ☰> Desarrollador > Barra de herramientas para desarrolladores (atajo Shift + F2 ).
  2. Una vez que la barra de herramientas aparezca en la parte inferior de la página, escriba screenshot –selector any_unique_css_selector.
  3. Presione enter .

Para que esto aparezca en la ventana de herramientas para desarrolladores:

  1. Haga clic en “Opciones de la caja de herramientas” y en la sección “Botones disponibles de la caja de herramientas”.
  2. Marque la casilla de verificación ” Tomar una captura de pantalla de página completa” .

3. Elija colores de páginas web

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

Para que esto aparezca en la ventana de herramientas de desarrollador: 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 ” Coger un color de la página “.

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

Ver>>Para que esto aparezca en la ventana de herramientas del desarrollador, 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 ” Vista 3D “.

5. Ver el estilo del navegador

Los>diagnosticar> y también conocerá los estilos específicos del navegador existentes.

Para acceder a “Estilos de navegador” a través del menú:

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

También puede abrir la pestaña ” Inspector ” a través del atajo Ctrl + Shift + C y luego acceder a “Estilos del navegador”.

6. Deshabilite JavaScript para la sesión actual

Para>deshabilitar> .

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

7. Ocultar el estilo CSS de la página

Al>las> . Para ver cómo se ve la página sin ningún estilo, puede deshabilitarlos en las herramientas de desarrollo.

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

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

8. Obtenga una vista previa de la respuesta de contenido HTML a una solicitud

Las>obtener>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. Ir a ☰> Desarrollador > Red (acceso directo: Ctrl + Shift + Q .
  2. Abra la página web de su elección o vuelva a cargar la página actual, haga clic en la solicitud deseada (con respuesta HTML) de la lista de solicitudes.
  3. Haga clic en la pestaña ” Vista previa ” en la sección derecha.

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

Para>Desarrollador>Responsive Design Ver o con el acceso directo: Ctrl + Shift + M .

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

10. Ejecute JavaScript en las páginas

Para>Desarrollador>Bloc de notas o use el atajo de teclado Shift + F4 .

Para hacer 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 la caja de herramientas ” y en la sección ” Botones de la caja de herramientas disponibles ” marque la casilla de verificación “Bloc de notas” .

Deja un comentario

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