Najlepšie nástroje na vyskúšanie

Vývojár pre vývojárov prehliadača Firefox je dnes jediným prehliadačom, ktorý je navrhnutý špeciálne pre vývojárov. Nástroje pre vývojárov v štandardnej verzii sa objavia ako prvé v edícii vývojára a existujú nástroje vývojového vydania, ktoré nie sú a nebudú k dispozícii v štandardnom vydaní. Dnes sa pozrieme na niektoré z nástrojov, ktoré sú momentálne možno nájsť iba v edícii vývojára.

Ak ste niekto, kto nikdy nepoužil alebo nie je veľmi dobre oboznámený s vývojárskymi nástrojmi, dokonca aj s tými, ktorí sú v štandardnom vydaní, najprv si prečítajte tento cool "DevTools Challenger". Tu si môžete vyskúšať niektoré z nástrojov uvedených nižšie v prehliadači pre vývojárov Firefoxu. Príklady sú zábavné a ľahko sledovať, pokyny jednoduché a ak nemôžete dohnať, jednoducho postupujte podľa video tutoriálu.

1. Nástroj inšpektor animácie

CSS animácie sa stávajú čoraz bežnejšími a animačné nástroje CSS, ktoré poskytuje vývojárske vydanie Firefoxu, uľahčujú sledovanie a kontrolu každého kroku vytvorenej animácie. Môžete pozastaviť, prehrať a zvrátiť akúkoľvek animáciu; môžete tiež vidieť, že sa to deje s rámom pomocou čistenia.

Prístup k nástroju otvorte inšpektor nástroj kliknutím pravým tlačidlom myši na prvok animácie a výberom položky "Inspect element" a potom na pravej strane okna nástroja dev kliknite na "Animácie".

2. Editor funkcií časovania animácie

Časovanie animácie je možné editovať v nástroji dev, stačí kliknúť na ikonu vedľa funkcie v pravidlá časť inšpektor nástroj a otvorí sa okno s funkčnými krivkami. Môžete ťahať a upravovať, aby ste upravili časovanie animácie. Po vykonaní zmien v krivkách sa rýchlosť vašej animácie zodpovedajúcim spôsobom zmení.

Ak už nie ste oboznámení s kubickou Bezierovou animačnou funkciou, odporúčam vám tento príspevok dozvedieť sa viac o nej.

3. Výber farieb pre vlastnosti CSS

V štandardnom vydaní prehliadača Firefox je už k dispozícii nástroj na výber farieb (prečítajte si viac o tom v tomto príspevku), ktorý vyberá farbu zo stránky a skopíruje ju do schránky. Výber farieb, ktorý teraz spomínam, je špecifické pre hodnoty farieb CSS pre vlastnosti.

Vedľa každej hodnoty farby CSS v pravidlá časť inšpektor nástroj, je tu ikona, ktorá pri kliknutí otvorí farebné koleso. Môžete si zvoliť požadovanú farbu od kolesa.

Ak už máte požadovanú farbu a tá, ktorá sa stane na stránke, jednoducho kliknite na nástroj na kapátko v spodnej časti okna na otvorenie výberu farieb a potom presuňte výberový nástroj na požadovanú farbu a kliknite na ňu , Hodnota farby CSS sa zmení na hodnotu zvolenej farby.

4. Merací nástroj

Tento nástroj umožňuje zobraziť polohu XY kurzor a výšku, šírku a uhlopriečku v pixeloch vybranej časti. Ak chcete tento nástroj použiť, musíte ho najprv povoliť Možnosti panelu nástrojov, začiarknutím políčka "Zmerajte časť stránky" v časti "Dostupné tlačidlá nástroja".

Po zapnutí sa v hornej časti okna nástroja dev zobrazí ikona pravítka, kliknite na túto ikonu a presuňte kurzor na stránku. Umiestnenia XY sa zobrazia v blízkosti kurzora. Ak chcete merať šírku, výšku a uhlopriečku, stačí kliknúť a ťahať a vybrať časť, ktorú chcete merať.

5. Editor filtra CSS

Ak ste použili filter CSS na prvok na stránke, zobrazí sa v ňom ikona pravidlá časť inšpektor nástroj, ktorý po kliknutí otvorí editor filtra CSS.

Ak chcete odstrániť filter, kliknite na značku × na pravom konci názvu filtra. Ak chcete pridať filter, kliknite na políčko filtra v dolnej časti a vyberte ten, ktorý chcete pridať, a kliknite na tlačidlo + podpísať. Môžete tiež usporiadať filtre v ľubovoľnom poradí pretiahnutím každej položky.

6. Pamäťový nástroj

Vďaka tomuto nástroju môžete zistiť, čo načítava pamäť vo vašej webovej stránke. To vám pomôže prijať kroky na zníženie spotreby pamäte a následne na zvýšenie rýchlosti stránky.

Ak chcete nástroj použiť, musíte ho najprv povoliť Možnosti panelu nástrojov začiarknutím políčka "Pamäť" v časti "Predvolené nástroje pre vývojárov programu Firefox". Po začiarknutí sa v hornej časti okna nástroja Dev zobrazí sekcia "Memory" hneď za "Výkon". Zvoľte to.

Ak chcete tento nástroj použiť, kliknite na tlačidlo "Take snapshot" alebo tlačidlo fotoaparátu. Zobrazí sa zoznam položiek, ako sú objekty a skripty, ktoré zaberajú pamäť .