Firefox Utvecklarutgåva 6 Coolaste Verktyg att prova

Firefox utvecklarutgåva är den enda webbläsaren idag som är gjord speciellt för utvecklare. Utvecklarverktygen i standardutgåvan visas först i utvecklarens utgåva och det finns verktyg i utvecklarutgåva som inte kommer och kommer inte att bli tillgängliga i standardutgåvan. Idag ska vi titta på några av de verktyg som för tillfället finns bara i utvecklarutgåvan.

Om du är någon som aldrig har använt eller som inte är särskilt bekant med utvecklingsverktygen, även i standardutgåvan, kolla först den här coola DevTools Challenger av Mozilla. Här kan du träna med några av de verktyg som nämns nedan i Firefox-utvecklarutgåva webbläsaren. Exemplen är roliga och enkla att följa, instruktionerna är raka och om du inte kan komma ikapp följer du bara videohandledningen istället.

1. Animation inspector tool

CSS-animationer blir allt vanligare, och CSS-animeringsverktygen som tillhandahålls av Firefox-utvecklarutgåvan gör det enkelt att följa och inspektera alla steg i animationen som skapats. Du kan pausa, spela och vända om någon animering; Du kan också se att det händer ram för ram via skrubbning.

För att komma åt verktyget öppnar du Inspektör verktyget genom att högerklicka på animeringselementet och välja "inspektera element", sedan på höger sida av dev tool-fönstret, klicka på "Animationer".

2. Animeringstidsfunktionsredigerare

Animeringstiden kan redigeras i dev-verktyget, du klickar helt enkelt på ikonen bredvid funktionen i regler del av Inspektör verktyg och en popup som visar att funktionskurvorna öppnas. Du kan dra och ändra detta för att justera animeringstiden. När du har gjort förändringar i kurvorna ändras din animationshastighet i enlighet därmed.

Om du inte redan är bekant med den kubiska Bezier animationsfunktionen rekommenderar jag det här inlägget för att lära mig mer om det.

3. Färgplockare för CSS-egenskaper

Det finns redan en färgplockare tillgänglig i standardutgåvan av Firefox (läs mer om den i det här inlägget), som väljer en färg från sidan och kopierar den till urklippet. Den färgplockare jag nämner nu är dock specifika för egenskapernas CSS färgvärden.

Förutom varje CSS färgvärde i regler del av Inspektör verktyg, det finns en ikon som öppnar ett färghjul dyker upp när det klickas. Du kan välja vilken färg du vill ha från hjulet.

Om du redan har en färg du vill ha och en som råkar vara på sidan, klicka helt enkelt på eyedropper-verktyget längst ner i popup-fönstret för att öppna färgväljaren, dra sedan väljaren till den färg du vill ha och klicka på den . CSS-färgvärdet ändras till det för vald färg.

4. Mätverktyg

Med det här verktyget kan du se markörens XY-position och längd, bredd och diagonalmått i pixlar av en vald del. För att använda verktyget måste du först aktivera det i utvecklaren Verktygslåda Alternativ, genom att kryssa i kryssrutan "Measure a portion of the page" under "Available Toolbox Buttons".

När en gång är aktiverad visas en linjalikon högst upp i dev-verktygsfönstret, klickar på ikonen och flyttar markören över sidan. Du ser XY positionerna nära markören. För att mäta bredden, höjden och diagonalen klickar du bara och dra för att välja den del du vill mäta.

5. CSS-filterredigerare

Om du hade använt CSS-filter till ett element på sidan ser du en ikon bredvid den i regler del av Inspektör verktyg som öppnar en CSS-filterredigerare vid klick.

För att ta bort ett filter klickar du på ×-märket i den högra änden av filternamnet. För att lägga till ett filter, klicka på filterrutan längst ner och välj den du vill lägga till och klicka på + skylt. Du kan också omorganisera filtren i valfri ordning genom att dra varje objekt.

6. Minneverktyg

Du kan ta reda på vad som tar upp minnet på din webbsida, med hjälp av det här verktyget. Detta hjälper dig att vidta åtgärder för att sänka minnesanvändningen och förbättra sidhastigheten följaktligen.

För att använda verktyget måste du aktivera det först från Verktygslåda Alternativ genom att markera kryssrutan heter "Memory" under "Default Firefox Developer Tools". När du väl har markerat ser du "Memory" -delen längst upp i dev tool-fönstret direkt efter "Performance". Välj det.

För att använda verktyget, klicka på "Ta ögonblicksbild" eller kameraknappen. Du får se en lista med objekt, som objekt och skript som tar upp minne .