Soy usuario de Firebug desde hace mucho tiempo. Mi Firefox se actualizó a 51 hace muy poco y pronto comencé a tener problemas con Firebug.
Al visitar la página de Firebug, descubrí que ya no se está desarrollando, lo que me sorprendió.
Ahora, para seguir adelante, decidí utilizar la herramienta de desarrollo web (WDT) que viene integrada con Firefox. Pero parece que falta una cosa.
En el inspector de Firebug, cuando selecciono un elemento en la página, solía haber una opción llamada "Mostrar solo estilos aplicados" o algo similar. Esto parece faltar en el WDT y es feo ver todos los estilos CSS tachados en el panel.
¿Hay alguna manera de tener esa función en WDT?
Respuesta1
Firefox DevTools no ofrece esa función en este momento (a partir de Firefox 51.0.1). Por eso he creado uninforme de error solicitándolo.
También tengoSe agregó una nota a la guía de migración de usuarios de Firebug..
Respuesta2
No existe tal opción. Sin embargo, puedes utilizarCalculadopestaña para mostrar solo los estilos aplicados.
Para hacer eso, necesita editar o sobrescribir de alguna manera (por ejemplo, display: none) los estilos predeterminados de las Herramientas de desarrollo de Firefox:
En archivo/devtools/client/themes/rules.csshay (línea 423):
.ruleview-overridden {
text-decoration: line-through;
}
línea 268:
.theme-firebug .ruleview-overridden .ruleview-propertyname,
.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
text-decoration: line-through;
}
Este artículotambién puede ser útil.
Respuesta3
Si lo necesitasahorrarsolo los estilos aplicados, esto se puede hacer en Chrome usando Chrome Developer Tools (tutorial aquí). Pero si desea una solución para Firefox, puede guardar la página como un único archivo .html y luego tomar solo el CSS de ese archivo.
Para hacerlo, primero obtenga la versión Firefox del complemento.Archivo único
Después de instalar SingleFile, puede descargar la página como un archivo .html y copiar el CSS dentro de la <style>etiqueta.
Se minimizará, por lo que probablemente querrás desminificarlo utilizando una herramienta comoUnminify.com
Las personas que intenten esto deben ser conscientes de que sólo porque un estilo no seaaplicado, no significa que esté necesariamente "sin usar". Podría haber una secuencia de comandos en algún lugar que intentará agregar un determinado estilo a un elemento, pero si no se aplica en el momento de la captura, SingleFile (o Chrome Dev Tools) no lo incluirá. Advertencias como esa... Pero para aislar fragmentos específicos de páginas web y capturar sus conjuntos de reglas, este enfoque puede resultar útil.