Pendule - Plugin Neat Chrome per uno sviluppatore Web

Faccio un bel po 'di sviluppo Web e Google Chrome è il mio browser principale in questi giorni. Chrome è abbastanza intuitivo per gli sviluppatori e puoi anche impostare Firebug su Chrome. Come installare Firebug su IE, Safari, Chrome e Opera. Come installare Firebug su IE, Safari, Chrome e Opera Ulteriori informazioni. Ma oggi volevo mostrarti una diversa estensione Chrome chiamata Pendule. I supplementi di Pendule includono la funzionalità integrata Inspect Element di Chrome con alcuni extra interessanti.

Il menu Pendule

Il pulsante della barra degli strumenti di Pendule apre un menu dall'aspetto elegante, diviso in sei aree principali. Primo, il Fogli di stile sezione. Il Visualizza CSS l'opzione potrebbe sembrare ridondante - dopotutto, Chrome ci consente già di visualizzare i CSS ... o lo fa?

Molti siti Web utilizzano CSS compressi, alcuni comprimendoli fino al punto di illeggibilità. Se sei il solo sviluppatore Web sul tuo sito, potresti essere in grado di decidere da solo quanto vuoi comprimere il CSS. Per me, non c'è una tale fortuna. Uno dei siti Web su cui lavoro comprime i CSS usando uno strumento PHP chiamato Minify, quindi l'ispezione del CSS con gli strumenti integrati di Chrome mostra qualcosa del genere:

Non è esattamente il formato più leggibile che si possa immaginare. Con Pendule, posso facilmente abbellire il CSS dalla mia parte. Faccio semplicemente clic sul pulsante Pendule e clicco Visualizza CSS. Allora ho qualcosa del genere:

Ancora non molto leggibile. Ma fai clic su Abbellisci i CSS pulsante e guarda la magia accadere:

Ora stiamo parlando! Mentre non è possibile modificare nulla nella vista CSS, questo è un grande miglioramento quando si tratta di CSS compressi.

Gestione delle immagini

Pendule offre anche alcune interessanti utilità relative alle immagini:

“Visualizza le informazioni delle immagini” ti porta in una pagina web completamente nuova contenente tutte le immagini della pagina corrente, ciascuna con una serie di informazioni correlate:

Questo è utile perché ti consente di scorrere tutte le immagini una per una e controllarle singolarmente. Ad esempio, alcuni siti Web offrono contenuti da un server e immagini correlate da un altro server (per rendere le cose più veloci). Con questa vista, puoi vedere esattamente da dove proviene ogni immagine e rintracciare facilmente quelli che non sono serviti dalla giusta fonte.

Puoi anche leggere il testo Alt per ogni immagine, che può essere la chiave per le offerte SEO. Tuttavia, se sei interessato solo al testo Alt, Pendule ti consente di controllarlo facilmente on-page, usando il “Mostra alt text” opzione. Se abilitato, le immagini sulla tua pagina sono come questa:

Questo capita di essere da un bel post intitolato 3 Segni Apple sta spostando Microsoft per diventare l'impero del male, ma il punto qui è il piccolo “alt =” snippet sopra l'immagine. Sembra un suggerimento, ma non devi passare il mouse su di esso per farlo apparire. Con “Mostra alt text”, puoi semplicemente scorrere la tua pagina web e vedere esattamente quali immagini mancano o errate.

Varie Utilità

Il menu Utilità varie di Pendule racchiude alcune chicche interessanti. Il Visualizza JavaScript prodotti una singola pagina Web suddivisa in sezioni, una sezione per ogni script contenuta nella pagina corrente. Molto simile al “Visualizza CSS” opzione con cui abbiamo iniziato, Visualizza JavaScript ti consente di abbellire il codice per renderlo leggibile. JavaScript è quasi sempre compresso (anche più dei CSS), quindi questa è un'opzione molto utile se ti piace leggere il codice per capire come funzionano le cose.

Il “Visualizza righello” l'opzione attenua la pagina e la sovrappone con una cornice ridimensionabile e trascinabile con una piccola etichetta che mostra le sue dimensioni in un dato momento. Questo è molto utile per verificare se gli elementi sono allineati correttamente, per esempio.

Scopri di più su: Google Chrome, Web design, sviluppo Web, Strumenti per i Webmaster.