Pažvelkite į pagrindinius „Firefox“ įrankius žiniatinklio kūrėjams

„Firefox“ jau seniai yra pageidaujama žiniatinklio kūrimo naršyklė. Darbui atlikti yra daug naudingų priedų. Šiame pranešime ketiname pažvelgti į keletą priedų, kuriuos, mano nuomone, būtina įdiegti, jei ketinate daryti žiniatinklio kūrimą. Taip pat ketiname atskleisti kai kurias šių priedų funkcijas, kurios gali padėti.

Visų pirma, turime įdiegti „Firebug“.

Firebug

„Firebug“ yra privalomas diegimas, skirtas plėtoti internetą. Darant prielaidą, kad jūs nežinote, kur gauti „Firebug“, galite ją įdiegti čia. Tikriausiai jums reikia iš naujo paleisti „Firefox“, kol ji bus įjungta.

Po to „Firebug“ galite peržiūrėti vienu iš šių būdų: atlikite šį meniu Įrankiai> Žiniatinklio kūrėjai> Firebug, dešiniuoju pelės mygtuku spustelėkite tinklalapį ir pasirinkite “Patikrinkite elementą su „Firebug“”.

Arba galite rasti „Firebug“ piktogramą „Firefox“ ir spustelėti jį, tai parodys „Firebug“ langą;

Firebug yra gana identiškas „Chrome“ kūrėjų įrankiai. ji turi skydelį, kad matytų HTML struktūrą ir stilius, ir taip pat konsolės skydelį, kad pamatytumėte klaidas, įspėjimus ir žurnalus. Tačiau turiu dar keletą patarimų, kurie, tikiuosi, gali būti naudingi.

Dėžutės dydžio nustatymas

HTML elementas sudarytas iš CSS dėžutės modelio, kuris susideda iš paraštės, padding ir objekto matmens (plotis / aukštis). Kartais gali prireikti pakeisti šias savybes. Tokiu atveju galite pasirinkti vieną iš elementų, kuriuos norite pakeisti, tada eikite į Išdėstymas skydelis.

Šiame skydelyje rasite CSS dėžutės modelio iliustraciją kartu su jos informacija, įskaitant plotis ir aukštis. Nors šios dvi savybės nenurodytos CSS, šis įrankis yra pakankamai protingas, kad būtų galima nustatyti vertę. Jei reikia juos keisti, galite tiesiog spustelėti vertę ir naudodami rodyklės aukštyn arba žemyn klavišą, kad padidintumėte arba sumažintumėte vertę.

Kompiuteriniai stiliai

Daugeliu atvejų jums tikriausiai įdomu, kodėl tam tikri stiliai nėra taikomi. Vienas iš lengvesnių ir greitesnių būdų, ypač kai turite tūkstančius stilių linijų, yra tikrinti jį iš Kompiuterinis stilius skydelis. Šis pavyzdys rodo, kad ankerinio žymeklio teksto spalva yra perrašyta .mygtukas klasė, o fonas .mygtukas klasė yra perrašyta .button.add.

Šrifto šeimos tikrinimas (paprastas būdas)

Jūs tikriausiai dažnai randate kažką panašaus į šrifto šeima nuosavybė CSS su įvairiomis šriftų šeimomis. Deja, tai konkrečiai nenurodys, kokio šrifto naudoja naršyklė. Kad būtų lengviau identifikuoti, galime įdiegti šį „Firebug“ plėtinį „FireFontFamily“.

Baigę diegti, įkelkite savo tinklalapį ir dabar galime aiškiai matyti, kuri šrifto šeima yra naudojama. Mūsų atveju tai iš tikrųjų Helvetica Neue (žr. fotografiją).

Veiklos analizė

Tai gali būti platumo, tačiau svetainės sparta dabar yra vienas iš „Google“ parametrų (algoritmas) sprendžiant svetainės kokybę; sparčiau įkelta svetainė laikoma gerai išvystyta ir turinio požiūriu didesnė. Taigi greitis nėra tai, ką reikėtų pamiršti.

Tinklo skydelis

Pirmoji vieta, kurią jums gali tekti aplankyti, kad patikrintumėte savo svetainės našumą, yra Tinklas skydelis. Šis skydas įrašys jūsų svetainės HTTP užklausą, kai jis bus įkeltas. Toliau pateikiamame paveikslėlyje parodyta tinklalapio, įkeliančio 42 prašymas ir užima 4,36 sekundės pakrauti.

Tada galite rūšiuoti HTTP užklausą pagal jų tipą, pvz., HTML, CSS ir vaizdus.

Yslow!

Be to, galite įdiegti YSlow, „Firebug“ išplėtimas iš Yahoo !. Po to, kai jis bus įjungtas, rasite papildomą skydelį, aiškiai pavadintą „Yslow“!.

Panašus į Tinklas skydelis, Yslow! įrašys tinklalapio pasirodymus, kai jis bus įkeltas, bet tada jis taip pat pasakys, kodėl tinklalapis yra lėtas ir ką mes galime padaryti, kad ją išspręstume. Šiame pavyzdyje mes atliekame testą į tinklalapį ir jis įvertinamas 86 bendras našumas, kuri laikoma OK.

Puslapio greitis

Taip pat galite įdiegti „Page Speed“ iš „Google“. Panašus į Yslow!, ji tikrina svetainės greitį, tačiau bandymo rezultatas gali būti šiek tiek kitoks. Šis pavyzdys rodo, kad tas pats tinklalapis pagal puslapių greitį pelnė 82.

Žiniatinklio kūrimo įrankiai

Žiniatinklio kūrėjų įrankiai yra žinoma žiniatinklio kūrėjams ir šioje įrankių juostoje yra daugybė funkcijų. Tačiau šis žemiau yra vienas iš mano mėgstamiausių.

Vaizdo tikrinimas

Kartais gali tekti gauti vaizdo informaciją iš tinklalapio. Paprastai matau, kad žmonės tai daro suklupdami per naršyklę arba dešiniuoju pelės klavišu spustelėdami vaizdą ir pasirinkdami Peržiūrėti vaizdo informaciją, kaip ir taip:

Tačiau toks būdas nėra pakankamai veiksmingas, kai turime gauti informaciją iš daugelio vaizdų. Tokiu atveju galime pasinaudoti Vaizdai funkciją iš priedo. Ši funkcija lengvai pasiekiama įrankių juostoje esančiame meniu „Vaizdas“.

Šis pavyzdys rodo, kaip vienu metu rodome vaizdo matmenį ir vaizdo failo dydį:

„Firefox“ integruoti įrankiai

Naujausiose versijose „Firefox“ nepaprastai pagerino savo integruotas žiniatinklio kūrėjų funkcijas, kai kurios jų yra:

Native Inspect Element

Tai gimtoji Tikrinti elementą iš „Firefox“ gali atrodyti panašus “Patikrinkite elementą „Firebug“”, tačiau ji iš tikrųjų veikia skirtingai.

Šį kartą aš negaliu eiti per šią funkciją toliau, nes ji iš esmės yra identiška „Firebug HTML“ ir „CSS“ skydams, nors ir su skirtingu išdėstymu ir dizainu. Tačiau yra vienas išskirtinis bruožas, kurį verta išbandyti 3D vaizdas.

Naudojimas 3D vaizdas galite išsamiai peržiūrėti tinklalapio struktūrą. Norėdami suaktyvinti šį vaizdą, mygtuką rasite apatiniame dešiniajame “„Firefox Native Inspect Element“”. Taip taip 3D vaizdas atrodo kaip.

Nepanaudoju taip dažnai, kaip ir kitos funkcijos, bet tai gana naujoviška „Mozilla“ funkcija, kurią pripažįstu, ir tikrai labai naudinga tam tikrose situacijose.

„Web Design View“

Nuo didėjančio populiarumo „Responsive Web Design“, „Firefox“ pradėjo naršyklę „Responsive Bookmarklet“. Šis įrankis leis mums išbandyti savo atsakingą svetainę skirtingose ​​peržiūros srityse, nesikeičiant naršyklės lango dydžiu.

Šis vaizdas pasiekiamas šiame meniu: Įrankiai> Žiniatinklio kūrėjas> „Web Design View“. Ir tai atrodo kaip vaizdas.

Stiliaus redaktorius

Galiausiai, jei dirbate su CSS dažnai, jūs greičiausiai įsiminsite šią funkciją. Nuo 11 metų versijos „Firefox“ pridėjo Stiliaus redaktorius į savo gimtojo kūrėjo įrankius.

Ši funkcija yra tokia kieta kaip „Web Design View“, ji leidžia jums redaguoti CSS, iškart matyti poveikį naršyklėje ir išsaugoti pakeitimus, kurie tiesiogiai veikia CSS šaltinio failą.

Stilių redaktorius pasiekiamas iš sekančio meniu: Įrankiai> Žiniatinklio kūrėjas> Stiliaus redaktorius.

Galutinė mintis

Yra daug funkcijų, supakuotų į šiuos „Firefox“ priedus, ir čia aptartos funkcijos - tai tik keletas funkcijų, kurias dažnai naudojasi interneto kūrimo metu. Nepaisant to, gali būti ir kitų patarimų, kurie gali būti naudingi norint padidinti „Firefox“ žiniatinklio kūrimo našumą.

Kokias funkcijas naudojate dažnai? Galite pasidalinti savo mintimis žemiau esančiame komentarų laukelyje.