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?
risposta
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.
Per domande future, basta fare riferimento a Google di nice documentation prima.
+1 ottima risposta. Grazie per lo screenshot! –
Il link alla documentazione di Google è ora rotto. La pagina può ora essere trovata su https://developer.chrome.com/devtools – OscillatingEthmoid
Nella versione "46.0.2490.86 m", non ci sono "Stili calcolati" e la finestra Metriche dice 100% x 100%. :( – LGT
- 1. Modifica le Google Chrome Developer Tools Itself
- 2. "Copia posizione con parametri" per Google Chrome Developer Tools?
- 3. Come posso creare un elemento in Chrome Dev Tools?
- 4. Come posso cercare in tutto il mio javascript in Chrome Developer Tools su un Mac?
- 5. Che cosa significa == $ 0 (doppio uguale a zero dollari) significa in Chrome Developer Tools?
- 6. Come si modifica/personalizza la scelta rapida da tastiera per Chrome Developer Tools?
- 7. Personalizzazione della scorciatoia da tastiera di Google Chrome Developer Tools su Mac
- 8. jQuery.getScript può mostrare il file come una risorsa in Chrome Developer Tools?
- 9. È possibile selezionare più elementi nel pannello Elementi di Chrome Developer Tools?
- 10. Devo imparare Firebug o IE8 Developer Tools?
- 11. Che cosa significano i colori nel pannello Ambito di Chrome Developer Tools?
- 12. Ottieni il numero di riga nella finestra Elementi di Chrome Developer Tools?
- 13. authority http header - in chrome dev tools
- 14. Conserva l'evidenziazione dell'elemento DOM in chrome dev tools/firebug
- 15. trovare qualsiasi di due elementi in WebDriver
- 16. Come trovare le dimensioni dei cluster in serie numpy 2D?
- 17. Qual è la differenza tra "Developer Tools di Microsoft Office" e "Visual Studio Tools per Office"
- 18. Chrome Dev Tools - È possibile annullare le modifiche nella console?
- 19. Che cosa significa "connessione" in Chrome Developer Tools nella scheda Rete e perché viene visualizzato solo per alcuni siti?
- 20. Interrompi quando lo stile è cambiato in Chrome Dev Tools
- 21. HTML Chrome Audit Specificare le dimensioni dell'immagine
- 22. Chrome Dev Tools - "Dimensione" vs "Contenuto"
- 23. Rinvia la valutazione di tutte le proprietà calcolate in Knockout?
- 24. Debug less/Sass in Chrome Dev Tools/Firebug
- 25. Tracciamento dell'esecuzione Javascript in Chrome: come?
- 26. Come trovare partizioni moltiplicative di qualsiasi intero?
- 27. Come vengono calcolati i nomi delle classi javascript per le classi personalizzate in Chrome Dev Tools?
- 28. Trovare le dimensioni della finestra X11?
- 29. Misurare le dimensioni della pagina intera in Chrome DevTools
- 30. limite dimensioni cookie chrome
"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. –