Responzívny inšpektor pre prehliadač Chrome je vynikajúcim nástrojom na učenie reagujúceho dizajnu

Prehliadač Chrome nie je príliš veľký na vývojárske nástroje, a to je jeden z dôvodov, prečo je prehliadač Firefox pre väčšinu vývojárov prehliadačom. Pre používateľov prehliadača Chrome je však k dispozícii veľa rozšírení, ktoré im v tomto ohľade môžu pomôcť. Responzívny inšpektor je rozšírenie prehliadača Chrome, ktoré môže správne konkurovať responzívnemu dizajnovému zobrazeniu, ktoré spoločnosť Mozilla predstavila Firefox 15. Responzívny inšpektor je dvojaký nástroj; zobrazuje veľkosť obrazovky, pre ktorú je web optimalizovaný, a rýchlo vám umožňuje prepnúť na inú ako kontextové okno. Ďalej môže vytvárať snímky obrazovky webovej stránky prispôsobenej ktorejkoľvek z týchto veľkostí. V prípade webových stránok, ktoré sú už optimalizované pre určité veľkosti obrazovky, si môžete pozrieť zodpovedný kód CSS, vďaka čomu je skvelým nástrojom na výučbu aj pre vývojárov responzívnych dizajnov.

Responzívny inšpektor pridá štvorcové tlačidlo vedľa panela s adresou URL, ktorým sa otvorí kontextové okno. Rozšírenie zobrazuje všetky veľkosti obrazovky, na ktoré je aktuálne načítaná webová stránka optimalizovaná pomocou panelov. Veľkosť obrazovky je napísaná na koniec každej lišty a pixelová stupnica v hornej časti zobrazuje rôzne veľkosti obrazovky. Pohybujte myšou po stupnici a pre každú kalibračnú čiaru sa objaví pop, ktorý vám ukáže veľkosť obrazovky, ktorú predstavuje. V tom istom rozbaľovacom zozname sa nachádza tlačidlo na zmenu veľkosti, ako aj na tlačidlo fotoaparátu. Kliknutím na prvú sa automaticky zmení veľkosť okna prehliadača na túto šírku. Ak chcete, potom môžete kliknúť na tlačidlo fotoaparátu a urobiť z neho snímku obrazovky. Snímku obrazovky je možné uložiť na miestny disk alebo nahrať na server Behance.net. Ak cítite potrebu jemnejšej mierky pixelov, zväčšite ju kliknutím na tlačidlo priblíženia.

Ak chcete zobraziť CSS použitý na kódovanie možností zobrazenia, umiestnite kurzor myši na jeden z pruhov, ktoré predstavujú veľkosť obrazovky, pre ktorú bol web optimalizovaný, a na konci sa zobrazí tlačidlo {}. Kliknutím naň zobrazíte kód CSS na novej karte. Kód nie je priamo upraviteľný, ale môžete ho skopírovať alebo použiť nástroj na kontrolu na vykonanie zmien. Responzívny inšpektor pomerne dobre napodobňuje responzívny dizajnový pohľad vo Firefoxe; v skutočnosti by nebolo správne tvrdiť, že rozšírenie je rez nad nástrojom. Tam, kde vám Firefox ponúka predvolené veľkosti obrazovky, responzívny inšpektor vám poskytne celú škálu a veľa slobody a potom je k dispozícii nástroj na snímanie obrazovky. Podľa predvolieb by bol responzívny inšpektor oveľa užitočnejší a mal by sa pridať. Aj keď aj bez nich, rozšírenie funguje výnimočne dobre.

Nainštalujte program Responsive Inspector z Internetového obchodu Chrome