10 Hasznos Firefox-fejlesztői eszközök, amelyeket tudnia kell
A "fejlesztő böngészője" a Firefoxnak számos nagyszerű eszköze van, amelyek megkönnyítik munkánkat. A szerszámgyűjteményében további információkat talál a Firefox Fejlesztőeszközök webhelyén, és megpróbálhatja a Developer Edition böngészőjét is, amelynek több funkciója és eszköze van a tesztelés alatt.
Erre a hozzászólásra felsoroltam 10 praktikus eszköz érdemes lehet a fejlesztői eszközök gyűjteményéből. Azt is bemutattam, hogy ezek az eszközök miként tehetők a GIF-ekkel együtt, és hogyan érhetők el a gyors hivatkozások.
1. Tekintse meg a vízszintes és függőleges vonalzókat
A Firefox rendelkezik egy vonalzó eszközzel mind vízszintes, mind függőleges vonalakat jelenít meg pixelegységekkel az oldalon. Az eszköz hasznos az elemek elrendezéséhez az oldalon.
Ha a menükön keresztül szeretné elérni a vonalzókat, menjen a következőhöz: ☰> Fejlesztő > Fejlesztő eszköztár (parancsikon: Shift + F2). Miután az eszköztár megjelenik az oldal alján, írja be a parancsot uralkodók és nyomja meg a gombot Belép.
Ahhoz, hogy ez megjelenjen a fejlesztői eszközök ablakában, ugorjon a "Eszköztár beállításai" menüpontra. Az "Elérhető eszközkészlet gombok" részben jelölje be a "Kapcsolja be az oldal vonalzatait"jelölőnégyzet.
2. Vegyük a képernyőképeket CSS szelektorokkal
Bár a Firefox eszköztár lehetővé teszi, hogy a teljes oldalt vagy a látható részeket ábrázolja, véleményem szerint a CSS-választó módszer hasznosabb a rögzítéshez az egyes elemek képernyőképei valamint a az egér-lebegőn látható elemek csak (mint a menük).
A képernyőn megjelenő képek megtekintéséhez menjen a ☰> gombra Fejlesztő > Fejlesztő eszköztár (ShortcutShift + F2). Miután az eszköztár megjelenik az oldal alján, írja be a parancsot screenshot --selector any_unique_css_selector és nyomja meg a gombot belép.
Ahhoz, hogy ez megjelenjen a fejlesztői eszközök ablakában: kattintson az "Eszköztár beállításai" pontra és az "Elérhető eszközkészlet gombok" szakaszra, jelölje be a következőt:Teljes oldalképet készítsen " négyzetet.
3. Válasszon színeket a weboldalakról
A Firefox rendelkezik egy beépített színválasztó eszközzel az "Eyedropper" nevével. Az "Eyedropper" eszköz eléréséhez menjen a menu> pontra Fejlesztő > Szemcseppentő.
Ahhoz, hogy ez megjelenjen a fejlesztői eszközök ablakában: kattintson az "Eszköztár beállításai" és az "Elérhető eszközkészlet gombok" szakasz ellenőrzésére.Fogjon egy színt az oldalról"jelölőnégyzet.
4. Nézze meg az oldalelrendezést 3D-ben
A weboldalak megtekintése 3D-ben segít az elrendezési problémáknál. A különböző rétegelt elemeket sokkal jobban láthatja 3D nézetben. Ha szeretné megtekinteni a weblapot 3D-ben, kattintson a "3D nézet" eszköz gombra.
Ahhoz, hogy ez megjelenjen a fejlesztői eszközök ablakában, kattintson az "Eszköztár beállításai" pontra, és a "Rendelkezésre álló eszköztár gombok" részben ellenőrizze a "3D nézet"jelölőnégyzet.
5. A böngészőstílus megtekintése
A böngészőstílusok két típusból állnak: az alapértelmezett stílus, amelyet a böngésző minden elemhez hozzárendel, és a böngészőspecifikus stílusokat (a böngésző előtaggal rendelkező). Ha megnézzük a böngészőstílusokat, amiket képesek lenni diagnosztizálja a stíluslap bármely felülbírálási problémáját és a meglévő böngésző-specifikus stílusok ismeretében is .
A "Böngészőstílusok" átmenő menü eléréséhez lépjen a ☰> gombra Fejlesztő > Ellenőr. Ezután kattintson a jobb oldali "Számított" fülre, és jelölje be a "Böngészőstílusok" jelölőnégyzetet.
Megnyithatja a "Ellenőr"fül a Ctrl + Shift + C parancsikonon keresztül, majd a" Böngészőstílusok "elérése.
6. Tiltsa le a JavaScript-et az aktuális munkamenethez
A legjobb gyakorlat és a képernyőolvasó kompatibilitása érdekében mindig ajánlott kódolni bármilyen webhelyet úgy, hogy a javascript-fogyatékos környezetben ne akadályozzák annak működését. Az ilyen környezetek teszteléséhez tiltsa le az adott munkamenethez tartozó JavaScript-t.
Az aktuális szekció JavaScript letiltásához kattintson az "Eszköztár beállításai" pontra, majd a "Speciális beállítások" részben ellenőrizze a "A JavaScript letiltása* "jelölőnégyzet.
7. A CSS stílus elrejtése az oldalról
Csakúgy, mint a JavaScript, a hozzáférhetőségi aggályok miatt a legjobb, ha a weboldalakat oly módon tervezzük meg, hogy az oldalaknak még stílus nélkül is olvashatóknak kell lenniük. Ha meg szeretné tekinteni, hogy az oldal milyen stílusban néz ki, letilthatja azokat a fejlesztői eszközökben.
Bármely CSS-stílus (inline, belső vagy külső) eltávolítása a weboldalon, csak kattintson a felsorolt stíluslapok szemjelére a "Stílusszerkesztő" lapon. Kattintson újra, hogy visszatérjen az eredeti nézethez.
A "Stílusszerkesztő" menü eléréséhez menjen a ☰> gombra Fejlesztő > Stílusszerkesztő (parancsikon: Shift + F7.
8. A HTML-tartalomra adott válasz előnézete egy kérésre
A Firefox fejlesztői eszközeinek lehetősége van a HTML tartalomtípus válaszainak előnézete. Ez segíti a fejlesztőt, hogy megtekinthesse a 302 átirányítást, és ellenőrizze, hogy a válaszban bármilyen érzékeny információt nyújtottak-e be.
Az "Előnézet" menü eléréséhez menjen a ☰> gombra Fejlesztő > Hálózat (gyorsbillentyű: Ctrl + Shift + Q. Ezután nyissa meg a kívánt weblapot, vagy töltse be újra az aktuális oldalt, kattintson a kívánt kérés (HTML válasz) a kérések listájából és kattintson a "Előnézet"lap a jobb oldalon.
9. Előnézet weboldalt különböző képernyőméretekben
A webhely tesztelésére a válaszreakcióhoz használja a "Responsive Design View" -et, amelyhez ☰> érhető el Fejlesztő > Érzékeny megjelenítés vagy a gyorsbillentyűvel: Ctrl + Shift + M.
A "Responsive Design Mode" eszközgomb megjelenítéséhez kattintson a "Toolbox Options" (Eszköztár opciók) elemre, és az "Available Toolbox Buttons" (Rendelkezésre álló eszközkészlet gombok) részben jelölje be a "Responsive Design Mode" jelölést..
10. A JavaScript futtatása oldalakon
A gyors JavaScript-végrehajtások bármely weboldalon egyszerűen a Firefox "Scratchpad" eszközének használatával érhetők el. A "Scratchpad" elérése a menüben megy; ☰> Fejlesztő > Scratchpad vagy használja a Shift + F4 billentyűparancsot.
Ahhoz, hogy a "Scratchpad" eszközgomb megjelenjen a fejlesztői eszközök ablakában a gyors használathoz: kattintson "Eszköztár-beállítások"és a"Elérhető eszköztár gombok"szakasz ellenőrizze a" Scratchpad "-t négyzetet.
