Las herramientas de desarrollo de Google Chrome inspeccionan los estilos de los elementos que no se muestran

Comenzando hace un par de semanas ... en algunos de nuestros sitios, pero no en todos, al inspeccionar un elemento, la pestaña de estilos solo muestra el "cuadro de estilos", pero no los estilos reales relacionados con CSS. - Nuevamente, esto es SOLO en algunos sitios - raro

Debería verse así (con estilos que se muestran a la derecha relacionados con CSS)

PERO ... en cambio, en ALGUNOS de nuestros sitios, esto comenzó hace un par de semanas con este aspecto ... sin CSS en la pestaña de estilos:

NOTA: ha funcionado durante 2 años: la página se ve bien y todos los estilos se están aplicando al DOM, pero NO aparecen en la pestaña de estilos al inspeccionar el elemento.

¿¿Algunas ideas??

Acabo de tener este mismo problema y para resolverlo entré en Herramientas para desarrolladores de Chrome -> Configuración -> Desplácese hasta la parte inferior y haga clic en "Restaurar valores predeterminados y volver a cargar" , ¡y todo volvió mágicamente!

No había cambiado nada entre su funcionamiento y cuándo se detuvo, así que no estoy seguro de por qué se rompió, pero espero que esto también te ayude.

Simplemente cierro la pestaña y la vuelvo a abrir, y luego hago clic derecho> inspeccionar elemento. No es necesario restaurar todas las herramientas de desarrollo a la configuración predeterminada. Es un desperdicio. Pruébalo, ¡funciona! :)

Tuve que ir Chrome Developer Tools -> Settings -> Enable JavaScript source mapsy luego desactivar esa casilla de verificación. Es probable que haya conseguido hacer con sourcemaps y el hecho de que estoy construyendo el scssa css.

algo que funcionó para mí: chrome: flags> Habilitar experimentos de herramientas de desarrollo> Deshabilitar. Lo habilité en algún momento, lo usé durante años sin problemas, luego no pude ver ningún detalle de estilo como se describe en OP. Después de actualizar, restablecer las preferencias de devtools a las predeterminadas, incluso intentarlo de incógnito, esto fue lo único que pareció hacer que funcionara nuevamente. Hubo algunos experimentos geniales, pero preferiría poder hacer mi trabajo ...

También estaba enfrentando este problema, además de las sugerencias que los otros usuarios hicieron, me funcionó accediendo a:

Herramientas para desarrolladores de Chrome -> CSS -> Relaoad Linked Style Sheets

Imagen que ilustra el procedimiento

Solo estaba teniendo el mismo problema extraño. No estoy 100% seguro de qué provocó esto, pero usamos herramientas de construcción para construir SCSS en CSS. Entré en mi archivo CSS y eliminé la referencia del mapa de origen:

/*# sourceMappingURL=myCSS.map */

Y de repente empezó a aparecer de nuevo. Luego lo agregué de nuevo y todavía puedo verlo. No estoy seguro de si esto se debe a que una versión del mapa está almacenada en caché ahora o no, pero esto funcionó para mí.

¡Incluso yo enfrenté este problema!

El archivo style.css estaba causando este problema.

Acabo de crear un nuevo archivo css (por ejemplo: style1.css) y corté y pegué el contenido del archivo css anterior (todas las líneas en style.css) en el archivo style1.css. Funciona

Nota: No olvide actualizar la etiqueta del enlace, que está cargando el archivo css.

Creo que sus archivos CSS no se cargan correctamente. Simplemente verifique la sintaxis para hacer referencia a las hojas de estilo externas.

Debería ser así

<link rel="stylesheet" type="text/css" href="mystyle.css">

Si omite rel = "stylesheet", el navegador puede considerarlo como un archivo simple. Para confirmar la carga de hojas de estilo, vaya a Chrome Inspector -> Fuentes

Consulta los recursos del sitio

No es necesario restablecer nada. Espero eso ayude :)

Yo uso Dreamweaver y Breckets. Pude ver que el problema se produjo solo cuando usé Dreamweaver. Resolvió el problema cambiando las preferencias de Dreamweaver

-> Formato de código -> Tipo de salto de línea -> CR LF (Windows)

Otro para la mezcla: usar variables CSS pero una de las variables hacía referencia a otra variable que no existía.

Los elementos que usan esa variable faltante en la cadena simplemente no aparecen en cromo (ocultó todas las referencias a h2s en el caso de mi sitio).

Curiosamente, todavía muestra los elementos en el panel de herramientas de desarrollo de Firefox.

Busque errores en el archivo CSS, en mi caso fue en las variables CSS globales, arreglar los errores resolvió el problema.

Esta herramienta puede ayudarlo a encontrar los errores: https://jigsaw.w3.org/css-validator/

Creo que esto puede ser útil. Si se trata de un proyecto angular> simplemente ejecute

ng serve --extract-css.