Web Developer & Firebug: vývojářské duo pro Firefox - Grafika.cz - vše o počítačové grafice

18. května 2010, 00.00 | Vývoj webových stránek se obvykle neobejde bez specializovaných developerských nástrojů, které umí například zobrazovat a manipulovat s prvky a objekty na stránkách, detailně zkoumat jejich vlastnosti, analyzovat síťovou konektivitu, ladit skripty, zkoumat kaskádové styly a dokonce i měnit HTML kód a CSS pro libovolnou online renderovanou webovou stránku. Dnes si představíme dvě velmi oblíbené bezplatné vývojářské extenze pro prohlížeč Mozilla Firefox.

Pokud se zabýváte webdesignem nebo obecně čímkoliv, co s vývojem webových stránek nějak souvisí, určitě při své práci využíváte některé z integrovaných nebo externích developerských pluginů či různých specializovaných nástrojů pro webové prohlížeče. Existuje jich celá řada pro Internet Explorer, Operu, Firefox a další prohlížeče, ve kterých je zpravidla nutné odladit finální podobu a funkčnost websitů.

Pro Mozillu Firefox existuje obrovské množství nejrůznějších extenzí, které umí rozšířit funkce prohlížeče lidově řečeno ad absurdum. Pro webdesignéry a vývojáře jsou určeny vynikající developerské doplňky Web Developer a Firebug, které nabízí nejen rozsáhlé informační, nýbrž i řadu jiných velmi užitečných funkcí pro ladění vizuální podoby, struktury a také interních vlastností a "provozuschopnosti" webových stránek.

Web Developer

Doplněk Web Developer přidá do Firefoxu (a jeho alternativ Flock a Seamonkey) pro Windows, Mac OS X a Linux novou nástrojovou lištu s řadou menu, které v sobě ukrývají spoustu šikovných funkcí. Funkce extenze Web Developer jsou pak dostupné i z menu Nástroje respektive Tools a můžete je vyvolat pevnými či uživatelem definovatelnými klávesovými zkratkami. Funkce doplňku Web Developer vychází z extenze PNH Developer Toolbar a několika jiných pluginů, což ale není nijak důležitá informace. Mnohem důležitější jsou právě samotné informační funkce doplňku Web Developer, které jsou neúnavnými dělníky v továrničce na tvorbu a vývoj webových stránek.

Web Developer 1.1.8 - mezi hlavní funkce extenze patří grafické zvýraznění DIVů a dalších prvků ve webových stránkách

Jednotlivá menu a funkce extenze Web Developer jsou roztříděné do kategorií pro zákazové operace, práci se sušenkami alias cookies, kaskádovými styly, formuláři a jejich prvky a obrázky, které doplňují různé další speciální funkce. Asi nejčastěji využívanou funkcí pluginu Web Developer je schopnost graficky orámovat a tím zvýraznit jednotlivé blokové a jiné prvky, s pomocí kterých pak můžete zkoumat struktury, části a s využitím informací o kaskádových stylech pak i vlastnosti webových stránek.

Web Developer 1.1.8 - detail jednoho z blokových prvků včetně příslušných kaskádových stylů

Web Developer umí DIVy a další prvky stránky zvýraznit také interaktivně po najetí myší na daný prvek, jehož kaskádové styly a vlastnosti lze nechat zobrazit v plovoucích informačních paletách a pochopitelně i přímo v okolí daného prvku. Neocenitelnou pomůckou je pak zobrazení dědičnosti prvků, s pomocí kterých pak lze například jednoduše vizuálně zjistit, jak „hluboko“ se daný prvek nachází ve struktuře HTML/XHTML atp. kódu a relativně snadno tak najít jeho kaskádové styly.

To ovšem zdaleka není všechno, co Web Developer nabízí. V dalších menu najdeme propojení na online validátory webových stránek a kaskádových stylů, které lze (podle zvolené varianty) použít jak na online, tak i na offline stránky na lokálním serveru. Mezi zákazovými funkcemi najdeme jednoduché vypnutí Javy, JavaScriptu a předávání odkazů, hodně užitečné jsou i funkce pro manipulaci s cookies. Zásadní funkce extenze najdeme v menu CSS a Informace, kde je pravý ráj kaskádových stylů, informacích o objektech, barvách, dále pak v menu Obrázky a Formuláře, jejichž pojmenování je už samo o sobě jasné.

Web Developer 1.1.8 - zobrazení kódu stránky renderované prohlížečem

Web Developer 1.1.8 - jedna z informačních funkcí dokáže analyzovat a přehledně zobrazit všechny barvy v daném websitu

Web Developer 1.1.8 - podrobné informace o blokových prvcích, jejich rozměrech a základních vlastnostech včetně děděných potomků v CSS

Web Developer 1.1.8 - doplněk umí také měnit velikost okna prohlížeče

Web Developer 1.1.8 - přehled nástrojů na validaci HTML/XHTML/CSS atp. dokumentů

Web Developer 1.1.8 - volby a funkce extenze týkající se obrázků

Web Developer 1.1.8 - stejně jako u barev umí doplněk extrahovat a přehledně zobrazit všechny obrázky v aktuálně zobrazené webové stránce

Web Developer 1.1.8 - informační a vývojářské funkce pro formuláře

Web Developer 1.1.8 - jedna z funkcí pro manipulaci s cookies

Web Developer 1.1.8 - nabídka funkcí pro vypnutí různých funkcí pro Javu, JavaScript aj.

Web Developer 1.1.8 - podrobnější nastavení validace HTML/XHTML dokumentů a kaskádových stylů

Web Developer 1.1.8 - první ze sekcí předvoleb doplňku

Web Developer 1.1.8 - nastavení klávesových zkratek pro rychlý přístup k různým důležitým funkcím extenze

Web Developer 1.1.8 - propojení doplňku s online validátory a testovacími nástroji

Firebug

Druhou extenzí pro Firefox z kategorie open source je rovněž čistě vývojářský doplněk Firebug, který je k dispozici i v jeho zjednodušené verzi Firebug Lite. Firebug je pravděpodobně jednou z nepovedenějších developerských extenzí pro Firefox, přičemž počet informačních a testovacích funkcí Firebugu lze dále rozšiřovat prostřednictvím uživatelských modulů.

Hlavním úkolem pluginu Firebug je inspekce a možnost interaktivní změny kaskádových stylů i layoutu webové stránky prakticky v reálném čase pro jakoukoliv z běžných webových stránek, jaké je Firefox schopen zobrazit! Inspekce prvků a kaskádových stylů je přitom velmi jednoduchá – označíte text či prvek kurzem či myší a aktivujete funkci Prozkoumat. Firebug si otevře své okno, ve kterém jsou hezky pohromadě seřazeny záložky pro zobrazení a úpravy HTML/XHTML atp. kódu, kaskádových stylů, skriptů, okno s DOM (API) pro JavaScript a další skriptovací jazyky a různými doplňkovými či speciálními funkcemi.

Firebug 1.5.4 - zobrazení zdrojového kódu a kaskádových stylů

Firebug 1.5.4 - rozbalené části struktury prvků stránky a kontextové menu extenze

Pokud je to v dané situaci možné, umí Firebug navíc vizualizovat metriku kaskádových stylů – například u rozměrů a okrajů boxů apod. Součástí doplňku Firebug je vestavěný JavaScript debugger, s pomocí kterého můžete zkoumat a ladit skripty například pro galérie a mnoho jiných případů. Skvělou funkcí extenze jsou (rovněž integrované) funkce pro analýzu síťové konektivity například včetně sledování doby stažení a načtení obrázků – lze pak tedy jednoduše zjistit, jak dlouho se který grafický prvek načítá a v jaké situaci.

Prostřednictvím uživatelských modulů lze Firebug rozšířit například o podporu debuggingu jQuery a ColdFusion, práci s cookies, sledování výstupu z flash komponent, měření načítání celých webových stránek, SEO optimalizace a spoustu dalších užitečných funkcí.

Firebug 1.5.4 - informace o flash objektu ve stránce

Firebug 1.5.4 - informační funkce související s obrázky zahrnují například i rychlost jejich načtení

Firebug 1.5.4 - funkce pro ladění skriptů