Firefox Developer Edition 6 Kuleste værktøjer til at prøve
Firefox udviklerudgave er den eneste browser i dag, der er lavet specielt til udviklere. Udviklerens værktøjer i standardudgaven vises først i udviklerens udgave, og der findes værktøjer i udviklerudgave, der ikke og vil ikke blive gjort tilgængelige i standardudgaven. I dag tager vi et kig på nogle af de værktøjer, der er i øjeblikket kan kun findes i udviklerudgaven.
Hvis du er en, der aldrig har brugt, eller som ikke er meget bekendt med udviklerværktøjer, selv i standardudgaven, skal du først tjekke denne cool "DevTools Challenger" af Mozilla. Her kan du øve med nogle af de værktøjer, der er nævnt nedenfor, i Firefox-udviklerudgavebrowseren. Eksemplerne er sjove og lette at følge, instruktionerne ligefrem, og hvis du ikke kan fange op, skal du bare følge videohåndbogen i stedet.
1. Animation inspector værktøj
CSS-animationer bliver mere og mere almindelige, og CSS-animationsværktøjerne, der leveres af Firefox-udviklerudgaven, gør det nemt at følge og inspicere hvert trin i den animerede animation. Du kan sætte pause, afspille og vende enhver animation; Du kan også se, at det sker ramme for ramme via skrubning.
For at få adgang til værktøjet skal du åbne Inspektør værktøj ved at højreklikke på animationselementet og vælge "inspektionselement" og derefter på højre side af dev toolværktøjet klik på "Animationer".
2. Animation timing funktion editor
Animationstimingen kan redigeres i dev-værktøjet, du klikker simpelthen på ikonet ved siden af funktionen i Regler sektion af Inspektør værktøj og en pop up, der viser, at funktionskurverne åbner op. Du kan trække og ændre dette for at justere din animationstidspunkt. Når du har lavet ændringerne i kurverne, ændres din animationshastighed tilsvarende.
Hvis du ikke allerede er bekendt med den kubiske Bezier animationsfunktion, anbefaler jeg dette indlæg for at lære mere om det.
3. Farvevælger til CSS Egenskaber
Der er allerede en farvevælger tilgængelig i standardudgaven af Firefox (læs mere om det i dette indlæg), som vælger en farve fra siden og kopierer den til udklipsholderen. Farvælgeren jeg nævner nu er dog specifikke for egenskabernes CSS farveværdier.
Udover hver CSS farveværdi i Regler sektion af Inspektør værktøj, der er et ikon, der åbner et farvehjul, når du klikker. Du kan vælge hvilken farve du vil have fra hjulet.
Hvis du allerede har en farve, du vil have, og en der tilfældigvis er på siden, skal du blot klikke på eyedropper-værktøjet i bunden af popupen for at åbne farvevælgeren, og træk derefter plukkeren til den farve du vil have, og klik på den . CSS-farveværdien ændres til den valgte farve.
4. Måleværktøj
Dette værktøj giver dig mulighed for at se markørens XY-position og højde-, bredde- og diagonalmåling i pixels af en valgt del. For at bruge værktøjet skal du først aktivere det i udvikleren Værktøjskasse indstillinger, ved at markere afkrydsningsfeltet "Mål en del af siden" under "Tilgængelige værktøjskasse knapper".
Når det er aktiveret, vises et linjalikon øverst i dev-værktøjsvinduet, klikker på ikonet og flytter markøren over siden. Du kan se XY positionerne nær markøren. For at måle bredden, højden og diagonalen skal du blot klikke og trække for at vælge den del, du vil måle.
5. CSS filter editor
Hvis du havde anvendt CSS-filter til et element på siden, vil du se et ikon ved siden af det i Regler sektion af Inspektør værktøj, der åbner en CSS filter editor efter klik.
For at fjerne et filter skal du klikke på ×-mærket i højre ende af filternavnet. For at tilføje et filter skal du klikke på filterboksen nederst og vælge den, du vil tilføje, og klikke på + skilt. Du kan også omarrangere filtre i en hvilken som helst rækkefølge ved at trække hvert element.
6. Hukommelsesværktøj
Du kan finde ud af, hvad der tager hukommelsen på din webside ved hjælp af dette værktøj. Dette hjælper dig med at tage skridt til at reducere hukommelsesforbruget og dermed forbedre sidens hastighed.
For at bruge værktøjet skal du først aktivere det fra Værktøjskasse indstillinger ved at markere afkrydsningsfeltet "Memory" under "Default Firefox Developer Tools". Når du er markeret, vil du se afsnittet "Hukommelse" øverst i dev værktøj vinduet lige efter "Performance". Vælg det.
For at bruge værktøjet skal du klikke på "Tag snapshot" eller kameraknappen. Du får vist en liste over elementer, som objekter og scripts, der optager hukommelse .
