Dajbych.net


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

, 2 minuty čtení

In­ter­net Ex­plorer ob­sahuje nástroje pro vývo­jáře, které posky­tují velké množství o tom, jak proh­lížeč vykres­luje we­bové stránky. Vývo­jářské nástroje jsou pro vývo­jáře HTML5 ap­likací ste­jně důležité, jako je ladění ap­likace ve Vi­sual Studiu pro vývo­jáře .NET ap­likací. Ve Vi­sual Studiu je ta důležitá klávesa F5, v In­ter­net Ex­ploreru je to F12. Vyvstává otázka, proč k to­muto účelu používám právě In­ter­net Ex­plorer. Od­pověď je jed­noz­načná. Vývo­jářské nástroje v IE po­važuji za ne­jpřeh­led­nější.

Přímá úprava CSS

Doladění okrajů, ve­likosti písma nebo třeba barvy pozadí jde provádět přímo v In­ter­net Ex­ploreru. Tato funkce je sice pří­tomná už něko­lik let, ale teď se dají snadno přidá­vat styly nové.

F12

Stačí kli­knout na řádek s kon­cem složené závorky a přidá se tex­tové pole, do kterého jde nové pravidlo nap­sat.

F12

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

Op­ti­mal­izace webu se neobe­jde bez měření toku v síti. Pro kon­trolu kódu HTTP od­povědi, který by měl být pro první poža­davek 200, pro druhý 304 a pokud možno pro žádný 500, se ne­jlépe hodí souhrnný přeh­led.

F12
F12

Podrobný pohled na vykreslování stránky

Měření odezvy uži­va­tel­ského rozhraní vykreslí časovou osu, na které se dá oz­načit výsek našeho zájmu. Po­drobný sloup­cový graf zná­zorňuje využití pro­ce­soru jed­notlivými sub­sys­témy proh­lížeče. Snadno tak zjistíte, která čin­nost zpo­ma­luje vaše stránky. Jestli mají napřík­lad pře­spříliš kaská­dových stylů, slouho se sty­luj. Pokud použí­vají špatný JavaScript, proh­lížeč stráví velké množství času skrip­továním.

F12

Měření času javascriptových metod

Pokud proh­lížeč tráví hodně času skriptováním, dá se po­mocí Pro­fileru snadno zjis­tit, které části kódu tr­vají ne­jdéle. Zo­brazují se jak me­tody DOM, kterými se ma­nip­u­luje se stránkou, tak i vlastní javascrip­tové funkce.

F12

Měření spotřeby paměti

Málok­terý mo­bil má tak velkou paměť, jako má desk­topové PC vývo­jáře. Současný stav je spíš takový, že ve­likost paměti RAM vývo­jáře je ste­jná jako ve­likost Flash paměti v mo­bilu uži­vatele. Není proto od věci držet paměťovou náročnost pod urči­tou mezí. K měření ve­likosti paměti, kterou stránka potře­buje, ne­jprve musíte vytvořit snímek haldy. Ten pak můžete procházet a na­jít části stránky, které si ukro­jily příliš velké množství paměti.

F12