Strumenti di debug di CSS in Internet Explorer

Question

Esistono strumenti diversi da Firebug Lite che potrebbero aiutare a entrare nella mente poco caotica di Internet Explorer e scoprire esattamente dove e perché sta danneggiando così gravemente il mio CSS?

Firebug Lite è ovviamente uno strumento utile, ma sembra che manchi la funzionalità cruciale (presente nel plugin "completo" di Firebug) che consente di vedere quali parti delle quali le dichiarazioni vengono ignorate a favore di altre dichiarazioni.

Ad esempio, utilizzando Firefox con Firebug, è possibile vedere che .foo {color: red} viene sovrascritto da .bar {color: blue} in seguito nel foglio di stile.

Ma Firebug lite sembra solo mostrare lo stile finale calcolato: non posso dire quali dichiarazioni vengono ignorate, che vengono sovrascritte, che non sono supportate affatto e che sono semplicemente buggy.

C'è un altro strumento che potrebbe essere utile qui?

Answer 1

Sto usando IE8 Developer Tools (che è incluso nella confezione), può mostrare la tracciatura dello stile.

IE7 ha anche un componente aggiuntivo fornito da Microsoft chiamato IE Dev Toolbar. Non ho usato questo ampiamente però.

Quale versione di IE stai utilizzando?

Answer 2

Sì. In IE8 ha colpito F12. Nelle versioni precedenti, installare this.

Answer 3

Gli strumenti di sviluppo inclusi in IE8 funzionano abbastanza bene.

Answer 4

non so se ha la capacità di controllare specifiche prioritario css, ma mi piacerebbe iniziare la Internet Explorer Developer toolbar

Answer 5

Un altro è il Debug Bar. Funziona in IE 7 o 8; ed è simile a Firebug

Answer 6

Ho trovato jQuery essere utile per capire cosa sta succedendo "sotto il cofano", per così dire. Ad esempio, ho avuto una situazione recente in cui ho scoperto che non potevo fidarmi degli Strumenti per sviluppatori forniti con IE 8 (che, tra l'altro, stavo girando in IE 7, standard, non in quirk, modalità di compatibilità. il foglio di stile non veniva mostrato come calcolato, oltre ad altri strane IE che stavo vivendo, quindi ho appena lanciato un javascript nella pagina, incluso jQuery, che mi avrebbe permesso di scrivere del codice e di averlo valutato senza fare affidamento su IE Developer Tools, Firebug o l'ispettore Web in Safari È possibile valutare affermazioni come:.

$('body').css('background-image'); 

che potrebbe restituire:

'/images/default_background.png' 

o qualsiasi altra cosa.

YMMV, ma vale la pena provarlo.

Answer 7

È possibile utilizzare il mio nuovo strumento per visualizzare il layout di qualsiasi elemento su cui è possibile passare il mouse.

HTML Box Visualizer - GitHub