F12 a její využití při tvorbě webu

19. 07. 2017

V návaznosti na minulý příspěvek Užitečné zkratky a widgety vám přinášíme článek, ve kterém se dozvíte, jak využít klávesovou zkratku F12. Tyto tipy jsou užitečné zejména pro ty, kteří se zajímají o tvorbu webu a v inPage si sami upravují vlastní styly CSS nebo zdrojový kód stránek. 

Webové prohlížeče

Níže popsané funkce spolehlivě naleznete v Google Chrome a Mozille (tam je ideální si přidat rozšíření prohlížeče Firebug, které je určeno pro webové vývojáře). 

Vždy si můžete vybrat, zda si přejete zobrazení na šířku ve spodní části obrazovky, na výšku, na bok vlevo či vpravo, nebo zda chcete samostatně zobrazit prostředí s kódy a web.

Pro účely článku jsme využili zobrazení na šířku ve spodní části obrazovky v prohlížeči Google Chrome.  

F12 - jednotlivé části

Toto vývojářské prostředí obsahuje mnoho funkcí, my vám ale teď představíme ty základní a nejpoužívanější.

HTML kód (zdrojový kód) stránky

Na obrázku jde o žluté velké pole, konktrétně záložku Elements, ve které naleznete HTML kód stránky a pomocí malých šipeček si rozkliknete i vnoření jednotlivých prvků. Tyto prvky, ve kterých je například námi zvolený obrázek postupně vnořen, se dozvíte i ze spodní lišty (na obrázku označena světle modře). 

HTML část využijete například v případě, kdy byste se rádi dozvěděli, jakou třídu nebo ID má určitý prvek, abyste mu pak přidali vlastní styl CSS.

Tip: pokud se vám nedaří zjistit, kde se váš prvek v kódu přesně nachází, pomůže ikonka výběru prvku (viz první obrázek v horní liště vlevo). Když na tuto ikonku klikneme, aktivuje se (aktivujete ji také klávesovou zkratkou ctrl+shift+C), potom si můžete pomocí najetí myši na jakýkoliv prvek na stránce zjistit, jaký je jeho kód. 

CSS vlastní styly

Na obrázku jde o oranžové pole vpravo, záložka Styles. V tomto poli jsou vypsány všechny vlastní styly daného prvku (jak původní, tak nové, kterými jsou původní přepsány). Aktuálně aktivní styly jsou vždy nahoře. V tomto prostředí si můžeme styly zkoušet libovolně upravovat. Vidíme tak vyvolané změny, které se smažou s obnovením stránky. 

"Vypočtené" zobrazení stylů

Jde o souhrn všech jednotlivých stylů seřazených abecedně pod sebou, které prohlížeč používá. Pokud vás zajímá, jaký je například font písma daného prvku, nemusíte hledat v historii stylů, kde font písma můžete objevit až po delším scrolování dolů, ale podíváte se do tohoto "souhrnu", kde najdete font-style a vidíte aktivní font. 

Buď na začátku obsahu v této záložce Computed nebo v některých případech i přímo na konci obsahu v záložce Styles je navíc umístěn obrázek s parametry prvku, jako jsou velikost prvku, tloušťka rámečku (border), mezery mezi rámečkem prvku a prvku samotného (padding) a mezery mezi prvkem a ostatními prvky (margin). Údaje jsou uvedeny v px.

Chyby na stránce

Výpis chyb, které detekuje prohlížeč na stránce, naleznete v poli HTML kódu v záložce Console. Typickou chybou, na kterou vás prohlížeč upozorní malým výstražným žlutým trojúhelníčkem, je smíšený obsah. Prohlížeč vždy vypíše i typ chyby a vy ji díky tomu můžete snáze odstranit. Chyba v ukázce "ERR_BLOCKED_BY_CLIENT" například ani není chybou na dané stránce, ale jde o upozornění na blokování reklamy ze strany uživatele.

Ukázka responsivního chování webové stránky

Pomocí ikonky pro responsivní zobrazení se můžete podívat, jak se váš web bude chovat při jednotlivých rozměrech zobrazení i na vybraných zařízeních.

K čemu se mi zobrazení zdrojového kódu může hodit?

Můžete: 

• zjistit třídu nebo ID stránky, rubriky či např. položky menu
• zjistit, o jaké prvky se jedná (div, p, li, #content, ...)
• zjistit vnoření jednotlivých prvků mezi sebou
• odhalit chyby, které blokují správné zobrazení webové stránky
• vyzkoušet, jak stránky vypadají v jednotlivých responsivních zobrazeních a na vybraných telefonech 

K čemu se mi zobrazení vlastních stylů CSS může hodit?

Můžete: 

• zjistit, vlastnosti jednotlivých prvků jako jsou barvy, mezery, písmo a mnoho dalšího
• vyzkoušet si změny jednotlivých vlastností "nanečisto"
• upravený kód si mohu jen zkopírovat a vložit do vlastních stylů v administraci inPage

Zdrojový kód a vlastní styly CSS v inPage

Pokud s tvorbou na inPage začínáte, níže je přehled možností, kde a za jakých podmínek si můžete HTML kód a vlastní styly CSS zobrazit. 

Zdrojový kód článků a dalších editovatelných textových polí lze zobrazit:

• dočasně pomocí ikonky <> v editoru WYSIWYG (zdrojový kód se zobrazí pouze v samostatném okně, které se po uložení zavře)

• trvale v úpravě stránky přepnutím editoru WYSIWYG na HTML (aktivní po uložení stránky) - platí pouze pro editované textové pole

• nebo trvale pro celý web hromadně v Nastavení → Prostředí → Editace obsahu

Cesta do vlastních stylů CSS vede přes Vzhled → Vlastní styly CSS (je důležité mít zaškrtnuté tlačítko "Zapnuto", aby styly byly aktivní).