Pogled u bitne Firefox alate za web programere
Firefox je dugo bio preferirani preglednik za web razvoj. Postoji niz korisnih dodataka za obavljanje posla. U ovom postu, mi ćemo gledati u nekoliko dodataka koje mislim da je bitno da se instalira ako ćete napraviti web razvoj. Također ćemo otkriti neke od značajki tih dodataka koje vam mogu pomoći.
Prije svega, trebamo instalirati Firebug.
Palikuća
Firebug je dodatak za web-razvoj koji morate instalirati. Pod pretpostavkom da ne znate gdje možete dobiti Firebug, možete ga instalirati ovdje. Vjerojatno morate ponovno pokrenuti Firefox prije nego ga aktivirate.
Nakon toga, Firebug možete pregledati na jedan od sljedećih načina: slijedite ovaj izbornik Alati> Web programeri> Firebug, desnom tipkom miša kliknite na web stranicu i odaberite “Pregledajte Element s Firebugom”.
Alternativno, možete pronaći Firebug ikonu u Firefoxu i kliknuti na nju, prikazat će se prozor firebug;
Firebug je posve identičan Alati za razvojne programere za Chrome. ima ploču za pregled HTML strukture i stilova, a također i konzolnu ploču kako bi se vidjele pogreške, upozorenja i zapisnici. Ali, imam još nekoliko savjeta za koje se nadam da će vam biti korisno.
Podešavanje veličine kutije
HTML element se sastoji od CSS box modela koji se sastoji od margine, padding i dimenzije objekta (width / height). Ponekad je potrebno izmijeniti ta svojstva. U tom slučaju možete odabrati jedan od elemenata koje želite promijeniti, a zatim otići na raspored ploča.
U ovom panelu ćete naći ilustraciju CSS okvira zajedno s njegovim informacijama, uključujući i širina i visina. Iako ta dva svojstva nisu navedena u CSS-u, ovaj je alat dovoljno pametan da odredi vrijednost. Ako ih trebate modificirati, možete jednostavno kliknuti na vrijednost i koristiti tipku sa strelicom gore ili dolje za povećanje ili smanjenje vrijednosti.
Računski stilovi
U mnogim situacijama vjerojatno se pitate zašto se neki stilovi ne primjenjuju. Jedan od lakših i bržih načina, posebice kada imate tisuće linija stilova, jest pregledati ga iz Računski stil ploča. Ovaj primjer pokazuje da je boja teksta sidrenih oznaka prebrisana .dugme klasa, dok pozadina .dugme klasu prepisuje .button.add.
Pregledanje obitelji fontova (jednostavan način)
Vjerojatno često nađete nešto takvo u font-family svojstva u CSS-u s različitim obiteljima fontova. Nažalost, to nam neće točno reći koji font uzima preglednik. Kako bismo olakšali identifikaciju, možemo instalirati ovaj Firebug nastavak FireFontFamily.
Nakon što je instalacija gotova, učitajte svoju web-stranicu i sada možemo jasno vidjeti koja se obitelj fontova primjenjuje. U našem slučaju to je zapravo Helvetica Neue (vidi snimak).
Analiza izvedbe
To može biti uobraženost, ali brzina web-lokacije sada je jedan od Googleovih parametara (algoritma) u odlučivanju o kvaliteti web-lokacije; web-mjesto koje se brže učitava smatra se dobro razvijenim i rangirano više u smislu sadržaja. Dakle, brzina nije nešto što treba previdjeti.
Mrežna ploča
Prvo mjesto koje ćete možda trebati posjetiti kako biste provjerili izvedbu vaše web-lokacije je Neto ploča. Ova će ploča zabilježiti HTTP zahtjev vaše web-lokacije kada se učita. Ova snimka zaslona u nastavku prikazuje web-stranicu koja se učitava 42 zahtjev i uzima okolo 4,36 sekundi Učitati.
Potom možete sortirati HTTP zahtjev prema vrsti kao što su HTML, CSS i Slike.
YSlow!
Nadalje, također možete instalirati YSlow, proširenje za Firebug iz Yahoo !. Nakon što se aktivira, pronaći ćete dodatni panel koji se eksplicitno zove Yslow!.
Slično Neto panel, Yslow! će snimiti performanse web-stranica kada se učita, ali će vam također reći zašto je web-stranica spora i što možemo učiniti kako bismo je riješili. U ovom primjeru pokrećemo test na web-stranici i on se boduje 86 za ukupnu izvedbu, što se smatra OK.
Brzina stranice
Isto tako možete instalirati Page Speed iz Googlea. Slično YSlow!, testira brzinu rada web-mjesta, iako rezultat testa može biti malo drugačiji. Ovaj primjer pokazuje da je ista web stranica postigao je 82 prema brzini stranice.
Alati za web razvojne programere
Web Developers Tools očito je za web programere i ima hrpu značajki pakiranih u ovoj alatnoj traci. Ali ovaj ispod je jedan od mojih omiljenih.
Pregled slike
Ponekad je potrebno dobiti informacije o slici s web-stranice. Obično vidim da ljudi to rade tako da posrću preko preglednika ili desnim klikom na sliku i odaberu Prikaz informacija o slici, ovako:
No, ovaj način nije sasvim učinkovit kada trebamo dobiti informacije iz mnogih slika. U tom slučaju možemo iskoristiti slike značajka dodatka. Ta je značajka lako dostupna iz izbornika Slika na alatnoj traci.
Ovaj primjer pokazuje kako istovremeno prikazujemo dimenziju slike i veličinu datoteke slike:
Firefox ugrađeni alati
U novijim verzijama Firefox je uvelike poboljšao ugrađene značajke za web-programere, a neke od njih su:
Native Inspect Element
Ovaj izvorni Pregledajte element iz Firefoxa može izgledati slično “Pregledajte element u Firebugu”, ali zapravo djeluje na različite načine.
Ovaj put više neću prolaziti kroz ovu značajku, jer je u osnovi identična Firebug HTML-u i CSS panelu, iako s razlikom u izgledu i dizajnu. No, postoji jedna osobina koja vrijedi isprobati 3D prikaz.
koristeći 3D prikaz strukturu web-stranice možete pogledati u dubini. Da biste aktivirali ovaj prikaz, možete pronaći gumb u donjem desnom kutu “Firefox Native pregledajte element”. Evo kako 3D prikaz izgleda kao.
Ne koristim ga toliko često kao druge značajke, ali to je sasvim inovativna značajka iz Mozille koju priznajem, a svakako je vrlo korisna u određenim situacijama.
Prikaz web-dizajna
Od sve veće popularnosti u Responsive Web Designu, Firefox je pokrenuo pregledni bookmarklet. Ovaj alat omogućit će nam da testiramo našu web-lokaciju u različitim okvirima za prikaz bez promjene veličine prozora preglednika.
Ovaj je prikaz dostupan iz ovog izbornika: Alati> Web Developer> Prikaz web-dizajna. I kako ovo izgleda izgleda.
Uređivač stila
Konačno, ako često radite s CSS-om, vjerojatno ćete se zaljubiti u tu značajku. Od verzije 11, Firefox je dodao Uređivač stila u izvornim razvojnim alatima.
Ova značajka je jednako cool kao i Prikaz web-dizajna, omogućuje vam uređivanje CSS-a, trenutačni učinak na preglednik i spremanje promjena koje izravno utječu na CSS-izvornu datoteku.
Uređivač stila dostupan je iz sljedećeg izbornika: Alati> Web Developer> Uređivač stila.
Konačna misao
Tu je hrpa značajki pakirane u ovim Firefox dodacima i onima o kojima se ovdje raspravlja samo su neke od značajki koje često koristim tijekom izrade weba. Ipak, vi svibanj imati neke druge savjete koji bi mogli biti korisni za povećanje produktivnosti web razvoj u Firefox.
Koje značajke često koristite? Svoje misli možete podijeliti u okviru za komentare u nastavku.
