10 herramientas útiles para desarrolladores de Firefox que deberías saber
Firefox es el "navegador del desarrollador" y tiene muchas herramientas excelentes para ayudar a que nuestro trabajo sea más fácil. Puede encontrar más información 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 características y herramientas que se están probando.
Para este post, 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, además de cómo acceder a ellos para una referencia rápida.
1. Ver reglas horizontales y verticales.
Firefox tiene una herramienta de regla que Muestra reglas tanto horizontales como 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ú, vaya a: ☰> Desarrollador > Barra de herramientas del desarrollador (atajo: Shift + F2). Una vez que aparezca la barra de herramientas en la parte inferior de la página, escriba gobernantes y presione Entrar.
Para que aparezca en la ventana de herramientas del desarrollador, vaya a "Opciones de la caja de herramientas". En la sección "Botones de la caja de herramientas disponibles", marque la casilla "Alternar reglas para la página"casilla de verificación.
2. Tomar capturas de pantalla utilizando los selectores de CSS
Aunque la barra de herramientas de Firefox le permite tomar capturas de pantalla de la página completa o partes visibles, en mi opinión, el método de selección de CSS es más útil para capturar Capturas de pantalla de elementos individuales. asi como para Elementos que son visibles en el mouse-hover solo (como menús).
Para hacer capturas de pantalla a través del menú, vaya a ☰> Desarrollador > Barra de herramientas del desarrollador (shortcutShift + F2). Una vez que aparezca la barra de herramientas en la parte inferior de la página, escriba captura de pantalla --selector any_unique_css_selector y presione entrar.
Para que aparezca en la ventana de herramientas del desarrollador: haga clic en "Opciones de la caja de herramientas" y en la sección "Botones de la caja de herramientas disponibles", marque "Tomar una captura de pantalla de página completa " caja.
3. Escoger colores de las páginas web.
Firefox tiene una herramienta de selección de color incorporada con el nombre de "Eyedropper". Para acceder a la herramienta "Cuentagotas" a través del menú, vaya a ☰> Desarrollador > Cuentagotas.
Para que esto aparezca en la ventana de herramientas para desarrolladores: haga clic en "Opciones de la caja de herramientas" y en la sección "Botones de la caja de herramientas disponibles" marque "Toma un color de la página."casilla de verificación.
4. Ver diseño de página en 3D
Ver páginas web en 3D ayuda con problemas de diseño. Podrás ver los diferentes elementos en capas mucho más claramente en la vista 3D. Para ver la página web en 3D, haga clic en el botón de la herramienta "Vista 3D".
Para que aparezca en la ventana de herramientas del desarrollador, haga clic en "Opciones de la caja de herramientas" y en la sección "Botones de la caja de herramientas disponibles", marque la casilla "Vista 3D"casilla de verificación.
5. Ver el estilo del navegador
Los estilos de navegador constan de dos tipos: el estilo predeterminado que un navegador asigna para 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 diagnostica cualquier problema de anulación en tu 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ú, vaya a ☰> Desarrollador > Inspector. Luego haga clic en la pestaña "Calculado" en la sección derecha y marque la casilla de verificación "Estilos del navegador".
También puede abrir el "Inspector"desplácese por el acceso directo Ctrl + Shift + C y luego acceda a" Estilos de navegador ".
6. Desactivar JavaScript para la sesión actual
Para las mejores prácticas y la compatibilidad del 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 tales entornos, puedes Deshabilita el JavaScript para la sesión en la que estás trabajando..
Para deshabilitar JavaScript para la sesión actual, haga clic en "Opciones del cuadro de herramientas" y en la sección "Configuración avanzada", marque la casilla "Desactivar JavaScript* "casilla de verificación.
7. Ocultar el estilo CSS de la página.
Al igual que JavaScript, debido a problemas de accesibilidad, lo mejor es diseñar sitios web de tal manera que Las páginas aún deben ser legibles incluso sin ningún estilo.. Para ver cómo se ve la página sin ningún estilo, puede deshabilitarla en las herramientas del desarrollador..
Para eliminar cualquier estilo CSS (en línea, interno o externo) aplicado en una página web, simplemente Haga clic en el símbolo de ojo de las hojas de estilo enumeradas. en la pestaña "Editor de estilo". Vuelve a hacer clic para volver a la vista original..
Para acceder al "Editor de estilo" a través del menú, vaya a ☰> Desarrollador > Editor de estilo (atajo: Shift + F7.
8. Vista previa de la respuesta del contenido HTML a una solicitud
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 cualquier redireccionamiento 302 y verificar si se ha procesado o no información confidencial en la respuesta.
Para acceder a "Vista previa" a través del menú, vaya a ☰> Desarrollador > Red (atajo de teclado: Ctrl + Shift + Q. Luego abra la página web de su elección o vuelva a cargar la página actual, haga clic en solicitud deseada (con respuesta HTML) De la lista de solicitudes y haga clic en "Avance"pestaña en la sección derecha.
9. Vista previa de la página web en diferentes tamaños de pantalla
Para probar la capacidad de respuesta de una página web, utilice la "Vista de diseño sensible", a la que se puede acceder mediante ☰> Desarrollador > Vista de diseño responsivo o con el atajo: Ctrl + Shift + M.
Para que aparezca el botón de la herramienta "Modo de diseño sensible", 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 sensible".
10. Ejecutar JavaScript en las páginas
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 > 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 debajo de la"Botones de la caja de herramientas disponibles"sección compruebe el" bloc de notas " caja.
