Ispeziona facilmente il modello di scatola di un elemento con XRAY

Hai mai desiderato conoscere la dimensione esatta di un determinato elemento in una pagina Web come il padding, il margine, la posizione e così via? Di solito è possibile ottenere le informazioni utilizzando uno strumento di ispezione Web; la maggior parte dei browser ha strumenti integrati per aiutarti a farlo. In alternativa, puoi usare Firebug, che è anche uno strumento web molto popolare. Tuttavia, quando le cose si complicano, forse devi ricorrere a uno strumento come XRAY.

XRAY è uno strumento cross-browser gratuito che ti consente di vedere il modello di box per qualsiasi elemento di una pagina web direttamente nel tuo browser. A differenza di altri strumenti di ispezione web complessi, XRAY si concentra sul fornire informazioni complete sul modello di box dell'elemento.

Iniziare

XRAY è un bookmarklet. Per usarlo, trascina XRAY nella barra dei segnalibri del tuo browser preferito. XRAY è disponibile per i browser IE6 +, Webkit e Mozilla come Safari e Firefox.

Proprio come altri bookmarklets, XRAY non può funzionare se viene applicato il protocollo SSL (HTTPS) .

Ispezionare gli elementi

Per iniziare l'ispezione, apri qualsiasi pagina web che vuoi ispezionare, assicurati che sia completamente caricata e premi il segnalibro XRAY. Avrai una nuova finestra pop-up nel tuo browser. Questa finestra mostrerà tutte le informazioni sull'elemento che hai selezionato.

Usiamo la mia ispezione della homepage di XRAY come esempio. Dire che voglio sapere le informazioni sul modello di scatola del seguente elemento.

Clicco su XRAY nella barra dei segnalibri e seleziono l'elemento. Questo mi dà il nome, l'id, la classe, la gerarchia, la posizione, il padding, il bordo e il margine dell'elemento .

Per chiudere la finestra, premi il pulsante X nell'angolo in alto a destra della finestra o aggiorna la pagina per uscire dallo strumento.

Pensiero finale

Oltre alla sua funzione avanzata di ispezione del modello di box, XRAY non fornisce le informazioni comunemente disponibili in altri strumenti di ispezione web, come lo stile o il DOM . Indipendentemente da ciò, è ancora abbastanza utile e facile da usare strumento per l'uso quotidiano.

I migliori 5 client Twitter gratuiti per Android

Anche se l'app ufficiale di Twitter ha molte funzionalità, manca di alcune di quelle innovative come la programmazione di tweet, l'esclusione di tweet o utenti, più temi di colore, ecc. Qui è dove i clienti Twitter non ufficiali entrano per colmare le lacune.In questo post mostreremo 9 client Twitter ricchi di funzionalità per la piattaforma Android. Qu

(Consigli tecnici e di design)

Come creare un design minimale TRON - Photoshop Tutorial

TRON è sicuramente uno dei film del sogno che diventa realtà. La tuta ei veicoli sono perfettamente lucidi, motivo per cui i tentativi di assemblare oggetti che replicano strumenti in TRON stanno emergendo su Internet. Per quanto riguarda i designer, con i clic e i trucchi giusti con Photoshop, una finzione TRON non ha bisogno di essere difficile.O

(Consigli tecnici e di design)