Firefox Developer Edition 6 Kuleste verktøy for å prøve

Firefox utviklerutgave er den eneste nettleseren i dag som er laget spesielt for utviklere. Utviklerverktøyene i standardutgaven vises først i utviklerens utgave, og det finnes verktøy i utviklerutgave som ikke er og vil ikke bli gjort tilgjengelig i standardutgaven. I dag skal vi se på noen av verktøyene som for øyeblikket kan bare finnes i utviklerutgaven.

Hvis du er noen som aldri har brukt eller som ikke er veldig kjent med utviklerverktøy, selv de som er i standardutgaven, må du sjekke ut denne kule "DevTools Challenger" av Mozilla først. Her kan du øve med noen av verktøyene som er nevnt nedenfor i Firefox-utviklerutgaven. Eksemplene er morsomme og enkle å følge, instruksjonene er enkle og hvis du ikke kan ta opp, følg bare videoopplæringen i stedet.

1. Animasjonsinspeksjonsverktøy

CSS-animasjoner blir stadig mer vanlige, og CSS-animasjonsverktøyene fra Firefox-utviklerutgaven gjør det enkelt å følge og inspisere hvert trinn i animasjonen som er opprettet. Du kan pause, spille og reversere animasjon; Du kan også se det skje rammebilde via skrubbing.

For å få tilgang til verktøyet, åpne Inspektør verktøy ved å høyreklikke på animasjonselementet og velge "inspiser element", og deretter på høyre side av dev verktøyvinduet, klikk "Animasjoner".

2. Animering timing funksjon editor

Animasjonstimingen er redigerbar i dev-verktøyet, du klikker bare på ikonet ved siden av funksjonen i regler delen av Inspektør verktøy og en pop up som viser funksjonskurver åpner seg. Du kan dra og endre dette for å justere animasjonstimingen. Når du har gjort endringene i kurvene, vil animasjonshastigheten endres tilsvarende.

Hvis du ikke allerede er kjent med den kubiske Bezier animasjonsfunksjonen, anbefaler jeg dette innlegget for å lære mer om det.

3. Color Picker for CSS Egenskaper

Det er allerede en fargeplukker tilgjengelig i standardutgaven av Firefox (les mer om det i dette innlegget), som velger en farge fra siden og kopierer den til utklippstavlen. Fargevalgeren jeg nevner nå er imidlertid spesifikk for egenskapene CSS-fargene for egenskapene.

Ved siden av hver CSS-fargeverdi i regler delen av Inspektør verktøyet, det er et ikon som åpner et fargeskjul når du klikker. Du kan velge hvilken farge du vil ha fra hjulet.

Hvis du allerede har en farge du vil ha, og en som kommer til å være på siden, klikker du bare på eyedropper-verktøyet nederst i popup-vinduet for å åpne fargeplukeren, og dra deretter plukkeren til fargen du vil ha, og klikk på den . CSS-fargeværdien vil bli endret til den valgte farge.

4. Måleverktøy

Dette verktøyet lar deg se XY-posisjonen til markøren, og høyde, bredde og diagonal måling i piksler av en valgt del. For å bruke verktøyet må du først aktivere det i utvikleren Verktøyboksalternativer, ved å merke av i boksen "Mål en del av siden" under "Tilgjengelige verktøykasse knapper".

Når det er aktivert, vises et linjalikon øverst i dev-verktøyvinduet, klikker på ikonet og beveger markøren over siden. Du ser XY-stillingene i nærheten av markøren. For å måle bredden, høyden og diagonalen klikker du bare og drar for å velge delen du vil måle.

5. CSS filter editor

Hvis du hadde brukt CSS-filter til et element på siden, ser du et ikon ved siden av det i regler delen av Inspektør verktøy, som åpner en CSS filterredigerer ved klikk.

For å fjerne et filter, klikk på × -merket i høyre ende av filternavnet. For å legge til et filter, klikk på filterboksen nederst og velg den du vil legge til og klikk på + skilt. Du kan også omorganisere filtrene i en hvilken som helst rekkefølge ved å dra hvert element.

6. Minneverktøy

Du kan finne ut hva som tar opp minnet på websiden din, ved hjelp av dette verktøyet. Dette hjelper deg med å ta skritt for å redusere minnebruk og dermed forbedre sidens hastighet.

For å bruke verktøyet må du aktivere det først fra Verktøyboksalternativer ved å merke av i boksen "Memory" under "Default Firefox Developer Tools". Når du er merket, ser du "Minne" -delen øverst i dev-verktøyvinduet rett etter "Performance". Velg det.

For å bruke verktøyet, klikk på "Ta stillbilde" eller kameraknappen. Du får se en liste over elementer, som objekter og skript som tar opp minne .