Jan Brašna | HereBeDragons™

Weboví inspektoři

Člověk je tvor omylný a obzvláště při webové tvorbě je lidská nedokonalost poměrnou obtíží. Skritptovací, stylovací a značkovací jazyky nemají většinou žádný striktní parser přímo ve vývojovém prostředí. Už vůbec ne nějaký ladící nástroj. Vše je interpretováno jen v prohlížečích, proto k debugování a různému dalšímu ladícímu krokování a výpisům dochází v tomto prostředí a těchto nástrojích, které slouží primárně naprosto odlišnému účelu.

Všichni jistě budou znát výborný diagnostický nástroj Web Developer Extension pro Firefox, Flock a Mozillu, díky kterému je možné provádět všelijaké vyznačování elementů a úpravy CSS a DOM naživo; prohlížeče s Geckem taktéž mají JS konzoli pro výpisy JS chyb.

Pro Internet Explorer existuje také pomocník – Web Accessibility Toolbar se sice odlišným účelem, ale podobnými funkcemi pro ladění XHTML/CSS.

Safari disponuje Debug Menu a k dispozici je i výborný nástroj WebDevAdditions pro JS logování, CSS odlaďování, zkoumání všelijak renderovaných DOM stromů, živou editaci a mnoho dalšího.

Existuje i specializovaný nástroj Xylescope pro dedikované odlaďování a zkoumání technické stránky frontendu webu s velkým vizuálním přehledem a mnoha přístupy ke zobrazení a testování vlastností všech elementů stromu.

To jsou všechno poměrně tradiční nástroje. V poslední době tu ale máme dvě nové, velmi žhavé hračky pro frontendové vývojáře a kodéry.

FireBug

Ohnivý Brouk je perfektní doplněk pro Firefox a Flock, a to nejen pro ladění a testování CSS, ale hlavně JS, DOM a AJAXu. Umožňuje interaktivní prozkoumávání elementů z DOM stromu, logování do konzole a přímé dotazování objektů a vlastností z JS příkazového řádku. Pro skriptaře je tady vynikající a unikátní XMLHttpRequest špión pro inspekci AJAXové dopravy na webu.

FireBug FireBug

Web Inspector

Webový Inspektor je nádherný nástroj pro diagnostiku v Safari, přesněji v současné době je přítomný v nočních sestaveních WebKit, kde je výchoze zapnutý, pro finální verze Safari bude dostupný v rámci ladících nabídek. Umožňuje velmi efektivní procházení DOM stromu a vybírání jen relevantních větví pro zjednodušení zobrazených informací. Údaje o stylování vybraného elementu lze zobrazit buď podle různého dědění, podle zdrojů, odkud pochází, podle konkrétních selektorů, a nebo třeba kompletní kaskádu všech stylů, vč. výchozích prohlížečových. Zkrácené vlastnosti jsou rozbalovány do detailů a jsou vidět všechny předefinované vlastnosti.

Web Inspector Web Inspector

Neděle, 19. 2. 2006 23.26 | Trvalý odkaz | Trackback

8 komentářů

  1. [1] T3RMiX

    Nějak jste pozapomněl na Operu :) http://nontrop­po.org/…ebDev­Toolbar

    20. 2. 2006 8.14

  2. [2] Jan Brašna

    [1] Díky za doplnění, primárně mi šlo o tyto dvě novinky a nikoliv o nějaký komplexní přehled, ale když už jsem to v tom úvodu načal, je určitě fér to dotáhnout.

    Podobné nástroje v Opeře nepoužívám, protože ji mám na PC/WIN jako civilní browser (a na OSX ji nepoužívám téměř vůbec), to jen ty ostatní jsou dělníci pro webdesign.

    Proto rád nechám doporučit někoho, kdo takové nástroje i v Opeře používá.

    20. 2. 2006 8.37

  3. [3] Martin Hložek

    Microsoft nabízí taktéž vlastní Developer Toolbar pro IE, i když zatím jen v beta stádiu.

    http://www.mi­crosoft.com/…de­tails.aspx?…

    20. 2. 2006 9.00

  4. [4] Petr Staníček

    Co je to za browser, z nehoz jsou ty prvni dva screenshoty? To prece neni Firefox, ne? Anebo pokud jo, tak co je to za „skin“? To je moc pekny, to chci taky… Diky za info.

    20. 2. 2006 11.43

  5. [5] Martin Hložek

    [4] Hádám, že je to skin z http://www.ta­kebacktheweb.org ,ale ruku do ohně za to nedám.

    20. 2. 2006 12.35

  6. [6] Petr Staníček

    Jo, zdá se, že to je ono. Nainstalováno, spokojenost. Díky!

    20. 2. 2006 13.48

  7. [7] Jan Brašna

    [6] Je to tak ([5]), je to tuším nějaký Brazil. Navíc v kombinaci s optimalizovaným sestavením s nativními UI prvky.

    20. 2. 2006 22.42

  8. [8] WagoOn

    Super prispevek, hned sem si stahnul panelek pro IE, protoze v nem jeste nic takoveho nemam. A diky [1] i za link na operu, hlavne ona mi totiz ve vyvoji chybela. Hlavne se mi na ni nelibi to pozdni hlaseni chyb, v konzoli je klidne zminka az po minute co chyba nastala… nebo se to stava jen mi?:(

    22. 4. 2006 18.55

RSS komentářů

Vaše postřehy

FinePrint™: Pokud máš chuť plkat mimo téma spotu nebo se tady navážet do ostatních, máš šanci, že komentář půjde do křemíkového pekla. Účelové nebo anonymní příspěvky budu dle rozmaru a bez vysvětlování likvidovat. Podepiš se; pokud se k napsanému nehlásíš, ani to neodesílej. Diskusi mám rád, ne už tak flame a blbce. Mysli na to při psaní.