Firefox Developer Edition 6 coolste tools om te proberen

Firefox-ontwikkelaarsexemplaar is de enige browser die vandaag speciaal voor ontwikkelaars is gemaakt. De ontwikkelaarstools in de standaardeditie verschijnen het eerst in de ontwikkelaarseditie en er zijn gereedschappen in de ontwikkelaarversie die niet beschikbaar zijn in de standaardeditie. Vandaag gaan we enkele van de tools bekijken die op dit moment beschikbaar zijn is alleen te vinden in de ontwikkelaareditie.

Als je iemand bent die nooit heeft gebruikt of die niet erg bekend is met ontwikkelaarstools, zelfs die in de standaardeditie, bekijk dan eerst deze coole "DevTools Challenger" van Mozilla. Hier kunt u oefenen met enkele van de hieronder genoemde hulpmiddelen in de Firefox-ontwikkelaareditor. De voorbeelden zijn leuk en gemakkelijk te volgen, de instructies zijn eenvoudig en als je ze niet kunt bijbenen, volg je gewoon de videozelfstudie.

1. Animatie-inspectiegereedschap

CSS-animaties worden steeds gebruikelijker, en de CSS-animatietools die door de Firefox-ontwikkelaarseditie worden geleverd, maken het gemakkelijk om elke stap van de gemaakte animatie te volgen en te inspecteren. Je kunt elke animatie pauzeren, afspelen en terugdraaien; je kunt het ook beeld voor beeld zien gebeuren via schrobben.

Om toegang te krijgen tot de tool, opent u de Inspecteur gereedschap door met de rechtermuisknop op het animerende element te klikken en "element inspecteren" te selecteren, klik dan aan de rechterkant van het dev-hulpmiddelvenster op "Animaties".

2. Animatie timing functie-editor

De animatietiming kan worden bewerkt in de dev-tool, u klikt eenvoudig op het pictogram naast de functie in de Reglement sectie van de Inspecteur tool en een pop-up die de functiecurves toont opent. U kunt dit slepen en wijzigen om uw animatietiming aan te passen. Nadat u de wijzigingen aan de curves hebt aangebracht, verandert uw animatiesnelheid dienovereenkomstig.

Als u nog niet bekend bent met de kubieke Bezier-animatiefunctie, raad ik dit bericht aan om er meer over te leren.

3. Kleurkiezer voor CSS-eigenschappen

Er is al een kleurenkiezer beschikbaar in de standaardeditie van Firefox (lees er meer over in dit bericht), die een kleur uit de pagina kiest en deze naar het klembord kopieert. De kleurenkiezer die ik noem nu echter wel specifiek voor de CSS-kleurwaarden van de eigenschappen.

Naast elke CSS-kleurwaarde in de Reglement sectie van de Inspecteur tool, er is een pictogram dat een pop-up pop opent wanneer erop wordt geklikt. U kunt vanuit het wiel selecteren welke kleur u wilt.

Als u al een gewenste kleur hebt en een die toevallig op de pagina staat, klikt u eenvoudig op het pipet onder aan de pop-up om de kleurkiezer te openen, sleept u vervolgens de kiezer naar de gewenste kleur en klikt u erop . De CSS-kleurwaarde wordt gewijzigd in die van de geselecteerde kleur.

4. Meetinstrument

Met dit hulpmiddel kunt u de XY-positie van de cursor en de hoogte, breedte en diagonale meting in pixels van een geselecteerd gedeelte bekijken. Als u de tool wilt gebruiken, moet u deze eerst inschakelen in de ontwikkelaar Toolbox-opties, door het selectievakje "Meet een deel van de pagina" aan te vinken onder "Beschikbare Toolbox-knoppen".

Eenmaal ingeschakeld, verschijnt er een liniaalpictogram boven in het dev-hulpmiddelvenster, klikt u op dat pictogram en verplaatst u de cursor over de pagina. Je ziet de XY-posities in de buurt van de cursor. Om de breedte, hoogte en diagonaal te meten, klikt en sleept u om het deel te selecteren dat u wilt meten.

5. CSS-filtereditor

Als u het CSS-filter op een element op de pagina had toegepast, ziet u een pictogram ernaast in de Reglement sectie van de Inspecteur tool, die bij het klikken een CSS-filtereditor opent.

Als u een filter wilt verwijderen, klikt u op het × -teken aan het rechteruiteinde van de filternaam. Als u een filter wilt toevoegen, klikt u op het filtervak ​​onderaan en selecteert u het filter dat u wilt toevoegen en klikt u op + teken. U kunt de filters ook in elke volgorde opnieuw rangschikken door elk item te slepen.

6. Geheugen tool

Met behulp van deze tool kunt u ontdekken wat het geheugen opneemt in uw webpagina. Dit helpt u stappen te nemen om het geheugengebruik te verminderen en bijgevolg uw paginasnelheid te verbeteren.

Om de tool te gebruiken, moet u deze eerst inschakelen vanuit de Toolbox-opties door het selectievakje "Geheugen" onder "Standaard Firefox-ontwikkelaarstools" aan te vinken. Na controle ziet u het gedeelte "Geheugen" bovenaan het dev-hulpmiddelvenster direct na "Prestatie". Selecteer dat.

Om het hulpmiddel te gebruiken, klikt u op "Snapshot maken" of op de cameraknop. U ziet een lijst met items, zoals objecten en scripts die geheugen ophalen .