13Sep

Kako koristiti Firefoxove alate za web razvojne programere

click fraud protection

Firefoxov web-razvojni izbornik sadrži alate za pregledavanje stranica, izvršavanje proizvoljnog JavaScript koda i pregled HTTP zahtjeva i drugih poruka. Firefox 10 dodao je novu alat inspektora i ažurirala Scratchpad.

Firefoxove nove značajke web razvojnog programera, u kombinaciji s izvanrednim web-razvojnim dodatcima poput Firebug i alatne trake za web razvojne programere, čine Firefox savršenim preglednikom za web programere. Svi su alati dostupni u programu Web Developer u izborniku Firefox.

Inspektor stranice

Pregledajte određeni element desnim klikom miša i odabirom Pregledajte ( ili pritiskajte Q ).Također možete pokrenuti inspektor iz izbornika Web Developer.

Na dnu zaslona vidjet ćete alatnu traku koju možete koristiti za kontrolu inspektora. Vaš odabrani element bit će označen i ostali elementi na stranici će biti zatamnjeni.

Ako želite odabrati novi element, na alatnoj traci kliknite Inspect gumb, zadržite pokazivač miša iznad stranice i kliknite svoj element. Firefox ističe element ispod vašeg pokazivača.

instagram viewer

Možete se kretati između elemenata roditelja i djeteta tako što ćete kliknuti krušne mrlje na alatnoj traci.

HTML inspektor

Kliknite gumb HTML da biste vidjeli HTML kôd trenutno odabranog elementa.

HTML inspektor omogućuje širenje i sažimanje HTML oznaka, što ga čini jednostavnim za vizualizaciju na prvi pogled. Ako želite vidjeti HTML stranice u ravnoj datoteci, možete odabrati Prikaz izvora stranice s izbornika Web Developer.

CSS inspektor

Kliknite gumb da biste vidjeli CSS pravila primijenjena na odabrani element.

Tu je i ploča s CSS svojstvima - prebacujte između dva klikom na pravila i Properties tipke. Da biste lakše pronašli određene entitete, ploča svojstava uključuje okvir za pretraživanje.

CSS elementa možete urediti na letu iz ploče Pravila. Poništite potvrdne okvire da biste deaktivirali pravilo, kliknite tekst da biste promijenili pravilo ili dodali vlastita pravila elementu pri vrhu okna. Ovdje sam dodao font-weight: bold; CSS pravilo, čineći tekst elementa podebljanim.

JavaScript Scratchpad

Scratchpad također je vidio ažuriranje s Firefoxom 10, a sada sadrži sintakse. Možete upisati JavaScript kôd koji će se prikazivati ​​na trenutnoj stranici.

Kad jednom imate, kliknite Execute izbornik i odaberite Run. Kôd se pokreće na trenutnoj kartici. Web konzola

Web konzola zamjenjuje staru konzolu pogrešaka koja je obustavljena i uklonit će se u budućoj verziji Firefoxa.

Konzola prikazuje četiri različite vrste poruka, koje možete prebaciti na vidljivost - mrežnih zahtjeva, CSS poruka o pogreškama, JavaScript poruke o pogreškama i web developer poruke.

Što je poruka web developera? To je poruka ispisana na objekt window.console. Na primjer, možemo pokrenuti window.console.log( "Hello World"); JavaScript kôd na Scratchpadu za ispis poruke developera na konzolu. Web programeri mogu integrirati ove poruke u svoj JavaScript kôd kako bi pomogli pri uklanjanju pogrešaka.

Osvježite stranicu i vidjet ćete generirane zahtjeve mreže i druge poruke.

Pomoću okvira za pretraživanje filtrirajte poruke;kliknite zahtjev ako želite vidjeti više pojedinosti.

Kao i kod Firefoxa 10, Web Console može raditi zajedno s inspektorom stranice. Varijabla $ 0 predstavlja trenutno odabrani objekt u inspektoru. Na primjer, ako želite sakriti trenutačno odabrani objekt, možete pokrenuti $ 0.style.display = "none" u konzoli.

Ako želite saznati više o korištenju konzole i njegovih ugrađenih funkcija, pogledajte stranicu Web Console na web stranici Mozilla's Network Developer Network.

Dohvatite više alata

Dohvatite dodatne alate Opcija odvest će vas do dodatne zbirke alata Toolbox za Web Developer na web stranici Mozilla Add-ons. Sadrži neke od najboljih dodataka za web programere, uključujući Firebug i alatnu traku za web razvojne programere.

Ako ste koristili Firefox nekoliko godina, možda ćete se sjetiti DOM inspektora. Firefoxovi integrirani alati za razvojne programere od tada su došli dug put.