A continuación se presentan características y consejos para usar las Herramientas para desarrolladores de Firefox. Algunos de ellos son similares a las capacidades de las herramientas en Chrome, para algunos no hay análogos en otros navegadores.

¡Atención, debajo del corte hay muchos gifs pesados!

Inspector

Búsqueda de selector de CSS

Es muy conveniente de usar para:

• elementos con `z-index` en los que no se puede hacer clic
• visualmente los mismos elementos para los que conoce el selector

Filtro de estilo

Puede filtrar las reglas CSS por cualquier selector o propiedad.

Para los selectores, el filtro resalta los selectores en la lista de reglas. Para las propiedades, la herramienta expandirá todas las propiedades que contienen su filtro, las resaltará con color y también ocultará las reglas donde no hay propiedades del filtro.

Selector de color y cuentagotas

Haga clic en cualquier punto con color en el inspector para abrir una herramienta conveniente.

Cambiar representaciones de color

Shift + clic en un punto de color le permite cambiar la representación del color (nombre / hexadecimal / hsl / rgb).

Shift + clic en un punto cerca de la esquina le permite cambiar las unidades del ángulo.

Edición de funciones de curvas de tiempo de Bezier

Haga clic en un punto con una línea curva al lado de la propiedad de la función de tiempo para abrir un editor conveniente. Habrá funciones predefinidas y la capacidad de configurar manualmente su versión.

Consola

Aplicación CSS

console.log(“#%c%s%c%s”, “color: #bada55”, “dev”, “color: #c55”, “tricks”) 

No todas las propiedades son compatibles, pero sí bastante .

Búsqueda de historia

Presione CTRL + R en Mac (y F9 en Windows y Linux). Luego use CTRL + R / CTRL + S ( F9 / SHIFT + F9 ) para desplazarse hacia adelante / hacia atrás. A diferencia de las flechas, los atajos de teclado anteriores funcionarán entre sesiones.

Captura de pantalla de una página o su elemento.

 :screenshot — fullpage :screenshot — selector .css-selector 

Es mucho más conveniente simplemente especificar el selector que intentar seleccionar con precisión el área deseada con el mouse.

Cambio de contexto de JavaScript

 cd(iframe) 

Puede cambiar al contexto de iframe seleccionando con cd () .

Etiquetas de temporizador

 console.time(“#devtricks”) console.timeEnd(“#devtricks”) 

Inicie el temporizador - console.time ("etiqueta") ,

deténgalo: console.timeEnd ("etiqueta") .

Depurador de JavaScript

Puntos de interrupción condicionales

Para crear un punto, haga clic derecho en el número de línea. El punto estará activo solo si se cumple la condición.

Buscar por nombre de función o número de línea

La búsqueda del nombre del archivo es CMD + P en Mac (y CTRL + P en Windows y Linux).

Escriba " @" en la misma entrada para buscar por declaración de función en el archivo.

Escriba ": " en la misma entrada para llegar rápidamente a la línea por su número.

Hermosa salida de código minificado

Haga clic en el icono {} para ver un código hermoso en lugar de uno minificado.

Puntos de interrupción de URL

El punto se activará cuando intente acceder a la url y muestre el código responsable de acceder a ella.

Deshabilitar puntos de interrupción

Los puntos desactivados permanecerán disponibles para su inclusión y uso futuro.

Red

Edición y reenvío de solicitudes HTTP

Edite las solicitudes enviadas y vuelva a enviarlas.

Filtro de consulta

El filtro de dominio es CMD + F en Mac (o CTRL + F en Windows y Linux).

Si necesita encontrar todas las consultas sin un dominio , agregue un guión ( - ) delante del filtro.

Límite de velocidad

Compruebe cómo se cargará el sitio cuando Internet sea lento.

Perfiles de frío / calor

Haga clic en el icono del temporizador para ver el rendimiento de la consulta que realiza el sitio. La página se cargará dos veces, sin un caché (emulando la primera carga) y con un caché (emulando una llamada repetida).

Guardar / cargar HAR

Guardamos las solicitudes perfectas en el formato de archivo . Conveniente para compartir con otros desarrolladores.

Diseño receptivo

Dispositivo personalizado

Vea cómo el sitio buscará dispositivos con resolución personalizada.

Límite de velocidad

Estamos viendo la descarga de la versión móvil en la velocidad de Internet móvil.

Emulación de tachi

Un pequeño icono con una "mano" es responsable de esto. Emulado, incluyendo tapas largas.

Cambiar agente de usuario

No olvide habilitar la opción "Volver a cargar la página al cambiar UA" en la configuración: ahorre tiempo.

Alineación de ventana izquierda

Conveniente si desea colocar paneles a la derecha (por ejemplo, para depurar).

Inspector de almacén

Edición de cookies

Haga doble clic en la celda cuyo valor desea cambiar.

Eliminación de cookies

La forma más fácil de eliminar las cookies es seleccionándolas y haciendo clic en Backsapce.

Presta atención a las opciones del menú contextual. La opción "Eliminar todo para un dominio" es muy conveniente, pero tenga en cuenta que el dominio debe ser preciso (es decir, eliminar las cookies para .medium.com no las eliminará para medium.com )

Cookies de cambio en tiempo real

Las cookies que se acaban de cambiar parpadean en naranja.

Instantáneas estáticas para IndexedDB

No podrá ver los cambios en los registros IndexedDB en tiempo real, por lo tanto, use el botón Actualizar para obtener la instantánea de la base de datos más actualizada.

Cambiar las columnas de la tabla mostradas

Hacer clic con el botón derecho en el encabezado de la tabla ayudará a ocultar columnas poco interesantes.

Eso es todo ¡Espero que los consejos hayan sido útiles!