Chrome na vývojářských nástrojích není příliš velký ato je jeden z důvodů, proč je pro většinu vývojářů prohlížeč Firefox. Pro ty, kteří prohlížeč Chrome používají, je však k dispozici mnoho rozšíření, která jim v tomto ohledu pomohou. Citlivý inspektor je rozšíření Chrome, které může správně konkurovatResponsive Design View, který Mozilla představila ve Firefoxu 15. Responsive Inspector je nástroj typu dva v jednom; Ukazuje vám velikosti obrazovky, pro které je web optimalizován, a rychle vám umožní přepnout na jiný než vyskakovací okno. Dále může pořizovat snímky obrazovky webové stránky upravené na kteroukoli z těchto velikostí. U webů, které jsou již optimalizovány pro určité velikosti obrazovky, si můžete prohlédnout kód CSS, který je za to zodpovědný, což z něj činí skvělý nástroj pro učení i pro vývojáře responzivního designu.
Responsive Inspector přidá čtvercové tlačítko vedlepanel URL, který otevírá vyskakovací okno. Rozšíření zobrazuje všechny velikosti obrazovky, pro které je aktuálně načtený web optimalizován pomocí pruhů. Velikost obrazovky je zapsána na konci každého pruhu a měřítko pixelů v horní části zobrazuje různé velikosti obrazovky. Pohybujte myší po stupnici a pro každou kalibrační linii se objeví pop, který vám ukáže velikost obrazovky, kterou představuje. Ve stejném vyskakovacím okně je tlačítko pro změnu velikosti a tlačítko pro fotoaparát. Kliknutím na první z nich se automaticky změní velikost okna prohlížeče na tuto šířku. Poté můžete klepnutím na tlačítko fotoaparátu pořídit snímek obrazovky. Snímek obrazovky lze uložit na místní disk nebo nahrát na Behance.net. Pokud cítíte potřebu jemnějšího měřítka v pixelech, kliknutím zvětšíte.
Chcete-li zobrazit CSS použitý k kódování možností zobrazení,umístěte kurzor myši na jeden z pruhů, které představují velikost obrazovky, pro kterou byl web optimalizován, a na konci se zobrazí tlačítko {}. Kliknutím na ni zobrazíte kód CSS na nové kartě. Kód není přímo upravitelný, ale můžete jej zkopírovat nebo použít nástroj Inspect k provedení změn. Responsive Inspector napodobuje responzivní návrhové zobrazení ve Firefoxu docela dobře; ve skutečnosti by nebylo správné tvrdit, že rozšíření je řez nad nástrojem. Tam, kde vám Firefox dává předvolby velikosti obrazovky, vám Responsive Inspector poskytne celou škálu a spoustu svobody a poté je k dispozici nástroj pro screenshot. Předvolby by však responzivního inspektora učinily mnohem užitečnějším a měly by být přidány. Ačkoli i bez nich, rozšíření funguje výjimečně dobře.
Nainstalujte responzivní inspektor z Internetového obchodu Chrome
Komentáře