Dajbych.net


Vývojářské nástroje F12 v Internet Exploreru 11

, 3 minuty čtení

In­ter­net Ex­plo­rer ob­sahuje ná­stroje pro vý­vo­jáře, které po­sky­tují velké množ­ství o tom, jak pro­hlí­žeč vy­kres­luje we­bové stránky. Vý­vo­jář­ské ná­stroje jsou pro vý­vo­jáře HTML5 apli­kací stejně dů­le­žité, jako je la­dění apli­kace ve Vi­sual Stu­diu pro vý­vo­jáře .NET apli­kací. Ve Vi­sual Stu­diu je ta dů­le­žitá klá­vesa F5, v In­ter­net Ex­plo­reru je to F12. Vy­vstává otázka, proč k to­muto účelu po­u­ží­vám právě In­ter­net Ex­plo­rer. Od­po­věď je jed­no­značná. Vý­vo­jář­ské ná­stroje v IE po­va­žuji za nej­pře­hled­nější.

Přímá úprava CSS

Do­la­dění okrajů, ve­li­kosti písma nebo třeba barvy po­zadí jde pro­vá­dět přímo v In­ter­net Ex­plo­reru. Tato funkce je sice pří­tomná už ně­ko­lik let, ale teď se dají snadno při­dá­vat styly nové.

Stačí klik­nout na řá­dek s kon­cem slo­žené zá­vorky a přidá se tex­tové pole, do kte­rého jde nové pra­vi­dlo na­psat.

Přehlednější výsledky měření sítě

Op­ti­ma­li­zace webu se ne­o­be­jde bez mě­ření toku v síti. Pro kon­t­rolu kódu HTTP od­po­vědi, který by měl být pro první po­ža­da­vek 200, pro druhý 304 a po­kud možno pro žádný 500, se nej­lépe hodí sou­hrnný pře­hled.

Podrobný pohled na vykreslování stránky

Mě­ření odezvy uži­va­tel­ského roz­hraní vy­kreslí ča­so­vou osu, na které se dá ozna­čit vý­sek na­šeho zájmu. Po­drobný sloup­cový graf zná­zor­ňuje vyu­žití pro­ce­soru jed­not­li­vými sub­systémy pro­hlí­žeče. Snadno tak zjis­títe, která čin­nost zpo­maluje vaše stránky. Jestli mají na­pří­klad přespří­liš kaská­do­vých stylů, slouho se styluj. Po­kud po­u­ží­vají špatný Ja­vaScript, pro­hlí­žeč stráví velké množ­ství času skrip­to­vá­ním.

Měření času javascriptových metod

Po­kud pro­hlí­žeč tráví hodně času skripto­vá­ním, dá se po­mocí Pro­fi­leru snadno zjis­tit, které části kódu tr­vají nejdéle. Zob­ra­zují se jak me­tody DOM, kterými se ma­ni­puluje se strán­kou, tak i vlastní ja­vascrip­tové funkce.

Měření spotřeby paměti

Má­lokterý mo­bil má tak vel­kou paměť, jako má desk­to­pové PC vý­vo­jáře. Sou­časný stav je spíš ta­kový, že ve­li­kost paměti RAM vý­vo­jáře je stejná jako ve­li­kost Flash paměti v mo­bilu uži­va­tele. Není proto od věci dr­žet pamě­ťo­vou ná­roč­nost pod ur­či­tou mezí. K mě­ření ve­li­kosti paměti, kte­rou stránka po­tře­buje, nej­prve mu­síte vy­tvo­řit sní­mek haldy. Ten pak mů­žete pro­chá­zet a najít části stránky, které si ukro­jily pří­liš velké množ­ství paměti.