Jak používat nástroje vývojáře webových aplikací prohlížeče Firefox

Nabídka webového vývojáře Firefoxu obsahuje nástroje pro kontrolu stránek, provádění libovolného kódu JavaScript a zobrazení požadavků HTTP a dalších zpráv. Firefox 10 přidal zcela nový nástroj Inspektoru a aktualizoval Scratchpad.

Firefox je nový webový vývojář, který v kombinaci s úžasnými doplňky webových vývojářů, jako je Firebug a Web Developer Toolbar, dělá z Firefoxu ideální prohlížeč pro webové vývojáře. Všechny nástroje jsou dostupné v nabídce Web Developer v nabídce Firefoxu.

Page Inspector

Zkontrolujte určitý prvek klepnutím pravým tlačítkem myši a výběrem Kontrolovat (nebo stisknutím tlačítka Q). Můžete také spustit Inspektor z nabídky Web Developer.

V dolní části obrazovky se zobrazí panel nástrojů, který můžete použít k ovládání inspektora. Vybraný prvek bude zvýrazněn a ostatní prvky na stránce budou ztlumeny.

Chcete-li vybrat nový prvek, klepněte na tlačítko Kontrolovat na panelu nástrojů, umístěte kurzor myši na stránku a klikněte na prvek. Firefox zvýrazní prvek pod kurzor.

Můžete přecházet mezi nadřazenými a podřízenými prvky kliknutím na odkaz na struny na panelu nástrojů.

HTML Inspector

Klepněte na tlačítko HTML pro zobrazení kódu HTML aktuálně vybraného prvku.

Inspektor HTML umožňuje rozšiřovat a sbalit značky HTML, což vám umožní snadné zobrazení na první pohled. Chcete-li vidět HTML stránku v plochém souboru, můžete vybrat Zobrazit zdroj stránky z nabídky Web Developer.

Inspektor CSS

Klepněte na tlačítko Styl pro zobrazení pravidel CSS aplikovaných na vybraný prvek.

K dispozici je také panel vlastností CSS - přepnutí mezi dvěma klepnutím na tlačítko Pravidla a Vlastnosti tlačítka. Abychom vám pomohli najít konkrétní vlastnosti, panel vlastností obsahuje vyhledávací pole.

Funkci CSS prvku můžete upravit z panelu Pravidla. Zrušte zaškrtnutí všech políček pro deaktivaci pravidla, klepněte na text pro změnu pravidla nebo přidejte vlastní pravidla k prvku v horní části podokna. Zde jsem přidal font-weight: tučné; Pravidlo CSS, takže text prvku je tučný.

JavaScript Scratchpad

Scratchpad také viděl aktualizaci s Firefoxem 10 a nyní obsahuje zvýraznění syntaxe. Můžete zadat kód JavaScript, který se má spustit na aktuální stránce.

Jakmile to máte, klikněte na tlačítko Vykonat a vyberte Běh. Kód běží na aktuální kartě.

Webová konzola

Webová konzola nahrazuje starou Chybovou konzoli, která byla zastaralá a bude odstraněna v budoucí verzi prohlížeče Firefox.

Konzola zobrazuje čtyři různé typy zpráv, které lze přepínat mezi - požadavky na síť, chybové zprávy služby CSS, chybové zprávy jazyka JavaScript a zprávy vývojáře webu.

Co je to zpráva pro vývojáře? Je to zpráva vytištěná na objektu window.console. Například bychom mohli spustit window.console.log ("Hello World"); JavaScript kód v Scratchpad vytisknout zprávu vývojáře do konzoly. Weboví vývojáři mohou tyto zprávy integrovat do kódu JavaScript, který vám pomůže při ladění.

Obnovte stránku a zobrazí se vygenerované síťové požadavky a další zprávy.

Použijte vyhledávací pole pro filtrování zpráv; Pokud chcete zobrazit další podrobnosti, klikněte na požadavek.

Od verze Firefoxu 10 může webová konzola fungovat společně s Inspektorem stránek. Proměnná $ 0 představuje aktuálně vybraný objekt v inspektoru. Pokud jste například chtěli skrytí aktuálně vybraného objektu, můžete spustit $ 0.style.display = "žádný" v konzole.

Pokud máte zájem dozvědět se více o používání konzoly a jejích vestavěných funkcí, podívejte se na stránku webové konzoly na webových stránkách Mozilly Developer Network.

Získejte více nástrojů

The Získejte více nástrojů , přenese vás na webovou stránku doplňku Mozilla Add-On na kolekci doplňků Web Developer's Toolbox. Obsahuje některé z nejlepších doplňků pro webovské vývojáře, včetně Firebugu a panelu nástrojů Web Developer.

Pokud používáte Firefox několik let, můžete si zapamatovat inspektor DOM. Integrované vývojářské nástroje od společnosti Firefox od té doby zažily dlouhou cestu.