Kako koristiti Firefox Web Developer alate
Izbornik Web Developera Firefoxa sadrži alate za pregled stranica, izvršavanje proizvoljnog JavaScript koda i pregled HTTP zahtjeva i drugih poruka. Firefox 10 je dodao potpuno novi alat za inspektore i ažurirani Scratchpad.
Nove značajke Firefoxa za web-razvojne inženjere, u kombinaciji s nevjerojatnim dodacima za web-programere kao što su Firebug i Web Developer Toolbar, čine Firefox idealnim preglednikom za web-programere. Svi alati dostupni su pod Web Developer u izborniku Firefoxa.
Inspektor stranice
Pregledajte određeni element desnom tipkom miša i odaberite Pregledati (ili pritiskom na P). Također možete pokrenuti Inspektor s izbornika Web Developer.
Vidjet ćete alatnu traku na dnu zaslona, koju možete koristiti za kontrolu inspektora. Odabrani element bit će označen, a ostali elementi na stranici bit će zatamnjeni.
Ako želite odabrati novi element, kliknite gumb Pregledati na alatnoj traci, prijeđite mišem preko stranice i kliknite svoj element. Firefox označava element ispod pokazivača.
Možete se kretati između roditeljskih i podređenih elemenata klikom na krušne mrvice na alatnoj traci.
HTML inspektor
Kliknite gumb HTML gumb za prikaz HTML koda trenutno odabranog elementa.
HTML inspektor vam omogućuje da proširite i sažmete HTML oznake, što olakšava vizualizaciju na prvi pogled. Ako želite vidjeti HTML stranice stranice u ravnoj datoteci, možete odabrati Pogledaj izvor stranice s izbornika Web Developer.
CSS inspektor
Kliknite gumb Stil da biste vidjeli CSS pravila primijenjena na odabrani element.
Tu je i ploča CSS svojstava - prebacujte se između dva klikom na pravila i Nekretnine tipke. Da biste lakše pronašli određena svojstva, na ploči svojstava nalazi se okvir za pretraživanje.
Možete urediti CSS elementa u letu s ploče s pravilima. Isključite potvrdne okvire za deaktiviranje pravila, kliknite tekst da biste promijenili pravilo ili dodajte vlastita pravila elementu na vrhu okna. Evo, dodao sam font-weight: bold; CSS pravilo, čineći tekst elementa podebljanim.
Scratchpad za JavaScript
Scratchpad je također vidio ažuriranje s Firefoxom 10, a sada sadrži isticanje sintakse. Možete upisati JavaScript kôd za izvođenje na trenutnoj stranici.
Kada to učinite, kliknite Izvršiti i odaberite Trčanje. Kôd se pokreće na trenutnoj kartici.
Web konzola
Web-konzola zamjenjuje staru konzolu za pogreške, koja je zastarjela i bit će uklonjena u budućoj verziji Firefoxa.
Na konzoli se prikazuju četiri različite vrste poruka koje možete mijenjati vidljivost - mrežni zahtjevi, CSS poruke o pogreškama, poruke o pogreškama JavaScripta i poruke web-razvojnih programera.
Što je poruka web-razvojnog programera? To je poruka ispisana na objektu window.console. Na primjer, mogli bismo pokrenuti window.console.log ("Pozdrav svijetu"); JavaScript kôd na Scratchpadu za ispis razvojne poruke na konzoli. Web programeri mogu integrirati te poruke u svoj JavaScript kôd kako bi pomogli u otklanjanju pogrešaka.
Osvježite stranicu i vidjet ćete generirane mrežne zahtjeve i druge poruke.
Koristite okvir za pretraživanje da biste filtrirali poruke; kliknite zahtjev ako želite vidjeti više pojedinosti.
Od Firefoxa 10, web-konzola može raditi u tandemu s Page Inspector. $ 0 varijabla predstavlja trenutno odabrani objekt u inspektoru. Na primjer, ako ste htjeli sakriti trenutno odabrani objekt, mogli biste pokrenuti $ 0.style.display =”none” u konzoli.
Ako želite saznati više o korištenju konzole i njezinih ugrađenih funkcija, pogledajte web-stranicu web-konzole na web-lokaciji Mozilla Developer Network.
Saznajte više alata
Saznajte više alata opcija vodi vas u zbirku dodataka alata za web-razvojne programere na web-lokaciji Mozilla Add-Ons. Sadrži neke od najboljih dodataka za web-programere, uključujući Firebug i Web Developer Toolbar.
Ako već nekoliko godina koristite Firefox, možda ćete se sjetiti DOM inspektora. Od tada su integrirani razvojni alati Firefoxa prošli dug put.
