Firefox Developer Edition 6 Legkönnyebb eszközök a megpróbáláshoz
A Firefox fejlesztői kiadása az egyetlen olyan böngésző, amely ma a fejlesztők számára készült. A fejlesztőeszközök a standard kiadásban először jelennek meg a fejlesztői kiadásban, és vannak olyan eszközök a fejlesztői kiadásban, amelyek nem és nem lesznek elérhetők a standard kiadásban. Ma megnézzük néhány pillanatnyi eszközt csak a fejlesztői kiadásban találhatók.
Ha valaki, aki még soha nem használta, vagy aki nem ismeri a fejlesztői eszközöket, még a standard kiadásban is, nézze meg először ezt a hűvös "DevTools Challenger" -et a Mozilla-tól. Itt a Firefox fejlesztői kiadás böngészőjében az alább felsorolt eszközök közül néhányat gyakorolhat. A példák szórakoztatóak és könnyen követhetők, az utasítások egyszerűek, és ha nem tudod felzárkózni, csak kövesse a videó bemutatót.
1. Animációs ellenőrző eszköz
A CSS animációk egyre gyakoribbá válnak, és a Firefox fejlesztői kiadás által biztosított CSS animációs eszközök megkönnyítik a létrehozott animáció minden lépésének követését és ellenőrzését. Megállíthatja, lejátszhatja és megfordíthatja az animációt; azt is megnézheti, hogy a képkeret keretén keresztül történik a súrolással.
Az eszköz eléréséhez nyissa meg a Ellenőr a jobb egérgombbal kattintva az animáló elemre, és kiválasztva az "ellenőrző elemet", majd a dev eszközablak jobb oldalán kattintson az "Animációk" gombra..
2. Animációs időzítés funkció szerkesztő
Az animációs időzítés szerkeszthető a dev eszközben, egyszerűen kattintson a ikon mellett a funkció mellett szabályok szakasz Ellenőr Megnyílik a funkciógörbéket mutató eszköz és egy felugró ablak. Ezt az animációs időzítés beállításához húzhatja és módosíthatja. Miután elvégezte a görbék módosítását, az animációs sebessége ennek megfelelően változik.
Ha még nem ismeri a Cubic Bezier animációs funkciót, ajánlom ezt a bejegyzést, hogy többet tudjon meg róla.
3. Színválasztó a CSS tulajdonságokhoz
Már létezik egy színválasztó a Firefox szabványos kiadásában (olvassa el többet erről az üzenetben), amely színt választ az oldalról, és átmásolja a vágólapra. A színválasztó most már említésre méltó specifikus a tulajdonságok CSS színértékeihez.
Minden CSS színérték mellett a szabályok szakasz Ellenőr eszköz, van egy ikon, amely megnyit egy színkereket, amikor rákattint. Kiválaszthatja, melyik színt szeretné a kerékről.
Ha már rendelkezik egy kívánt színnel, és az, amelyik az oldalon található, egyszerűen kattintson a szemöldök eszközre a felugró ablak alján, hogy megnyissa a színválasztót, majd húzza a választót a kívánt színre, majd kattintson rá . A CSS színérték a kiválasztott színre változik.
4. Mérőeszköz
Ez az eszköz lehetővé teszi a kurzor XY pozíciójának, valamint a kiválasztott rész magasságának, szélességének és átlós mérésének a kijelzését. Az eszköz használatához először engedélyeznie kell azt a fejlesztőben Eszköztár-beállítások, jelölje be a "Mérje meg az oldal egy részét" jelölőnégyzetet az "Elérhető eszközkészlet gombok" alatt..
Az engedélyezés után egy vonalzó ikon jelenik meg a dev eszközablak tetején, kattintson az ikonra, és mozgassa a kurzort az oldal fölé. Látni fogja az XY pozíciókat a kurzor közelében. A szélesség, a magasság és az átló méréséhez kattintson és húzza meg a mérni kívánt rész kiválasztását.
5. CSS szűrőszerkesztő
Ha a CSS-szűrőt az elem egyik elemére alkalmazta, akkor a ikon mellett egy ikon jelenik meg szabályok szakasz Ellenőr eszköz, amely megnyit egy CSS szűrőszerkesztőt kattintás után.
Szűrő eltávolításához kattintson a szűrő nevének jobb végén lévő × jelre. Szűrő hozzáadásához kattintson az alsó szűrőmezőre, és válassza ki azt, amelyet hozzá szeretne adni, majd kattintson a gombra + jel. Az egyes elemek húzásával át is rendezheti a szűrőket bármilyen sorrendbe.
6. Memória eszköz
Ezen eszköz segítségével megtudhatja, hogy mi veszi fel a memóriát a weboldalán. Ez segít a memóriahasználat csökkentésére és az oldalsebesség javítására.
Az eszköz használatához először engedélyeznie kell azt Eszköztár-beállítások a "Memória" jelölőnégyzet bejelölésével az "Alapértelmezett Firefox-fejlesztői eszközök" alatt. Ellenőrzés után a "Eszköz" ablak tetején látható "Memória" szakasz jelenik meg közvetlenül a "Teljesítmény" után. Válassza ezt.
Az eszköz használatához kattintson a "Pillanatfelvétel" vagy a kamera gombjára. Látni fogjuk a listát azokról a tárgyakról, mint amilyenek a memóriafelvétel .
