Ako používať nástroje pre vývojárov webových aplikácií prehliadača Firefox

Ponuka webového vývojára prehliadača Firefox obsahuje nástroje na kontrolu stránok, vykonávanie ľubovoľného kódu JavaScript a zobrazenie žiadostí HTTP a ďalších správ. Firefox 10 pridal nový nástroj inšpektora a aktualizoval Scratchpad.

Nový webový vývojár Firefoxu v kombinácii s úžasnými doplnkami pre vývojárov webových stránok, ako sú Firebug a Web Developer Toolbar, robia z Firefoxu ideálny prehliadač pre webových vývojárov. Všetky nástroje sú k dispozícii v ponuke aplikácie Web Developer v ponuke prehliadača Firefox.

Page Inspector

Skontrolujte určitý prvok kliknutím pravým tlačidlom myši a výberom preskúmať (alebo stlačením tlačidla Q). Môžete tiež spustiť inšpektor z ponuky Web Developer.

V spodnej časti obrazovky sa zobrazí panel nástrojov, ktorý môžete použiť na kontrolu inšpektora. Zvolený prvok bude zvýraznený a ostatné prvky na stránke budú stlmené.

Ak chcete vybrať nový prvok, kliknite na preskúmať na paneli s nástrojmi, umiestnite kurzor myši na stránku a kliknite na svoj prvok. Firefox zvýrazní prvok pod kurzorom.

Môžete prechádzať medzi nadradeným a podradeným prvkom kliknutím na strmene na paneli s nástrojmi.

HTML inšpektor

Kliknite na tlačidlo HTML tlačidlo pre zobrazenie kódu HTML aktuálne vybraného prvku.

Inšpektor HTML vám umožňuje rozšíriť a zbaliť značky HTML, čo vám umožní ľahko zobraziť na prvý pohľad. Ak chcete vidieť HTML stránky v plochom súbore, môžete si vybrať Zobraziť zdroj stránky z ponuky Web Developer.

Inšpektor CSS

Kliknite na tlačidlo Štýl tlačidlo pre zobrazenie pravidiel CSS aplikovaných na vybraný prvok.

K dispozícii je aj panel vlastností CSS - prepínanie medzi dvoma kliknutiami pravidlá a vlastnosti Tlačidlá. Aby vám pomohol nájsť konkrétne vlastnosti, panel s vlastnosťami obsahuje vyhľadávacie pole.

Funkciu CSS elementu môžete upraviť v pohybe z panelu Pravidlá. Zrušte začiarknutie niektorého zo začiarkavacích políčok, ak chcete deaktivovať pravidlo, kliknite na text, aby ste zmenili pravidlo, alebo pridajte vlastné pravidlá k prvku v hornej časti okna. Tu som pridal font-weight: tučné; Pravidlo CSS, čím sa text prvku zvýrazní.

Skriptovací jazyk JavaScript

Scratchpad tiež videl aktualizáciu s Firefoxom 10 a teraz obsahuje zvýraznenie syntaxe. Môžete napísať kód JavaScript, ktorý sa bude zobrazovať na aktuálnej stránke.

Akonáhle máte, kliknite na tlačidlo popraviť a vyberte položku beh. Kód sa spustí na aktuálnej karte.

Webová konzola

Webová konzola nahrádza starú konzolu s chybami, ktorá bola zastaraná a bude odstránená v budúcej verzii prehliadača Firefox.

Konzola zobrazuje štyri rôzne typy správ, ktoré môžete prepínať viditeľnosť - žiadostí o sieť, chybových hlásení CSS, chybových správ JavaScript a správ vývojárov webových stránok.

Čo je to správa pre webových vývojárov? Je to správa vytlačená na objekt window.console. Napríklad by sme mohli spustiť window.console.log ("Hello World"); JavaScript kódu v aplikácii Scratchpad na vytlačenie správy vývojára do konzoly. Weboví vývojári môžu tieto správy integrovať do svojho kódu JavaScript, ktorý vám pomôže s ladením.

Obnovte stránku a uvidíte vygenerované sieťové požiadavky a ďalšie správy.

Použite vyhľadávacie pole na filtrovanie správ; Ak chcete zobraziť viac podrobností, kliknite na požiadavku.

Webová konzola môže fungovať v spolupráci s nástrojom Page Inspector. Proměnka $ 0 predstavuje aktuálne vybraný objekt v inšpektorovi. Ak ste napríklad chceli skryť aktuálne vybraný objekt, mohli by ste ho spustiť $ 0.style.display = "none" v konzole.

Ak máte záujem dozvedieť sa viac o používaní konzoly a jej vstavaných funkcií, pozrite si webovú stránku Console na webovej lokalite Mozilly Developer Network.

Získajte viac nástrojov

Získajte viac nástrojov možnosť sa dostanete na kolekciu doplnkov Web Development pre vývojárov na webových stránkach Mozilla Add-Ons. Obsahuje niektoré z najlepších doplnkov pre webových vývojárov, vrátane Firebugu a Web Toolbar pre vývojárov.

Ak už niekoľko rokov používate Firefox, pamätáte si DOM Inspector. Integrované vývojárske nástroje spoločnosti Firefox odvtedy prešli ďaleko.