Prehliadač Chrome nie je príliš veľký na vývojárske nástroje ato je jeden z dôvodov, prečo je Firefox pre väčšinu vývojárov prehliadačom typu go-to. 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ťResponsive Design View, ktorý Mozilla predstavila vo Firefoxe 15. Responsive Inspector je nástroj typu dva v jednom; zobrazuje veľkosť obrazovky, pre ktorú je web optimalizovaný, a rýchlo vám umožňuje prepnúť na inú, ako je pop-up 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ľapanel s adresou, ktorý otvára 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. Potom môžete kliknutím na tlačidlo fotoaparátu nasnímať 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 možné priamo upravovať, ale môžete ho skopírovať alebo vykonať kontrolu pomocou nástroja na kontrolu. 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 predvoľby 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
Komentáre