Poglejte v bistvena orodja Firefox za spletne razvijalce

Firefox je že dolgo priljubljen brskalnik za razvoj spletnih strani. Obstajajo številni koristni dodatki za opravilo. V tem postu bomo pogledali v nekaj dodatkov, za katere mislim, da je bistvenega pomena, da jih namestite, če boste naredili razvoj spletnih strani. Prav tako bomo odkrili nekatere funkcije v teh dodatkih, ki vam lahko pomagajo.

Najprej moramo namestiti Firebug.

Firebug

Firebug je dodatek, ki ga morate namestiti za razvoj spletnih strani. Ob predpostavki, da ne veste, kje dobiti Firebug, ga lahko namestite tukaj. Verjetno morate ponovno zagnati Firefox, preden ga aktivirate.

Po tem si lahko ogledate Firebug na enega od naslednjih načinov: sledite temu meniju Orodja> Spletni razvijalci> Firebug, z desno miškino tipko kliknite spletno stran in izberite “Preglejte element s Firebugom”.

Druga možnost je, da v Firefoxu najdete ikono Firebug in jo kliknete, tako da se prikaže okno firebug;

Firebug je povsem enak Orodja za razvijalce Chrome. ima ploščo za prikaz strukture HTML in slogov ter konzolno konzolo za prikaz napak, opozoril in dnevnikov. Ampak, imam še nekaj nasvetov, za katere upam, da vam bodo koristni.

Prilagajanje velikosti polja

Element HTML je sestavljen iz CSS box modela, ki je sestavljen iz robov, oblazinjenja in dimenzije objekta (širina / višina). Včasih moramo spremeniti te lastnosti. V tem primeru lahko izberete enega od elementov, ki jih želite spremeniti, nato pa pojdite na Postavitev plošči.

Na tej plošči boste našli ilustracijo modela polja CSS skupaj z njegovimi informacijami, vključno z premer in višine. Čeprav ti dve lastnosti nista določeni v CSS, to orodje je dovolj pametno, da določi vrednost. Če jih želite spremeniti, lahko preprosto kliknete na vrednost in s tipko s puščico navzgor ali navzdol povečate ali zmanjšate vrednost.

Računalniški stili

V mnogih primerih se verjetno sprašujete, zakaj se nekateri slogi ne uporabljajo. Ena od lažjih in hitrejših načinov, še posebej, če imate na tisoče vrstic slogov, je z vpogledom v Računalniški slog plošči. Ta primer kaže, da je barva besedila oznake sidra prepisana z .gumb razred, medtem ko ozadje .gumb razred prepiše .button.add.

Pregled družine pisav (na preprost način)

Verjetno pogosto najdete nekaj takega v družina pisav lastnosti v CSS z različnimi družinami pisav. Na žalost nam to ne bo povedalo, katera pisava je v brskalniku. Da bi olajšali identifikacijo, lahko namestimo to razširitev Firebug FireFontFamily.

Ko je namestitev končana, naložite svojo spletno stran in zdaj lahko jasno vidimo, katero družino pisav uporabljamo. V našem primeru je to dejansko Helvetica Neue (glej posnetek).

Analiza uspešnosti

To je lahko brez besed, vendar je hitrost spletnega mesta zdaj eden izmed Googlovih parametrov (algoritem) pri odločanju o kakovosti spletnega mesta; spletna stran, ki se hitreje nalaga, se šteje, da je dobro razvita in se glede vsebine uvršča višje. Zato hitrost ni nekaj, kar bi bilo treba prezreti.

Omrežna plošča

Prvo mesto, ki ga boste morda morali obiskati, da bi preverili uspešnost vaše spletne strani, je Mreža plošči. Ta plošča bo zapisala zahtevo HTTP vaše spletne strani, ko bo naložena. Ta posnetek zaslona prikazuje spletno stran, ki se naloži 42 zahteva in vzame 4,36 sekunde za nalaganje.

Nato lahko razvrstite zahtevo HTTP po vrsti, kot so HTML, CSS in Images.

Yslow!

Poleg tega lahko namestite tudi YSlow, razširitev za Firebug iz Yahoo !. Ko je aktiviran, boste našli dodatno ploščo, ki se izrazno imenuje Yslow!.

Podoben Mreža panel, Yslow! bo zabeležil uspešnost spletne strani, ko bo naložen, potem pa bo tudi povedal, zakaj je spletna stran počasna in kaj lahko storimo, da jo rešimo. V tem primeru izvedemo test na spletno stran in ga ocenimo 86 za splošno uspešnost, ki se šteje za dobro.

Hitrost strani

Lahko pa tudi namestite stran Google Speed. Podoben Yslow!, testira hitrost delovanja spletne strani, čeprav je lahko rezultat testa nekoliko drugačen. Ta primer prikazuje isto spletno stran dosegel 82 glede na hitrost strani.

Spletna orodja za razvijalce

Orodja za spletne razvijalce je očitno za spletne razvijalce in v njej je na voljo veliko funkcij. Ampak ta spodnja je ena mojih najljubših.

Pregled slike

Včasih bomo morda morali s spletne strani dobiti slikovne informacije. Običajno vidim, da ljudje to počnejo tako, da se spotaknejo po brskalniku ali z desnim klikom na sliko in izberejo Ogled informacij o sliki, tako:

Toda ta način ni povsem učinkovit, ko potrebujemo informacije iz številnih slik. V tem primeru lahko uporabimo Slike iz dodatka. Ta funkcija je lahko dostopna iz menija Slika v orodni vrstici.

Ta primer prikazuje, kako hkrati prikazujemo velikost slike in velikost slikovne datoteke:

Vgrajena orodja Firefox

V zadnjih različicah je Firefox izjemno izboljšal vgrajene funkcije za spletne razvijalce, nekatere so:

Native Inspect Element

Ta domači Preglej element iz Firefoxa je lahko videti podobno “Preglejte Element v Firebugu”, vendar dejansko deluje na različne načine.

Tokrat ne bom nadaljevala s to funkcijo, saj je v bistvu enaka Firebug HTML in CSS plošči, čeprav z razliko v postavitvi in ​​oblikovanju. Vendar pa obstaja ena posebnost, ki jo je vredno preizkusiti 3D-pogled.

Uporaba 3D-pogled strukturo spletne strani si lahko ogledate globoko. Če želite aktivirati ta pogled, lahko najdete gumb v spodnjem desnem kotu “Firefox Native Inspect Element”. Tako bo 3D-pogled izgleda kot.

Ne uporabljam ga tako pogosto kot druge funkcije, vendar je to precej inovativna funkcija iz Mozille, ki jo priznavam, in zagotovo zelo uporabna v določenih situacijah.

Pogled spletnega oblikovanja

Od vse večje priljubljenosti v odzivnem spletnem oblikovanju je Firefox začel brskalniku z odzivnim zaznamkom. To orodje nam bo omogočilo, da preizkusimo našo odzivno spletno stran v različnih pogledih, ne da bi spremenili okno brskalnika.

Ta pogled je na voljo v tem meniju: Orodja> Spletni razvijalec> Pogled spletnega oblikovanja. In tako izgleda pogled.

Urejevalnik sloga

Nazadnje, če pogosto uporabljate CSS, se boste verjetno zaljubili v to funkcijo. Od različice 11 je Firefox dodal Urejevalnik sloga v avtorskih orodjih za razvijalce.

Ta funkcija je kul kot Pogled spletnega oblikovanja, omogoča urejanje CSS-ja, vpogled v brskalnik v trenutku in shranjevanje sprememb, ki neposredno vplivajo na izvorno datoteko CSS.

Urejevalnik sloga je na voljo v naslednjem meniju: Orodja> Spletni razvijalec> Urejevalnik sloga.

Končna misel

Obstaja veliko funkcij, ki so pakirane v teh dodatkih za Firefox in tiste, ki so tukaj obravnavane, so le nekatere od funkcij, ki jih pogosto uporabljam med razvojem spletnih strani. Kljub temu pa morda imate še nekaj drugih nasvetov, ki bi lahko bili koristni za povečanje produktivnosti spletnega razvoja v Firefoxu.

Katere funkcije pogosto uporabljate? Svoje misli lahko delite v polju za komentarje spodaj.