A Web-fejlesztők számára alapvető fontosságú Firefox-eszközök keresése

A Firefox már régóta a webes fejlesztés előnyben részesített böngészője. Számos hasznos kiegészítő létezik a feladat elvégzéséhez. Ebben a bejegyzésben néhány olyan kiegészítőt fogunk megvizsgálni, amelyek véleményem szerint elengedhetetlenek a webes fejlesztéshez. Ismertetjük a kiegészítők néhány funkcióját, amelyek segíthetnek.

Először is telepítenünk kell a Firebug-ot.

Szentjánosbogár

A Firebug a webfejlesztéshez szükséges telepítendő kiegészítő. Feltételezve, hogy nem tudod, hol kaphatsz Firebugot, telepítheted itt. Valószínűleg újra kell indítania a Firefoxot, mielőtt aktiválná.

Ezután megtekintheti a Firebugot a következő módszerek egyikén: kövesse ezt a menüt Eszközök> Webfejlesztők> Firebug, Kattintson a jobb gombbal a weboldalra, és válassza ki “Ellenőrizze az elemet a Firebug segítségével”.

Alternatívaként megtalálhatja a Firebox ikont a Firefoxban, és kattintson rá, ez mutatja a firebug ablakot;

A Firebug meglehetősen megegyezik A Chrome fejlesztői eszközei. van egy panelje a HTML-struktúra és a stílusok megtekintéséhez, valamint egy konzolpanel a hibák, figyelmeztetések és naplók megtekintéséhez. De van még néhány tipp, ami remélhetőleg hasznos lehet.

A doboz méretének beállítása

A HTML elemet CSS dobozmodell alkotja, amely margó, padding és objektumméret (szélesség / magasság). Néha előfordulhat, hogy módosítanunk kell ezeket a tulajdonságokat. Ebben az esetben kiválaszthatja az egyik elemet, amelyet módosítani szeretne, majd menjen a Elrendezés panel.

Ebben a panelben egy CSS-dobozmodellt mutat be az információkkal együtt, beleértve a szélesség és magasság. Annak ellenére, hogy e két tulajdonság nem szerepel a CSS-ben, ez az eszköz eléggé okos ahhoz, hogy meghatározza az értéket. Ha módosítani kell őket, egyszerűen kattintson az értékre, és a fel vagy le nyílgombbal növelheti vagy csökkentheti az értéket.

Számított stílusok

Sok esetben valószínűleg kíváncsi, hogy miért nem alkalmaznak bizonyos stílusokat. Az egyik könnyebb és gyorsabb út, különösen akkor, ha több ezer sora van a stílusokból, az Számított stílus panel. Ez a példa azt mutatja, hogy a horgonycímke szövegének színe felülíródik .gomb osztály, míg a háttér .gomb az osztályt felülírja .button.add.

Betűtípuscsalád ellenőrzése (egyszerű mód)

Valószínűleg gyakran talál valami ilyesmit betűtípus család a CSS-ben lévő tulajdonságok különböző betűtípuscsaládokkal. Sajnos ez nem fogja megmondani, hogy melyik betűtípust használja a böngésző. Az azonosítás megkönnyítése érdekében telepíthetjük ezt a Firebug kiterjesztést FireFontFamily.

A telepítés befejezése után töltse be a weboldalt, és most már világosan láthatjuk, hogy melyik betűcsaládot használják. Esetünkben ez valójában Helvetica Neue (lásd a lövést).

Teljesítmény elemzése

Ez lehet pletyka, de a webhely minőségének meghatározásakor a webhely sebessége jelenleg a Google egyik paramétere (algoritmus); a gyorsabban betöltő webhelyet megfelelően fejlettnek és tartalmilag magasabbnak tartják. A sebesség tehát nem olyan, amit figyelmen kívül kell hagyni.

Net Panel

A webhely teljesítményének ellenőrzéséhez először meg kell látogatnia Háló panel. Ez a panel rögzíti a webhelyének HTTP-kérését a betöltéskor. Az alábbi képernyőkép egy weblapot jelenít meg, amely betölti 42 kérés és körülveszi 4,36 másodperc tölteni.

Ezután rendezheti a HTTP kérést típusuk szerint, mint a HTML, a CSS és a Képek.

YSlow!

Továbbá telepíthet YSlow, a Yahoo! Aktiválása után egy további panelt talál, amelyet kifejezetten Yslow-nak hívnak!.

Hasonló Háló panel, Yslow! rögzíti a weboldal teljesítményét, amikor betölti, de azt is elmondja, hogy miért lassú a weboldal, és mit tehetünk annak megoldásához. Ebben a példában tesztet futtatunk egy weblapra, és ez a pontszám 86 az általános teljesítmény érdekében, ami rendben van.

Oldalsebesség

Alternatív megoldásként az oldalsebességet is telepítheti a Google-ból. Hasonló YSlow!, teszteli a webhely sebességét, bár a teszt eredménye kissé eltérő lehet. Ez a példa ugyanazt a weboldalt mutatja 82 értéket szerzett az oldalsebesség szerint.

Webfejlesztő eszközök

A webes fejlesztők eszközei nyilvánvalóan webes fejlesztők számára készültek, és egy csomó funkciót tartalmaz az eszköztárban. De ez az egyik az egyik kedvencem.

Képellenőrzés

Előfordulhat, hogy előfordulhat, hogy képi információkat kell kapnia a weboldalról. Gyakran látom, hogy az emberek ezt a böngészőben vagy a jobb egérgombbal rákattintva választják ki, és kiválaszthatják Képadatok megtekintése, így tetszik:

De ez nem elég hatékony, ha sok képet kell kapnunk. Ebben az esetben ki tudjuk használni a képek funkciót a kiegészítőből. Ez a funkció könnyen elérhető az eszköztár Kép menüjéből.

Ez a példa megmutatja, hogyan jelenítjük meg egyszerre a képméretet és a képfájl méretét:

Firefox beépített eszközök

A legutóbbi verziókban a Firefox rendkívül fokozta a webes fejlesztők beépített szolgáltatásait, néhányuk pedig:

Native Inspect Element

Ez az őshonos Elem vizsgálata a Firefox-tól hasonló lehet “Vizsgálja meg az elemet a Firebugban”, de valójában különböző módon működik.

Ezúttal nem megyek tovább ezt a funkciót, mivel lényegében megegyezik a Firebug HTML és CSS panelrel, bár az elrendezés és a design különbségei vannak. De van egy megkülönböztető tulajdonság, amit érdemes kipróbálni 3D nézet.

használata 3D nézet részletesen megtekintheti a weboldal szerkezetét. A nézet aktiválásához megtalálhatja a gombot a “Firefox Native Inspect Element”. Így a 3D nézet úgy néz ki, mint a.

Nem használom ugyanolyan gyakran, mint más funkciók, de a Mozilla-tól meglehetősen innovatív jellegzetesség, hogy elismerem, és bizonyos helyzetekben nagyon hasznos..

Webdesign megtekintése

Mivel a növekvő népszerűsége a Responsive Web Design-ban van, a Firefox egy beavatkozó könyvjelzőt indított a böngészőhöz. Ez az eszköz lehetővé teszi számunkra, hogy a böngészőablak átméretezése nélkül teszteljük a különböző webhelyeket.

Ez a nézet elérhető ebben a menüben: Eszközök> Web Developer> Web Design View. És így néz ki a nézet.

Stílusszerkesztő

Végül, ha gyakran dolgozik a CSS-szel, valószínűleg beleszeret a szolgáltatásba. A 11-es verzió óta a Firefox hozzáadta Stílusszerkesztő saját fejlesztői eszközeiben.

Ez a funkció annyira hűvös, mint a Webdesign megtekintése, lehetővé teszi a CSS szerkesztését, a böngészőn megjelenő hatást, valamint a CSS-forrásfájlot közvetlenül érintő módosítások mentését.

A Stílusszerkesztő az alábbi menüből érhető el: Eszközök> Webfejlesztő> Stílusszerkesztő.

Végső gondolat

Van egy csomó olyan funkció, amely ezekben a Firefox-kiegészítőkben van csomagolva, és az itt tárgyaltak csak néhány olyan funkciót, amelyeket a webfejlesztés során gyakran használok. Ennek ellenére lehet, hogy van néhány más tipp, ami hasznos lehet a webfejlesztés hatékonyságának növeléséhez a Firefoxban.

Milyen funkciókat használ gyakran? Megoszthatja gondolatait az alábbi megjegyzések mezőben.