Developer browser plugins, part 1
Developer browser plugins jsou
užitečné zásuvní moduly zaměřené na web, které vám mohou výrazně ulehčit práci
při vytváření nebo ladění statických, resp. dynamických html stránek. Mezi další
oblasti, kde tyto nástroje výhodně využijete je ladění CSS (Cascading Style
Sheets) nebo JS (JavaScript). Tolik úvodem. V následujícím seriálu si postupně
představíme: Internet Explorer Developer Toolbar (plugin pro Internet
Explorer), Web Developer Toolbar & Firebug (plugins pro
Firefox) a Web Accessibility Toolbar (plugin pro Operu).
INTERNET EXPLORER DEVELOPER TOOLBARPo stáhnutí
souboru IEDevToolBarSetup.msi ze stránky firmy Microsoft, jeho
instalaci spustíte např. pomocí programu Windows Explorer tak, že na soubor
dvakrát kliknete (double-click), resp. pravým tlačítkem myši zobrazíte
kontextové menu a vyberete volbu Install. Následně se spustí průvodce,
který vás krok za krokem provede instalací zásuvného modulu.
Po úspěšné instalaci na záložce Standard Buttons přibude ikona  a v menu View | Explorer Bar položka IE
Developer Toolbar. Po kliknutí na ikonu , resp. po aktivaci položky IE Developer
Toolbar se zobrazí hlavní okno zásuvného modulu.
Okno se skládá z panelu, na kterém je iconbar s menu,
pod ním se nachází (z pravé strany) sekce, která zobrazuje stromovou DOM
(Document Object Model) strukturu dané stránky, vedle ní je okno s aktuálními
atributy vybraného HTML tagu (v tomto okně najdete i dvě tlačítka: první vám
umožní přidat nový atribut, resp. kaskádový styl; druhé tlačítko vám umožní
vymazat kterýkoli existující atribut nebo styl; vedle tlačítek najdete ještě
informaci o aktuálně editovaném uzlu DOM struktury) a nakonec poslední sekce
zobrazuje aktuálně CSS styly aplikované na vybraný HTML tag. V posledních dvou
jmenovaných najdete, v spodní části, ovládací prvky checkbox, pomocí kterých si
můžete nechat zobrazit seznam všech readonly atributů, resp. seznam všech
standardních hodnot stylů.
Panel s ikonami vám dovolí realizovat následující funkce:  – Select Element by Click (umožní vám
vybrat jediným klikem libovolný HTML element zobrazené stránky; tento element
graficky ohraničí barevným obdélníkem a po kliku na takto označený element dojde
k jeho okamžitému vyhledaní v struktuře DOM aktuální stránky),  – Refresh (obnovení stromové
struktury),  – Clear Browser
Cache (vymaže cache prohlížeče),  – View Element Source with Style (v
novém okně zobrazí vybraný HTML element včetně aktuálních kaskádových stylů),
úplně nalevo si ještě můžete všimnout ikonu  – Unpin, pomocí které můžete přepnout
zobrazování zásuvného modulu IE Developer Toolbar do samostatného okna;
po opětovném stlačení ikony na stejném místě se zobrazení zásuvného modulu vrátí
do původního stavu.
V menu zásuvného modulu IE Developer Toolbar najdete následující
položky:
File |
Undo All – vrátí všechny změny vykonané na aktuální stránce do původního stavu
(může jít např. o přidání stylu, změnu stylu, přidání atributu, případně změnu
hodnoty atributu).
Pod položkou Find v menu, najdete položky: Select Element by
Click – umožní vám vybrat libovolný HTML element zobrazené stránky, přičemž se
element automaticky ohraničí modrým obdélníkem. Po kliku na vybraný element se
vyhledá a zobrazí ta část DOM struktury, která daný element obsahuje, včetně
jeho atributů a kaskádových stylů. Element můžete v stránce vyhledat i pomocí
položky Find Element... Ta však najde jenom první element, který vyhovuje
zadaným podmínkám (vyhledávat můžete přes Element, Class, Id nebo Name). Každý
další element stejného typu najdete pomocí funkce Find Next.
Pod položkou Disable najdete volby jako Script (zakáže
všechny skripty v HTML stránce), Popup Blocker (zakáže blokování popup
oken) a All CSS (zakáže všechny kaskádové styly na HTML stránce zobrazené
v prohlížeči).
Následující položka View vám umožní nad některými elementy
zobrazit doplňující informace jako Class and ID Information
(class nebo id každého HTML elementu; navíc v tooltipu
najdete i název HTML elementu), Link Paths (zobrazí obsah
href každého tagu A vyskytujícího se na zobrazené stránce), Link
Report (vygeneruje seznam všech href atributů, včetně hodnot
atributů onclick každého HTML tagu A), Tab Indexes (zobrazí
nad všemi elementy hodnotu atributu tabIndex; samozřejmě jen v
případě, že je takový atribut v daném tagu definován), Access Keys
(zobrazí nad všemi elementy hodnotu atributu accessKey), Source
DOM Element+Styles (zdrojový kód vybraného elementu včetně kaskádových
štylů), Source DOM Element (zdrojový kód vybraného elementu), Source
DOM Page (zdrojový kód stránky), Source Original (původní zdrojový
kód stránky bez dodatečného formátovaní) a CSS Selector Matches (zobrazí
všechny kaskádové styly zobrazené stránky, včetně počtu jejich výskytů).
Přes položku Outline z menu si můžete nechat barevně zobrazit
všechny elementy daného typu, např. Tables (tabulky), Table Cells
(buňky tabulky), DIV elements (DIV elementy), Images (obrázky),
případně libovolné jiné elementy, které si sami určíte. Dále v tomto submenu
najdete ještě volby: Positioned Objects – barevně ohraničí všechny
elementy, které jsou na stránce umístněné Relative (relativně),
Absolute (absolutně), Fixed (pevně) nebo Float (plavou) a
Clear Outlines – zruší všechny ohraničení všech elementů na aktuální
stránce.
Další položkou v menu je Images. Ta vám poskytne následující
funkce: Disable Images (zakáže všechny obrázky v zobrazené stránce),
Show Images Dimensions (zobrazí rozměry [šířka x výška] všech obrázků
nacházejících se na stránce), Show Image File Sizes (zobrazí velikost [v
B, KB, MB] všech obrázků nacházejících se na stránce), Show Image Paths
(zobrazí hodnoty atributů src všech obrázků zobrazených na aktuální
stránce), View Alt Text (zobrazí hodnoty atributů alt všech
obrázků zobrazených na stránce) a View Image Report (vygeneruje přehledný
report ze všech obrázků zobrazených na aktuální stránce, včetně hodnot jejich
atributů).
V pořadí další položkou v menu je Cache. V tomto submenu najdete
položky jako: Always Refresh from Server (vždy obnovit přímo ze serveru),
Clear Browser Cache… (vymazat vyrovnávací paměť prohlížeče), Clear
Browser Cache for This Domain (vymazat vyrovnávací paměť prohlížeče pro
danou doménu), Disable Cookies (vypnout používaní cookies), Clear
Session Cookies (vymazat session cookies), Clear Cookies for Domain
(vymazat cookies pro danou doménu), View Cookie Information (zobrazit
detailnější informace o cookies aktuální HTML stránky).
Předposlední položkou v menu je Tools. Přes submenu této položky
se dostanete k třem užitečným nástrojům: Resize (pokud se potřebujete na
danou HTML stránku podívat v jiném rozlišení, není nic jednoduššího jako použít
tuto funkci; předdefinované hodnoty jsou 800x600, 1024x768, 1280x768, 1280x1024;
nechybí ani možnost nadefinovat si vlastní šířku a výšku prohlížeče), Show
Ruler – zobrazí malé okno, pomocí kterého můžete do stránky vkládat
pravítka; pravítkem můžete např. zjistit šířku resp. výšku libovolného elementu
na stránce, včetně jeho počátečných a koncových souřadnic; pravítek můžete do
HTML stránky vložit i více, stačí když budete při vkládaní dalšího pravítka
držet stlačený kláves [CRTL]; jestliže vkládáte do stránky více pravítek,
můžete jich dokonce aj barevně odlišit.
Změnu barvy aktivujete kliknutím na některou barvu
(černá, bíla, červená, zelená) nacházející se ve čtverci, v levém horním rohu
okna; libovolnou další barvu si můžete nadefinovat pomocí známého Windows
dialogu; kromě uvedené funkčnosti máte k dispozici i lupu, kterou
aktivujete/deaktivujete pomocí kláves [CTRL + M], Show Color
Picker – zobrazí malé okno, pomocí kterého můžete získat RGB složky
libovolné barvy ze zobrazené HTML stránky; vybranou barvu je možné získat i ve
formátu použitelném v HTML, např. #BD9600.
Poslední položkou v menu je Validate. Tato
položka obsahuje submenu s volbami jako HTML, CSS, Feed,
Links, Local HTML..., Local CSS, Accessibility a
Multiple Validations. Všechny uvedené volby slouží na prověření zobrazené
HTML stránky z hlediska správnosti použití HTML tagů, CSS stylů a pod.
NÁZEV: Internet Explorer Developer Toolbar [English]
VERZE: 1.00.2188.0
AUTOR: Microsoft
SOUBOR: IEDevToolBarSetup.msi
VELIKOST: 624 KB
WWW: http://www.microsoft.com/
Další části seriálu:
|
Reklama
Anketa
