2012-07-17 31 views
8

Estoy usando las herramientas de desarrollador google chrome para probar mi sitio web;Google Chrome Developer tools no muestra estilos de elementos inspeccionados?

Funciona bien para algunos elementos, pero para otros muestra el selector pero lo muestra como si no tuviera estilos; El elemento tiene estilos y los estilos se aplican al elemento. pero el inspector no muestra estilos.

Si hago clic en el enlace a la línea de archivo css para ese inspector, puedo ver los estilos allí.

Vi un tema de grupo de Google que indicaba que removing any empty url() declarations solucionó el error. sin embargo, no tengo declaraciones url() vacías.

También encontré this bug which is somewhat similar; pero no exactamente lo mismo. Una cosa que noté es que tanto el uso de este error como mi configuración están usando twitter-bootstrap. Estoy usando la versión .less de bootstrap que incluye bootstrap en el archivo css único como un método copiar> pegar, por lo que mi archivo css tiene 3740 líneas. ¿Podría esto ser parte del problema?

Los elementos no están anidados en profundidad (body > div#container > inspected element).
No hay una cantidad excesiva de estilos aplicados a los elementos (< = 10).


Click to enlargeDev Tools Example

+0

¿Aparecen los valores en "estilo calculado"? –

+0

Sí, los estilos aparecen en 'estilos computados' – Hailwood

+0

¿Quizás intente ejecutar sus archivos css a través del validador para ver si hay algún error que pueda estar causando que esto ocurra de manera similar a la URL vacía sobre la que mencionó la lectura? http://jigsaw.w3.org/css-validator/ –

Respuesta

6

Ok, así que también me pareció this bug aswell la que parece que tiene un partido más cerca del insecto.
Se afirma que

DevTools rompen cuando un pseudo-clase no reconocida está presente en CSS

cual hace twitter-arranque! por lo que parece que las herramientas de desarrollo están rotas si está utilizando Twitter bootstrap (o cualquier cosa que intente usar pseudo clases específicas del proveedor). afaik, la única forma de resolver esto es esperar a que los desarrolladores solucionen este error.

¡Si alguien puede publicar una solución para esto, aceptaré su respuesta!

+0

Hola, soy el tipo que generó el primer error que vinculó. Estoy bastante seguro de que tanto él como el otro error están describiendo el mismo problema subyacente, que es causado por Chrome asfixia en algunos aspectos del bootstrap.css estándar. Mi error ha sido etiquetado como de prioridad, para incluirlo en el hito 22 (el hito de desarrollo actual), así que con suerte no tardará en solucionarse. Mientras tanto, es posible usar Firefox y Firebug para depurar su CSS. –

+0

Acabo de volver al canal estable por ahora, sería muy apreciado si pudiera comentar aquí cuando esto se solucione. – Hailwood

+2

Se ha solucionado en la versión del canal de desarrollo de hoy. –

Cuestiones relacionadas