Nabídka Webový vývojář Firefoxu obsahuje nástroje pro kontrolu stránek, provádění libovolného kódu JavaScriptu a prohlížení požadavků HTTP a dalších zpráv. Firefox 10 přidal zcela nový nástroj Inspector a aktualizovaný Scratchpad.
Díky novým funkcím webového vývojáře ve Firefoxu je Firefox ve spojení s úžasnými doplňky webového vývojáře, jako je Firebug a panel nástrojů pro webový vývojář, Firefox ideálním prohlížečem pro webové vývojáře. Všechny nástroje jsou k dispozici v nabídce Web Developer v nabídce Firefoxu.
Inspektor stránky
Prohlédněte si konkrétní prvek kliknutím pravým tlačítkem na něj a výběrem Kontrolovat (nebo stisknutím Q ). Můžete také spustit Inspektor z nabídky Web Developer.
Ve spodní části obrazovky se zobrazí panel nástrojů, pomocí kterého můžete kontrolovat inspektora. Vybraný prvek bude zvýrazněn a ostatní prvky na stránce budou ztlumené.
Pokud chcete vybrat nový prvek, klikněte na Kontrolovat tlačítko na panelu nástrojů, najeďte myší nad stránku a klikněte na svůj prvek. Firefox zvýrazní prvek pod kurzorem.
Mezi rodičovskými a podřízenými prvky můžete přecházet kliknutím na navigaci na panelu nástrojů.
Inspektor HTML
Klikněte na ikonu HTML tlačítko pro zobrazení kódu HTML aktuálně vybraného prvku.
Inspektor HTML umožňuje rozbalit a sbalit značky HTML, což usnadňuje vizualizaci na první pohled. Chcete-li zobrazit HTML stránky v plochém souboru, můžete vybrat Zobrazit zdroj stránky z nabídky Web Developer.
Inspektor CSS
Klikněte na ikonu Styl tlačítko pro zobrazení pravidel CSS použitých na vybraný prvek.
K dispozici je také panel vlastností CSS - přepínat mezi nimi kliknutím na Pravidla a Vlastnosti tlačítka. Abychom vám pomohli najít konkrétní vlastnosti, obsahuje panel vlastností vyhledávací pole.
CSS prvku můžete průběžně upravovat na panelu Pravidla. Zrušením zaškrtnutí některého ze zaškrtávacích políček pravidlo deaktivujete, kliknutím na text pravidlo změníte nebo přidáte vlastní pravidla k prvku v horní části podokna. Zde jsem přidal váha písma: tučné; Pravidlo CSS, které zvýrazňuje text prvku.
Zápisník JavaScript
Scratchpad také viděl aktualizaci s Firefoxem 10 a nyní obsahuje zvýraznění syntaxe. Pro spuštění na aktuální stránce můžete zadat kód JavaScript.
Jakmile budete mít, klikněte na Vykonat menu a vyberte Běh. Kód běží na aktuální kartě.
Webová konzola
Webová konzola nahrazuje starou konzolu chyb, která je zastaralá a bude v budoucí verzi Firefoxu odstraněna.
Konzola zobrazuje čtyři různé typy zpráv, které můžete přepínat viditelností - síťové požadavky, chybové zprávy CSS, chybové zprávy JavaScriptu a zprávy webového vývojáře.
Co je zpráva webového vývojáře? Je to zpráva vytištěná do objektu window.console. Například bychom mohli spustit window.console.log („Hello World“); Kód JavaScriptu ve Scratchpadu pro tisk zprávy vývojáře na konzoli. Weboví vývojáři mohou tyto zprávy integrovat do svého kódu JavaScript, aby pomohli s laděním.
Obnovte stránku a uvidíte vygenerované síťové požadavky a další zprávy.
Filtrujte zprávy pomocí vyhledávacího pole; kliknutím na požadavek zobrazíte další podrobnosti.
Od Firefoxu 10 může webová konzole fungovat společně s inspektorem stránky. Proměnná $ 0 představuje aktuálně vybraný objekt v inspektoru. Například pokud jste chtěli skrýt aktuálně vybraný objekt, můžete spustit $ 0.style.display = ”žádný” v konzole.
Pokud se chcete dozvědět více o používání konzoly a jejích integrovaných funkcí, podívejte se na Stránka Web Console na webu Mozilla Developer Network.
Získejte další nástroje
The Získejte další nástroje Tato možnost vás zavede do kolekce doplňků Web Developer Toolbox na webu doplňků Mozilla. Obsahuje některé z nejlepší doplňky pro webové vývojáře , včetně Firebug a panelu nástrojů pro webový vývojář.
Pokud používáte Firefox několik let, možná si vzpomenete na DOM Inspector. Integrované vývojářské nástroje Firefoxu od té doby prošly dlouhou cestou.
