13Sep
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 je Firebug a Panel nástrojov pre vývojárov webu, robia Firefox ideálnym prehliadačom webových vývojárov. Všetky nástroje sú dostupné v ponuke programu Web Developer v ponuke prehliadača Firefox.
Inšpektor stránky
Skontrolujte konkrétny prvok kliknutím pravým tlačidlom myši a výberom Kontrola ( alebo stlačením Q ).Môžete tiež spustiť inšpektor z ponuky Web Developer.
V dolnej č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 tlačidlo Inspect 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.
HTML Inspector
Kliknutím na tlačidlo HTML zobrazíte HTML kód 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 vybrať View Source Page z ponuky Web Developer.
Inšpektor CSS
Kliknutím na tlačidlo uvidíte pravidlá CSS aplikované na vybraný prvok.
K dispozícii je tiež panel vlastností CSS - prepínanie medzi dvoma kliknutiami na tlačidlá a .Aby vám pomohol nájsť konkrétne vlastnosti, panel vlastností obsahuje vyhľadávacie pole.
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 prvku odráža.
Scratchpad JavaScript
Scratchpad tiež zaznamenal aktualizáciu s prehliadačom Firefox 10 a teraz obsahuje zvýraznenie syntaxe. Môžete zadať kód JavaScript, ktorý sa bude zobrazovať na aktuálnej stránke.
Akonáhle máte, kliknite na Vykonanie menu a vyberte Run. Kód beží na aktuálnej karte. Webová konzola
Webová konzola nahrádza starú konzolu na správu chýb, 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 hlásení 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ť okno 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.
Použite vyhľadávacie pole na filtrovanie správ;Ak chcete zobraziť viac podrobností, kliknite na požiadavku.
Webová konzola môže od aplikácie Firefox 10 fungovať spoločne s inšpektorom stránky. Premenná $ 0 predstavuje aktuálne vybraný objekt v inšpektorovi. Ak chcete napríklad skryť aktuálne vybraný objekt, môžete v konzole spustiť $ 0.style.display = "none" .
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
Voľba Získajte viac nástrojov vás prevedie na webovú lokalitu Add-On na webovej lokalite doplnku Web Development Developer. 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 používate Firefox niekoľko rokov, pamätáte si DOM Inspector. Integrované vývojárske nástroje od spoločnosti Firefox odvtedy prichádzajú ďaleko.