Vývojářské nástroje

Mezi snímky prezentace se přepínejte klávesami Page Down a Page Up

Opera obsahuje některé nástroje, které Vám pomohou při tvorbě webových stránek.

Vývojářská konzole (v orig. Developer console) je nástroj pro analýzu a interaktivní provádění změn webové stránky během jejího vytváření nebo ladění, zatímco prohlížeč zdrojového kódu je jednodušší nástroj pro kontrolu zdrojového kódu webové stránky, který ve zdrojovém kódu umožňuje provádět rychlé úpravy.

Vývojářská konzole

Volbou z menu Nástroje > Pokročilé > Vývojářské nástroje můžete otevřít webovou stránku Dev.Opera, kde lze najít několik javascriptových aplikací. Jednou z těchto aplikací je i vývojářská konzole a stejně jako ostatní ji lze přetažením umístit na libovolnou lištu Opery. Otevřete-li vývojářskou konzoli, objeví se malé okénko nad analyzovanou webovou stránkou. Toto okénko obsahuje pět listů: DOM (objektový model dokumentu), JS (JavaScript), CSS (styly), HTTP (protokol pro přenos hypertextů) a About (informace o aplikaci).

Poznámka: Chcete-li používat javascriptové aplikace z Dev.Opera, musíte povolit otevírání vyskakovacích oken.

Okno vývojářské konzole se nejprve otevře na listu DOM, kde naleznete seznam uzlů dokumentu sbalených pod "document". Klepnutím na znaménko plus tento seznam rozbalíte. Klepnete-li v konzoli na určitý uzel, na zobrazené webové stránce bude jemu odpovídající oblast krátce po klepnutí zvýrazněna probliknutím.

A naopak, klepnutí kdekoli na webové stránce otevře seznam uzlů DOM se zvýrazněným uzlem, který odpovídá oblasti webové stránky, na niž jste klepnuli. Chcete-li najít odpovídající oblast, stiskněte a držte klávesu Shift zatímco prohledáváte stránku myší.

Mezi klíčové funkce listu DOM patří:

"search", možnost vyhledávat ve stromové struktuře DOM libovolnou třídu (class) uzlů pomocí standardních selektorů CSS, například p > a indikující vztah rodič-potomek, nebo #menu pro nalezení identity (id).
"snapshot", možnost zobrazení kompletního záběru DOM.

Vývojářskou konzoli lze použít také pro provádění interaktivních změn webové stránky. Tlačítko "remove" na listu DOM umožňuje odstranění uzlů, lze však editovat i libovolnou vlastnost stylu pomocí listu CSS po stisknutí tlačítka "show rules" pro daný styl. Výsledek provedených změn je zobrazen okamžitě a lze jej vyexportovat pro pozdější použití.

Podrobnější diskuze k vývojářské konzoli můžete najít na Dev.Opera.

Prohlížeč zdrojového kódu

Opera obsahuje i jednodušší nástroj pro analýzu a úpravy webových stránek, prohlížeč zdrojového kódu. Potřebujete-li nahlédnout do zdroje webové stránky, zobrazíte jej použitím klávesové zkratky Ctrl+F3 nebo výběrem Zobrazit > Zobrazit zdrojový kód či volby Zobrazit z kontextového menu vyvolaného klepnutím pravým tlačítkem myši.

Prohlížeč zdrojového kódu otevře zdroj webové stránky jako nový list a barevným zvýrazněním syntaxe Vám usnadní orientaci ve zdrojovém kódu. Chcete-li zdroj stránky editovat, máte dvě možnosti:

Uložit editovanou webovou stránku do cache a bezprostředně zobrazit Vámi provedené změny klepnutím na tlačítko "Použít změny" nebo použitím klávesové zkratky Ctrl+R.
Uložit editovanou webovou stránku do umístění dle Vašeho výběru tlačítkem "Uložit" nebo klávesovou zkratkou Ctrl+S.

Berte na vědomí, že editací lokálně uloženého dokumentu a volbou "Použít změny" do dokumentu trvale uložíte provedené změny.

Chcete-li k prohlížení a editaci zdrojového kódu používat externí program, lze jej vybrat v Nastavení na kartě Pokročilé volby v kategorii Programy.