Na box model s XRAY

Společnost Western Civilisation zveřejnila bookmarklet XRAY. Rozkošná javascriptová aplikace slouží pro inspekci box modelu prvků zobrazené webové stránky.

Po jejím spuštění se otevře okénko vybízející ke klepnutí na některou část aktuálně zobrazené stránky. Prvek stránky odpovídající výběru je zvýrazněn a v okénku XRAY jsou o něm vypsány relevantní údaje. Část informací pochází ze struktury stránky – značka HTML, její identifikátor, přiřazené třídy a cestu napříč stromem DOM. Zbytek informací se týká boxu: dozvíte se spočtený typ umístění, rozměry boxu, velikost vnitřního a vnějšího okraje. Překvapivě však chybí informace o rámečku.

XRAY v akci na CZilla Start:

Okno XRAY a zvýrazněný prvek

XRAY ale není pro každý prohlížeč, neboť využívá prvek canvas. Bookmarklet by měl fungovat v Safari 2 a výše a v prohlížečích odvozených od Mozilly (Firefox, SeaMonkey, Camino, Flock, …). Opera a MSIE zatím nic, Konqueror můžete někdo vyzkoušet. Další informace je možné si přečíst na stránce look beneath the skin.

Samotný bookmarklet je malinkatý, protože většinu JavaScriptu natahuje z webu společnosti. Kromě vlastního kódu XRAY (36 kB) využívá knihovnu jQuery.

XRAY v žádném případě nenabízí množství funkcí a informací jako Web Inspector u Safari, DOM Inspector v SeaMonkey či FireBug, ale pro základní přehled je dostatečný a může být pěkně po ruce.

3 thoughts on “Na box model s XRAY”

  1. dgx: Heh, tak jsem tu tvoji reakci pochopil, az kdyz mne Martin nakopl. V textu jsem totiz sam napsal javascriptovou, coz muj nastroj pro korekci preklepu nezna a slovo podtrhl. Kdyz jsem se koukal, jake alternativy nabizi, zrejme jsem jednu omylem vybral. Opraveno.

Leave a Reply to Martin Hassman Cancel reply

Your email address will not be published. Required fields are marked *