Kako uporabljati orodja za razvoj spletnih strani za Firefox

Meni Razvijalec za Firefox vsebuje orodja za pregledovanje strani, izvedbo poljubne kode JavaScript in ogled HTTP zahtevkov in drugih sporočil. Firefox 10 je dodal povsem novo orodje inšpektorja in posodobljeno beležnico.

Funkcije novega spletnega razvijalca Firefoxa v kombinaciji z odličnimi dodatki za spletne razvijalce, kot sta Firebug in orodna vrstica za spletne razvijalce, naredijo Firefox idealen brskalnik za spletne razvijalce. Vsa orodja so na voljo v razdelku Web Developer v meniju Firefoxa.

Inšpektor strani

Preglejte določen element tako, da ga kliknete z desnim klikom in izberete Preglejte (ali s pritiskom na Q). Lahko tudi zaženete Inšpektor v meniju Spletni razvijalec.

Na dnu zaslona boste videli orodno vrstico, ki jo lahko uporabite za nadzor inšpektorja. Izbrani element bo označen, drugi elementi na strani pa bodo zatemnjeni.

Če želite izbrati nov element, kliknite Preglejte na orodni vrstici, miško postavite nad stran in kliknite element. Firefox označuje element pod kazalcem.

Med starševskimi in podrejenimi elementi se lahko pomikate s klikom na drobtine v orodni vrstici.

HTML inšpektor

Kliknite gumb HTML za ogled HTML kode trenutno izbranega elementa.

Inšpektor HTML vam omogoča, da razširite in strdete oznake HTML, kar vam olajša vizualizacijo na prvi pogled. Če želite videti HTML strani v ravni datoteki, lahko izberete Ogled vira v meniju Spletni razvijalec.

CSS inšpektor

Kliknite gumb Slog za prikaz pravil CSS, ki se uporabljajo za izbrani element.

Obstaja tudi plošča lastnosti CSS - preklopite med obema s klikom na Pravila in Lastnosti gumbov. Za lažje iskanje določenih lastnosti plošča lastnosti vključuje iskalno polje.

CSS elementa lahko urejate na zaslonu v pravilniku. Če želite deaktivirati pravilo, počistite potrditvena polja, kliknite besedilo, da spremenite pravilo, ali elementu na vrhu podokna dodajte svoja pravila. Tu sem dodal font-weight: krepko; Pravilo CSS, tako da je besedilo elementa krepko.

Zapisnica za JavaScript

Scratchpad je prav tako videl posodobitev z Firefox 10 in zdaj vsebuje poudarjanje skladnje. Lahko vnesete JavaScript kodo za izvajanje na trenutni strani.

Ko ste, kliknite Izvedi in izberite Zaženi. Koda se izvaja na trenutnem zavihku.

Spletna konzola

Spletna konzola nadomešča staro konzolo napak, ki je bila opuščena in bo odstranjena v prihodnji različici Firefoxa.

Na konzoli so prikazana štiri različna tipa sporočil, ki jih lahko preklapljate z vidljivostjo - zahteve po omrežju, sporočila o napakah CSS, sporočila o napakah JavaScripta in sporočila razvijalcev.

Kaj je sporočilo za spletnega razvijalca? To je sporočilo, ki je natisnjeno na objekt window.console. Na primer, lahko zaženemo window.console.log (“Hello World”); JavaScript kodo v Scratchpad, da natisnete sporočilo razvijalca na konzolo. Spletni razvijalci lahko ta sporočila vključijo v svojo JavaScript kodo in pomagajo pri odpravljanju napak.

Osvežite stran in videli boste ustvarjene omrežne zahteve in druga sporočila.

Za filtriranje sporočil uporabite iskalno polje; Če želite videti več podrobnosti, kliknite zahtevo.

Od Firefox 10 lahko spletna konzola deluje v tandemu z inšpektorjem strani. Spremenljivka $ 0 predstavlja trenutno izbrani predmet v inšpektorju. Na primer, če želite skriti trenutno izbrani predmet, lahko zaženete $ 0.style.display = ”none” v konzoli.

Če vas zanima več o uporabi konzole in njenih vgrajenih funkcij, si oglejte stran spletne konzole na spletni strani Mozilla Developer Network.

Pridobite več orodij

The Pridobite več orodij Možnost vas pripelje do zbirke orodij za orodjarje za spletne razvijalce na spletnem mestu dodatkov za Mozillo. Vsebuje nekaj najboljših dodatkov za spletne razvijalce, vključno s programom Firebug in orodno vrstico za spletne razvijalce.

Če že nekaj let uporabljate Firefox, se lahko spomnite inšpektorja DOM. Firefoxova integrirana orodja za razvijalce so od takrat dosegla dolgo pot.