Google Chrome rozšíření nejen pro webdesignery

V minulém článku jsem popsal interní nástroj prohlížeče Google Chrome Nástroje pro vývojáře. Nyní bych se rád zaměřil rozšíření pro tento prohlížeč, které mohou, v kombinaci se zmíněným nástrojem, udělat z Google Chrome opravdu silný vývojářský nástroj, který zlepší optimalizaci nejen koncového výstupu (webové aplikace) před doručením uživateli. Tato rozšíření jsou zaměřena především pro webdesignery, ale nejen pro ně a jsou dostupná z galerie rozšíření.

Při kódování šablony se můžeme setkat někdy s problémem, že se nám některé prvky zobrazují jinak, než bychom si přáli. Například se překrývají, překrývají se prvky, které by neměly nebo potřebujeme znát rozložení jednotlivých prvků na stránce či některé jejich atributy. Je tak potřeba zbytečně složitě prohledávat HTML kód či analyzovat definované CSS styly. A přitom to jde mnohem jednodušeji a přímo v prohlížeči.

Rád bych také zmínil další rozšíření, které nenapomáhají optimalizovat kód stránky samotné, ale například pořídit kompletní obrázek celé stránky po nakódování pro porovnání přímo s šablonou. To se může někomu jistě hodit, hlavně pokud takový obrázek můžete po pořízení zpracovat.

Pořizujeme snímky stránek

Představme si, že jsme již úspěšně převedli šablonu na HTML kód s CSS a chceme prezentovat výsledek. Nechceme však prezentovat samotný HMLT/CSS kód (v některých případech by nebyl problém jej opsat a prezentovat za vlastní), případně chceme na své webové stránce prezentovat výsledek své práce jako referenci v podobě obrázku. Nebo chceme zobrazit část stránky, kterou potřebujeme nějak okomentovat či zvýraznit určité pasáže, např. na které se odkazujeme.

Jako nejlepší rozšíření pro zachycování stránek mi přišlo rozšíření Awasome screenshots, které nabízí možnost zachytit pouze viditelnou část, zachytit celou stránku nebo si vybrat oblast a tu následně zachytit a dále podle potřeby upravovat. K dispozici jsou samozřejmě i další rozšíření, např. Aviary Screen Capture. Toto rozšíření nabízí možnost zachytit pouze viditelnou část stránky nebo celou stránku a následnou úpravu snímku ve webovém editoru Aviary.

Awasome screenshot

Díky tomuto rozšíření je zachycení stránky velice snadné. Jak jsem již zmínil, je možné si vybrat ze tří možností snímání – pouze viditelnou část, celou stránku (celý dokument, který by se jinak musel posouvat) a vybranou část. Pokud zachytíme vybranou část (pro ukázku zachytíme pouze viditelnou část) pořízený snímek se nahraje do interního editoru, kde je možné obrázek následně upravit nebo uložit.

Jak ukazuje obrázek, je dostupných několik nástrojů, pro které je možné si definovat barvu. Zmíním například možnost rozostřit vybranou část, vytvořit čáru nebo šipku.

Pokud použijete některý z nástrojů, můžete jej po použití odvolat zpět. Ukončení úprav, tedy přejít na možnost obrázek uložit, se používá tlačítko Done, které nás přesměruje na možnost obrázek uložit, nahrát na webovou galerii awesomescreenshot.com nebo v případě potřeby obrázek znovu editovat. I když nástroje nenabízejí vlastní nastavení, například pro tloušťku čáry, typ písma, defaultní nastavení je přívětivé a pro zmíněné potřeby zcela dostačující.

Avira Screen Capture

Toto rozšíření nabízí mnohem více možností, než předchozí rozšíření Awasome screenshot. Například editaci s pokročilejším editoru, možnost přidat efekty, nastavovat vlastnosti tvarů, atd. Jak je možné vidět na obrázku, díky rozšíření je možné přistupovat ke službám Aviary přímo z prohlížeče nebo zachytit obrazovku s nastavitelnými parametry bez nutnosti jejího otevření (i když to mi v prohlížeči nefungovalo).

Možnou nevýhodou tohoto rozšíření je právě rozšířený editor. Je zde sice mnohem více možností nastavení pro upravení snímku stránky a možnosti přidání efektů, ale přechody mezi těmito možnostmi či definování vlastností jsou, alespoň pro mě, složitější než např. v Adobe Photoshop a pokud potřebujeme zachytit stránku, některou část zviditelnit či zvýraznit, některé nástroje se mnou zdát zbytečné.

Avšak může to být i užitkem, neboť nemusíme mít rozšířený editor (pro lidi, kteří nemají pokročilý editor) a musíme se spokojit s některými efekty, ale v některých případech se musíme spokojit i s pomalejším nahráváním knihoven těchto nástrojů či efektů (chvilku to trvá).

Jak můžeme vidět na obrázcích, editor Avira nabízí opravdu velké množství nástrojů, jak zachycené snímky upravovat. Jak jsem ale zmínil, pokud budeme potřebovat rychle zachytit snímek obrazovky, může to být někdy zbytečně složité a pokud opravdu potřebujeme snímek upravit, bude lepší využít některý z desktopových programů.

Pracujeme se stránkou

Jak jste se mohli dočíst v předchozím článku zmíněným v úvodu tohoto příspěvku, díky Nástrojům pro vývojáře, můžeme editovat HTML kód nebo samotné CSS vlastnosti. Dostupná jsou další rozšíření, které nabízejí další možnosti v práci s těmito elementy, např. Web Developer. Díky tomuto rozšíření tak můžeme testovat stránku na rozložení HTML prvků vypnutím CSS stylů, editovat styly či povolit pouze určité styly. Avšak můžete také upravit jednotlivé elementy, například změnit pro formuláře typ požadavku z GET na POST či odstranit omezení délky textu pro jednotlivé formulářové prvky, což se může hodit pro testování bezpečnosti aplikace či validity dat. Tato rozšíření nabízejí opravdu mnoho možností, jak dále optimalizovat stránku.

Web Developer

Jak ukazuje obrázek, na které je nástrojová lišta tohoto rozšíření, je možné provádět opravdu mnoho úprav. Jednotlivé položky nabízejí další možnosti. Mně se například líbí, pokud se mi některé prvky překrývají, že si mohu zobrazit topografické rozložení, které zobrazí celkovou velikost jednotlivých elementů.

Nebo si zobrazit hodnoty některých prvků – například přiřazené CSS třídy, id, title či zobrazit hodnoty odkazů. Díky těmto možnostem tak můžete upravit své styly a např. odebrat některé nepoužité vlastnosti.

Možností, které rozšíření nabízí je opravdu mnoho a jistě se budou hodit každému, kdo optimalizuje nebo analyzuje své webové stránky nebo aplikaci. Díky možnostem je také možné validovat HTML kód nebo CSS styly pouhým kliknutím myši na danou možnost v nástrojové liště.

Z dalších možností zmíním např. možnost vybrat libovolnou barvu na stránce (Color picker), možnost získat rozměry vybrané části (Ruler), převést ostylovanou stránku do lineární souvislosti (Linearize page), skrýt obrázky určené jako pozadí (Hide background images), zobrazit skryté prvky (Display hidden elements) nebo možnost nastavit velikost okna na zvolenou velikost a testovat tak layout pro vybrané rozlišení (Resize …).

Toto rozšíření ve své kategorii nemá konkurenci. Ještě dříve, než bylo toto rozšíření pro Google Chrome dostupné, používal jsem rozšíření Pendule, které nabízí pouze zlomek možností rozšíření Web Developer.

Testujeme JavaScript – jQuery či jLinq

Představme si možnost testování JavaScriptu zápisem přímo v prohlížeči, například pomocí JavaScriptového frameworku jQuery. Díky rozšíření jsshell je to velice snadné a pouhým zápisem kódu do minimalistické konzole tak testovat například animaci vybraného prvku. A můžete samozřejmě psát jak v čistém JavaScriptu, tak v jQuery.

Jak můžete vidět na obrázku, pohým zápisem do minimalistické konzole je možné na stránce spouštět JavaScriptový kód a testovat si tak vlastní funkce.

Slovo závěrem

Snažil jsem se vybrat ty nejzajímavější rozšíření, která se jistě budou hodit každému, kdo tvoří webové stránky nebo aplikace. Samozřejmě jsou dostupná i další rozšíření, které jsou určená pouze pro jednu funkci. Například rozšíření Resolution Test, které nabízí možnost testovat webovou stránku pro vybrané rozlišení a u které je možnost si vybrat z předdefinovaných nebo si nastavit vlastní. Proč ale používat více rozšíření, když je možné si pořídit jedno, které tyto funkce obsahuje také, např. zmíněný Web Developer také obsahuje možnost testovat pro vybrané rozlišení (jak jsem v jeho popisu zmínil).

Kombinace Nástroje pro vývojáře a mnou zmíněných rozšíření udělá z prohlížeče Google Chrome nepostradatelný nástroj pro webové vývojáře, web designery a kodéry.