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

Obsah:

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

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

Video: Ako používať nástroje pre vývojárov webových aplikácií prehliadača Firefox
Video: Cамая МАЛЕНЬКАЯ поворотная камера 5G Wifi СЛЕЖЕНИЕ - YouTube 2024, Marec
Anonim
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 aktualizovaný Scratchpad.
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 aktualizovaný 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ú dostupné v ponuke programu 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é.
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é.
Image
Image

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 struny na paneli s nástrojmi.
Môžete prechádzať medzi nadradeným a podradeným prvkom kliknutím na struny 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.

Image
Image

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 zobraziť HTML stránku v plochom súbore, môžete vybrať Zobraziť zdroj stránky z ponuky Web Developer.

Image
Image

Inšpektor CSS

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

Image
Image

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 vlastností obsahuje vyhľadávacie pole.

Image
Image

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

Image
Image

Skriptovací jazyk JavaScript

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

Image
Image

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

Image
Image

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ť - sieťových požiadaviek, chybových hlásení CSS, chybových správ jazyka JavaScript a správ webových vývojárov.
Konzola zobrazuje štyri rôzne typy správ, ktoré môžete prepínať viditeľnosť - sieťových požiadaviek, chybových hlásení CSS, chybových správ jazyka JavaScript a správ webových vývojárov.

Čo je to správa pre webových vývojárov? Je to správa vytlačená na objekt window.console. Mohli by sme napríklad spustiť window.console.log ("Hello World"); JavaScript kód v Scratchpad tlačiť správu vývojára do konzoly. Weboví vývojári môžu tieto správy integrovať do 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.
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.
Použite vyhľadávacie pole na filtrovanie správ; Ak chcete zobraziť viac podrobností, kliknite na požiadavku.
Image
Image

Webová konzola môže fungovať v spolupráci s nástrojom Page Inspector. Premenná $ 0 predstavuje aktuálne vybraný objekt v inšpektorovi. Ak chcete napríklad 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 Mozil's Developer Network.
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 Mozil's Developer Network.

Získajte viac nástrojov

Získajte viac nástrojov, sa dostanete na kolekciu doplnkov pre vývojárov webových aplikácií na webovej lokalite Mozilla Add-Ons. Obsahuje niektoré z najlepších doplnkov pre vývojárov webových stránok, vrátane Firebug a Panelu vývojárov webových aplikácií.

Ak už niekoľko rokov používate Firefox, pamätáte si inšpektora DOM. Integrované vývojárske nástroje od spoločnosti Firefox odvtedy prichádzajú ďaleko.

Odporúča: