2012-06-16 17 views
8

Estoy escribiendo algunos archivos CSS, pero cuando cometo un error, Chrome aparece solo en silencio ignora las partes que estropeo y representa el resto.Depuración de CSS en Google Chrome

Esto hace que sea molesto depurar ya que no puedo entender qué está pasando mal.

Entonces, ¿hay alguna manera de conseguir que Chrome "me grite con grandes letras rojas", de modo que pueda dedicar menos tiempo a encontrar el error y más tiempo para solucionarlo?

+1

Puede utilizar el inspector elemento en cromo para ver el CSS aplicado a un elemento y anuló/reglas CSS ignorados . Para abrir el inspector de elementos, puede usar f12 o ctrl + shift + j. – sg3s

Respuesta

1

Como CSS no es un lenguaje de script, no se puede depurar correctamente. De todos modos, si sabes dónde sale mal, puedes intentar sintonizarlo a mano.

Adicionalmente que tenga el validador del W3C aquí: http://jigsaw.w3.org/css-validator/ que le puede dar alguna información

+0

¿Cómo puede usar eso si está desarrollando una aplicación localmente? Por ejemplo, estoy usando Visual Studio 2013 y ejecuto una aplicación presionando F5. – VivekDev

-3

CSS no es una secuencia de comandos es un lenguaje de marcado, por lo que no podemos definir un tiempo de ejecución, ¿por qué no valida su CSS?

+2

css no es marca –

5

Si bien no se puede "depuración" de CSS, ya que no es un lenguaje de script, puede utilizar el panel de Chrome DevTools Elementos para inspeccionar un elemento &, vea el panel Estilos a la derecha. Esto le dará información sobre los estilos que se anulan o se ignoran (línea lanzada). El panel Estilos también es útil debido a su capacidad para editar en vivo el documento que se inspecciona, lo que puede ayudarlo a resolver los problemas. Si los estilos están siendo reemplazados, puede ver el panel de Estilo Computado para ver el CSS que se está utilizando para darle un estilo al documento.

Para abrir la ventana de Chrome DevTools, golpeó Ctrl +Shift +I en una pestaña del navegador Chrome. (Comando + Opt + I para un mac)

Para obtener más información, visite https://developer.chrome.com/devtools/index

Cuestiones relacionadas