Screen Ruler: ispezionare pagine Web su Chrome

Screen Ruler è un'estensione del browser Google Chrome pensata per sviluppatori Web e Web designer. Quando installata consente di misurare le dimensioni, le distanze, i margini e i padding di qualsiasi elemento presente in una pagina. Dopo la sua attivazione essa mostra tutte le informazioni raccolte passando il mouse sopra un elemento specifico. È possibile inoltre selezionare un elemento per misurarne le distanze rispetto ad altri elementi.

Funzionalità principali di Screen Ruler

L'estensione consente di misurare la dimensione espressa in pixel di un qualsiasi elemento. Permette inoltre di rilevare con esattezza la distanza in pixel tra due diversi elementi di una pagina. Quando lo si utilizza a fini di analisi ed ispezione del codice supporta la visualizzazione dei nomi dei tag HTML, delle classi e degli ID.

L'accesso alle funzionalità disponibili avviene tramite un apposito menu contestuale, si può copiare il codice CSS direttamente negli appunti e sono disponibili delle scorciatoie per la selezione di elementi parent/child. Tali scorciatoie possono essere personalizzate e si tratta di uno strumento compatibile con qualsiasi pagina Web.

Particolarmente interessante è anche la possibilità di effettuare una selezione responsive che viene ridimensiona automaticamente con la finestra del browser.

Compatibilità e versione PRO

Per installare Screen Ruler è consigliabile disporre di Chrome 116 o versione successiva. Si può utilizzare anche in altre release del browser di Google ma in questo caso la stabilità non è garantita. Questo perché l'estensione richiede l'accesso a delle specifiche API e le versioni più datate dell'applicazione potrebbero non supportarle. È comunque possibile effettuare l'installazione su qualsiasi browser sufficientemente aggiornato che condivida la stessa codebase, cioè quella di Chromium.

Gli autori di Screen Ruler propongono anche una formula PRO con cui è possibile sbloccare delle funzionalità aggiuntive. Come per esempio l'ispezione degli elementi, una griglia di layout, la cattura di screenshot dell'area evidenziata e la visualizzazione di proprietà avanzate nel pannello laterale del browser.