Responsive Inspector per Chrome è un ottimo strumento di apprendimento per la progettazione reattiva

Chrome non è molto importante per gli strumenti per sviluppatori, ed è uno dei motivi per cui Firefox è il browser ideale per la maggior parte degli sviluppatori. Tuttavia, per coloro che usano Chrome, ci sono molte estensioni disponibili per aiutarli a questo proposito. Responsive Inspector è un'estensione di Chrome che può giustamente competere con la Responsive Design View introdotta da Mozilla Firefox 15. Responsive Inspector è uno strumento due in uno; ti mostra le dimensioni dello schermo per cui un sito web è ottimizzato e ti consente di passare rapidamente a uno diverso dal pop-up. Inoltre, può prendere screenshot di una pagina Web adattata a una di quelle dimensioni. Per i siti Web che sono già ottimizzati per determinate dimensioni dello schermo, è possibile visualizzare il codice CSS responsabile di ciò, rendendolo un ottimo strumento di apprendimento anche per gli sviluppatori di design reattivo.

Responsive Inspector aggiunge un pulsante quadrato accanto alla barra degli URL che apre un pop-up. L'estensione mostra tutte le dimensioni dello schermo per le quali il sito Web attualmente caricato è ottimizzato tramite barre. La dimensione dello schermo è scritta alla fine di ogni barra e una scala di pixel nella parte superiore mostra diverse dimensioni dello schermo. Muovi il mouse sulla bilancia e per ogni linea di calibrazione, apparirà un pop per mostrarti la dimensione dello schermo che rappresenta. Su questo stesso pop-up, c'è un pulsante di ridimensionamento e un pulsante della fotocamera. Fare clic sul primo ridimensionerà automaticamente la finestra del browser a quella larghezza. Puoi quindi fare clic sul pulsante della fotocamera per fare uno screenshot, se lo desideri. Lo screenshot può essere salvato sul tuo disco locale o caricato su Behance.net. Se senti la necessità di una scala di pixel più fine, fai clic sul pulsante di ingrandimento per ingrandirla.

Per visualizzare il CSS utilizzato per codificare le opzioni di visualizzazione, passa il mouse su una delle barre che rappresentano una dimensione dello schermo per cui il sito Web è stato ottimizzato e alla fine verrà visualizzato un pulsante {}. Fare clic per visualizzare il codice CSS in una nuova scheda. Il codice non è direttamente modificabile, ma è possibile copiarlo o utilizzare lo strumento di ispezione per apportare modifiche. Responsive Inspector imita abbastanza bene la Responsive Design View in Firefox; infatti, non sarebbe errato affermare che l'estensione è un taglio sopra lo strumento. Laddove Firefox offre impostazioni predefinite per le dimensioni dello schermo, Responsive Inspector ti offre un'intera scala e molta libertà, e poi c'è lo strumento screenshot. I preset renderebbero Responsive Inspector molto più utile e dovrebbero essere aggiunti. Sebbene anche senza quelli, l'estensione funziona eccezionalmente bene.

Installa Responsive Inspector dal Chrome Web Store