2012-06-16 15 views
8

Sto scrivendo alcuni file CSS, ma quando faccio un errore, Chrome sembra solo silenziosamente ignorare le parti che mi rovinano e restituisce il resto.Debug di CSS in Google Chrome

Questo rende fastidioso eseguire il debug poiché non riesco a capire cosa non va.

Quindi, c'è un modo per convincere Chrome a "urlarmi con grandi lettere rosse", in modo da poter dedicare meno tempo a trovare l'errore e più tempo a risolverlo?

+1

È possibile utilizzare la finestra di ispezione elemento in cromo per vedere il CSS applicato ad un elemento e oltrepassato/regole CSS ignorati . Per aprire l'ispettore elemento puoi usare f12 o ctrl + maiusc + j. – sg3s

risposta

1

Poiché il CSS non è un linguaggio di scripting, non è possibile eseguirne il debug in modo corretto. Ad ogni modo, se sai dove va male, puoi provare a sintonizzarlo a mano.

Aditionally hai il validatore W3C qui: http://jigsaw.w3.org/css-validator/ che potrebbe dare un feedback

+0

Come puoi utilizzarlo se stai sviluppando un'applicazione in locale. Ad esempio, sto utilizzando Visual Studio 2013 ed eseguo un'applicazione premendo F5. – VivekDev

-3

CSS non è uno script, è un linguaggio di markup quindi non possiamo definire un runtime, perché non convalidare il tuo CSS?

+2

css non è markup –

5

Mentre è possibile non CSS "debug", perché non è un linguaggio di scripting, è possibile utilizzare il pannello di Chrome DevTools Elementi per ispezionare un elemento & visualizzare il pannello Stili a destra. Ciò ti fornirà approfondimenti sugli stili che vengono ignorati o ignorati (line threw). Il pannello Stili è utile anche per la sua capacità di LiveEdit del documento da ispezionare, che può aiutarti a risolvere i problemi. Se gli stili vengono sovrascritti, è possibile visualizzare il riquadro Stile calcolato per visualizzare il CSS effettivamente utilizzato per lo stile del documento.

Per aprire la finestra di Chrome DevTools, ha colpito Ctrl +Maiusc +ho in una scheda del browser Chrome. (Comando + Opt + ho per un mac)

Per maggiori informazioni visitate https://developer.chrome.com/devtools/index

Problemi correlati