2012-04-19 5 views
8

Sono sicuro che questo è da qualche parte nell'Inspector degli strumenti per sviluppatori, ma non riesco a trovarlo. Dove troverei, per un dato elemento (ad esempio un div), le dimensioni calcolate (altezza e larghezza) di un determinato elemento su cui clicco con il pulsante destro del mouse e seleziona "Ispeziona elemento"?Come trovare le dimensioni calcolate di qualsiasi elemento in Chrome Developer Tools?

+0

"Ispeziona elemento", guarda il riquadro a destra, fai clic su "stili calcolati" sul pannello più in alto. Oppure usa il pannello 'metriche'. Ma questa non è una domanda di programmazione, penso. –

risposta

14

Passa il mouse sopra il nome dell'elemento nella barra multifunzione sotto il pannello degli strumenti dello sviluppatore. L'elemento corrispondente verrà evidenziato nella finestra del browser e le dimensioni verranno visualizzate in un angolo. Inoltre, se scorri il riquadro a destra negli strumenti di sviluppo, vedrai la finestra "Metriche" che ti darà le dimensioni calcolate e anche i margini, i paddings, i bordi, ecc.

Ecco uno screenshot del dimensioni del div che contiene la tua domanda SO. Notare le dimensioni nell'angolo in basso a sinistra della regione evidenziata mentre passo il mouse sopra il nome div in basso. Sulla destra c'è la finestra Metriche.

Computed Size Screenshot

Click here for bigger image

Per domande future, basta fare riferimento a Google di nice documentation prima.

+2

+1 ottima risposta. Grazie per lo screenshot! –

+1

Il link alla documentazione di Google è ora rotto. La pagina può ora essere trovata su https://developer.chrome.com/devtools – OscillatingEthmoid

+3

Nella versione "46.0.2490.86 m", non ci sono "Stili calcolati" e la finestra Metriche dice 100% x 100%. :( – LGT

Problemi correlati