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.

50+ scorciatoie da tastiera WordPress per una migliore produttività

Conoscere le scorciatoie da tastiera del tuo computer può migliorare le varietà di produttività. Allo stesso modo, la tua efficienza nel lavorare su WordPress può ottenere un miglioramento istantaneo se sai quanto siano utili determinate scorciatoie da tastiera. Soprattutto per le persone che non amano passare continuamente da tastiera a mouse, queste scorciatoie da tastiera possono rivelarsi niente meno che una benedizione.Esi

(Consigli tecnici e di design)

Uno sguardo in: The Kit Language

Diciamo che stavi costruendo prototipi per un sito Web con file HTML . Hai circa 10 pagine HTML o giù di lì e queste pagine condividono alcuni componenti comuni come Intestazione, Barra laterale e Piè di pagina.Ora arriva il problema: se apporti una modifica a questi componenti condivisi, potresti doverli modificare anche negli altri file . È

(Consigli tecnici e di design)