Developer browser plugins, part 2
Vítám vás při další části
seriálu Developer browser plugins. Dnes se podíváme na Web Developer
Toolbar, který je určen pro prohlížeč Firefox.
WEB DEVELOPER TOOLBARPo instalaci zásuvného modulu
přímo z webové stránky, získáte nástroj, který vám poskytne
následující možnosti:
 –
DISABLE (možnost zakázat Cache, Javu,
Javascript, Meta Redirects – meta tag redirect,
Minimum Font Size – minimální velikost písma, Page
Color – barvy v stránce, Popup Blocker – popup
okna, Proxy, Referrers).
 – COOKIES
(Disable Cookies – zakáže použití cookies, Clear
Session Cookies – vymaže cookies, Delete Domain
Cookies – vymaže cookies pro danou doménu, Delete Path
Cookies – vymaže cookies pro danou stránku, View Cookies
Information – vygeneruje seznam všech cookies, které byli vytvořené
v souvislosti s aktuální HTML stránkou, Add Cookie… – umožní
vám přidat cookie).
 – CSS
(Disable Styles – umožní zakázat různé typy stylů {všechny
styly, print styly, standardní styly, vložené styly, vnitřní styly a pod.},
Disable CSS By Media Type – umožní zakázat styly podle typu
média {handheld, print}, View CSS – vygeneruje seznam stylů,
které byli použité na dané HTML stránce, View Style Information
– aktivuje detektor stylů, to znamená, jestliže pomocí kurzoru myši
kliknete na nějaký element na aktuální HTML stránce zobrazí se definice všech
stylů souvisejících s vybraným elementem, Add User Style Sheet...
– umožní vám přidat do stránky vlastní soubor s kaskádovými styly,
Edit CSS – zobrazí okno, přes které můžete editovat všechny
soubory s kaskádovými styly patřící aktuální stránce, Use Border Box
Model – aktivuje border box model).
 – FORMS
(Display Form Details – zobrazí detailnější informace k
formulářům na aktuální stránce, Show Passwords – zobrazí
hesla v elementech input, které mají nastavený atribut
type="password", View Form Information –
vygeneruje seznam všech formulářů včetně elementů, Convert Form
Methods – umožní změnit hodnotu atributu method z "get" na "post" a
opačně, Convert Select Elements To Text Input – zkonvertuje
všechny select elementy na input elementy, Enable Auto Completion
– aktivuje automatické doplňování textu pro jednotlivé elementy ve
formuláři, Enable Form Fields – zpřístupní všechny elementy
nacházející se ve formuláři, které mají nastavený atribut
disabled="disabled", Clear Radio Buttons –
všechny prvky typu radio nacházející se na aktuální stránce nastaví do výchozí
polohy, Make Form Fields Writable – všechny elementy, které
mají nastavený atribut readonly="readonly", přepne do editačního
režimu, Populate Form Fields – vyplní všechny elementy input
nacházející se na aktuální stránce hodnotou atributu name,
Remove Maximum Lengths – odstraní z input elementů atribut
maxlength, který omezuje délku vstupu).
 – IMAGES
(Disable Images – zakáže všechny obrázky pocházející z
aktuální, resp. z externí stránky, Display Alt Attributes,
Image Dimensions, Image File Sizes, Image
Paths – zobrazí hodnoty atributů alt, rozměry obrázků,
velikost obrázků v B, KB, MB a plnou cestu k obrázkům uvedenou v atribute
src, Find Broken Images – vygeneruje seznam
poškozených obrázků, Outline Images – ohraničení obrázků; k
dispozici máte následující možnosti ohraničení: všechny obrázky, jen obrázky
pozadí, obrázky s definovanými rozměry, obrázky s prázdným atributem
alt, obrázky s příliš velkými rozměry, obrázky bez atributu
alt, obrázky bez definovaných rozměrů a obrázky bez atributu
title; uvedené možnosti můžete navíc libovolně kombinovat,
View Images Information – z aktuální HTML stránky vygeneruje
seznam všech obrázků i s jejich jednotlivými atributy, Hide Background
Images – skryje všechny obrázky, které jsou definované v stránce
přes kaskádové styly, Hide Images – skryje všechny obrázky,
Make Images Full Size – zobrazí všechny obrázky s plnou
velikostí, Make Images Invisible – po aktivovaní této volby
se všechny obrázky stanou neviditelnými, Replace Images With Alt
Attributes – nahradí všechny obrázky na aktuální HTML stránce
jejich definovanými atributy alt).
 – V sekci
INFORMATION najdete volby, pomocí kterých si můžete nechať pro
aktuální HTML stránku zobrazit např.: zkratky, kotvy, pořadí elementů DIV,
klávesové zkratky, atributy id a class definované na
jednotlivých elementech, šířku a výšku elementů DIV, FORM a TABLE, detailní
informace z atributu href každé linky, informace o objektech a
jejich parametrech, atributy z–index elementů DIV, hloubku tabulek, hodnotu
atributu tabindex, který definuje v jakém pořadí jednotlivé
elementy získají zaměření (angl. focus), informace o tabulkách, atribut
title každého elementu, který ho má definovaný a topografické
informace. Specialitou je volba Display Element Information
(mimochodem dostupná i přes klávesovou zkratku [Ctrl+Shift+F]), pomocí
které aktivujete detektor elementů. To znamená, jestliže pomocí kurzoru myši
kliknete na nějaký element v stránce, získáte podrobné informace o jeho
atributech, pozici, předcích a potomcích. View Anchor Information
– vygeneruje stránku se seznamem kotev; po kliku na příslušnou kotvu budete
přesunuti na přesně na místo v stránce, kde se daná kotva nachází, View
Color Information – vygeneruje seznam barev, které jsou na dané
stránce použité, View Document Outline – vygeneruje seznam
oblastí ohraničených tagmi H1, H2, H3, H4, View Document
Size – vygeneruje seznam souborů (s příponami html, img, obj, js,
css a pod.) z kterých je daná stránka složená; nechybí informace o velikosti
jednotlivých souborech jako i celkový součet v B, resp., KB, View
JavaScript – vygeneruje seznam všech skriptů použitých na stránce,
View Link Information – vygeneruje aktivní seznam všech linek
nacházejících se na stránce, View Meta Tag Information –
vygeneruje seznam hodnot uvedených v META tagoch, View Page
Information – zobrazí okno s názvem Page Info, v kterém najdete
několik kategorií informací k dané stránce (např. všeobecné, související s
formulářem, linky, média a informace zaměřené na bezpečnost), View
Response Headers – zobrazí hlavičku odpovědi serveru, na který byl
poslán požadavek (angl. request); např. v případě požadavku na server
http://www.google.sk/ dostanete odpověď:
Cache-Control: private
Content-Type: text/html; charset=UTF-8
Content-Encoding: gzip
Server: gws
Content-Length: 1694
Date: Sat, 01 Dec 2007 20:07:34 GMT
200 OK
 – Sekce
MISCELLANEOUS obsahuje následující položky: Clear Private
Data – umožní vymazat Cache, Historii, HTTP autorizaci, případně
všechny tři skupiny naráz, Display Line Guides – zobrazí
čáry, které vám můžou posloužit např. jako pravítko; čárami můžete pohybovat
uchopením pomocí kurzoru myši; nad čárami se zobrazuje informace, která obsahuje
následující údaje: pozicí od levého horního rohu obrazovky prohlížeče,
předcházející číslo a následující číslo Line Guide; okrem toho přibude na
obrazovce Toolbar – Line Guides s tlačítkami, Color –
možnost zvolit jinou barvu čar (standardně se používá červená), Add
Horizontal Line Guide – přidá další vodorovnou čáru a Add
Vertical Line Guide – přidá další svislou čáru. Display Page
Magnifier – zobrazí na obrazovce okno, přes které se můžete na daný
výsek stránky podívat se zvětšením. Magnification level určuje stupeň zvětšení a
odporoučený rozsah je 0 až 10. Nastavení nové hodnoty vykonáte tak, že ji
zapíšete do pole Magnification level a stlačíte kláves [Enter]. Následně
se toto zvětšení aktivuje. Display Ruler – zobrazí toolbar
Ruler a na obrazovce jakési pravítko s mřížkou, kterého výšku a šířku můžete
libovolně měnit. Na lište Ruler se zobrazuje X–ová a Y–ová souřadnice
levého horného rohu a pravého dolního rohu pravítka, Show Comments
– zobrazí všechny komentáře umístněné v aktuální HTML stránce, Show
Hidden Elements – zobrazí všechny skryté elementy umístněné v
aktuální HTML stránce, Show Window Chrome – zobrazí všechny
okna typu Chrome, Edit HTML – umožní editovat v aktuální HTML
stránku, Linearize Page – aktuální HTML stránku zobrazí
lineárně, Make Frames Resizable – umožní měnit velikost rámů
vytvořených pomocí tagů <frame>, které mají nastavený atribut
noresize, Small Screen Rendering – vykreslí aktuální HTML
stránku na malé ploše, Visited Links – označí všechny linky
buď jako navštívené nebo nenavštívené.
 – V pořadí další sekcí je
OUTLINE. Tato sekce poskytuje funkce na ohraničení, resp.
zvýraznění HTML elementů v aktuální stránce. Jednotlivé funkce mají následující
význam: OutLine Frames – barevně zvýrazní všechny rámy v HTML
stránce, OutLine Headings – zvýrazní všechny výskyty HTML
tagů H1, H2, H3, H4, H5, H6..., OutLine Links –
obsahuje submenu, v kterém najdete volby na zvýraznění všech externích linek a
též všech linek bez atributu title, OutLine Tables
– barevně zvýrazní tabulky, buňky nebo jejich kombinaci, OutLine
Block Level Elements – barevně zvýrazní úroveň zanoření blokových
elementů, OutLine Deprecated Elements – barevně zvýrazní
všechny nepřípustné, resp. neschválené HTML elementy, OutLine Positioned
Elements – barevně zvýrazní všechny absolutné, relativné,
plávající, či pevně umístněné elementy, OutLine Current Element
– zvýrazní kterýkoli HTML element na aktuální stránce a OutLine
Custom Elements... – umožní barevně zvýraznit vybrané HTML
elementy. Celkem takto můžete zvýraznit až pět typů HTML elementů a každému
přiradit jinou barvu.
 – V sekci RESIZE
najdete položky Display Window Size – zobrazí okno, v kterém
najdete informace o aktuální velikosti okna prohlížeče a výřezu stránky,
Display Window Size In Title – zobrazí podobné informace jako
předcházející funkce avšak nyní v titulku prohlížeče, resp. záložky,
Resize window... – možnost nastavit vlastní rozměry
prohlížeče, resp. výřezu stránky, 800x600 – nastaví velikost
okna prohlížeče na 800x600 bodů, Edit Resize Dimension... –
umožní vám nadefinovat si vlastní velikosti okna prohlížeče, resp. výřezu
stránky, Zoom – zvetšení resp. zmenšení aktuální HTML
stránky; k dispozici máte i klávesové zkratky [Ctrl + Shift + Z] pro
zvetšení, resp. [Ctrl + Shift + X] pro zmenšení.
 – Sekce TOOLS
obsahuje položky (Validate CSS, Validate Feed, Validate HTML, Validate
Links, Validate Section 508, Validate WAI), pomocí kterých můžete
odstranit případné chyby ze svých kódů, View Speed Report –
vygeneruje sestavu včetně informace o čase, který je potřebný na načítaní
jednotlivých častí stránky, Edit Tools... – otevře okno, přes
které můžete nadefinovat další stránky, které můžete použít na kontrolu
zdrojových kódů aktuální stránky, DOM Inspector – umožní
prohlížet DOM strukturu aktuální HTML stránky, Error Console
– zobrazí konzolu s chybami v stránce, Java Console –
zobrazí Java konzolu, Display Page Validation – zobrazí panel
Page Validation a spustí automatickou kontrolu HTML, CSS, Accessibility
(přístupnost, dostupnost stránky). Poslední tři položky (Validate Local
Accessibility, Validate Local CSS, Validate Local HTML) v této sekci se
zabývají kontrolou lokálně umístněních HTML stránek a CSS souborů.
 – VIEW SOURCE
(obsahuje položky: View Source – zobrazení zdrojového kódu
stránky, View Frame Source – zobrazení zdrojového kódu rámu,
View Generated Source – zobrazení generovaného zdrojového
kódu, Edit View Source With Applications... – možnost
editovat zdrojový kód stránky prostřednictvím libovolné aplikace).
 – Poslední sekce
OPTIONS obsahuje položky jako Persist Features
– zapne/vypne trvalé aplikovaní funkcí na HTML stránky, Reset
Page – vykoná reset aktuální HTML stránky, Options
– nastavení zásuvného modulu Web Developer, Help –
zobrazení domovské stránky zásuvného modulu, About – zobrazí
informace o autorovi a verzi zásuvného modulu.
Web Developer Toolbar je standardně dostupný přes menu Tools | Web
Developer, nebo jako lišta nástrojů přes menu View | Toolbars | Web
Developer Toolbar.
NÁZOV: Web Developer
VERZIA: 1.1.4
AUTOR: Chris Pederick
SÚBOR: web_developer-1.1.4-fx+fl.xpi
WWW: http://chrispederick.com/
Další části seriálu:
|
Coolhousing
Anketa
