Share
Ik heb onlangs besloten terug te schakelen naar Firefox omdat ik al een aantal jaar Chrome-gebruiker ben. Toen ik Firefox voor het laatst echt had gebruikt, was het werken met dev-tools alles over de Firebug-extensie. Firefox had enkele ingebouwde tools, maar op dat moment waren ze niet zo sterk als de dev-tools van Firebug of Chrome. Bij mijn terugkeer vond ik dingen veranderd!
De eigen dev-tools van Firefox hebben een lange weg afgelegd, en ze worden nog steeds continu geüpgraded. Ze zijn nu zeker op hetzelfde niveau als alle andere dev-tools en hebben een aantal fantastische functies, waaronder enkele die je nergens anders op dit moment zult vinden.
Als het al een tijdje geleden is dat je Firefox ook voor ontwikkeling hebt gebruikt, kijk dan eens naar deze functies in Firefox Dev Tools die je misschien nog niet kent.
Notitie: een paar van de nieuwste functies hebben Firefox Nightly nodig, maar de meeste zijn nu beschikbaar in gewone Firefox.
CSS Grid begint drastisch te veranderen hoe webontwerp-lay-outs worden gemaakt en ten goede. Voor zover ik weet, is de enige inspecteur voor CSS Grid momenteel gevonden in de dev-tools van Firefox.
De netinspecteur kan onder andere:
Als je nog moet spelen met CSS Grid zul je het geweldig vinden, en het proces om ermee te werken is des te soepeler gemaakt met de grid inspector tools van Firefox.
Lees meer op hacks.mozilla.org.
Firefox dev-tools bevatten nu een diepgaande CSS-animatiespecificatie die automatisch animaties detecteert op een geselecteerd element, evenals animaties op de onderliggende elementen. Voor elk geanimeerd element toont het je een tijdlijn met een scrubber die je kunt bedienen, en kun je animaties onderbreken, versnellen of vertragen.
Met een geselecteerde animatie kunt u de eigenschappen ervan wijzigen in de stijlen tab en zie het effect van uw wijzigingen in realtime, een functie die zeer nuttig is voor het proces van het aanpassen van zaken als het versoepelen van functies.
De manier waarop animaties worden weergegeven in de dev-tools, helpt je ook bij het bepalen van de samenstelling van elke animatie, iets waar we nog dieper op ingaan in een ander artikel dat binnenkort verschijnt. Dus als je van CSS-animatie houdt, blijf dan op de hoogte!
Lees meer op developer.mozilla.org.
De ontwikkelaarstoolbar is een zeer handige manier om snel de functies in de dev-tools van Firefox te activeren en te besturen. Het is een relatief eenvoudige opdrachtregelinterface waarmee u kunt communiceren met zo ongeveer alles wat dev-gereedschappen kunnen doen. U kunt het bijvoorbeeld gebruiken om een snel screenshot te maken, om een responsieve preview van uw site in specifieke dimensies te krijgen, of om een kleur van de pagina te pakken.
Raken SHIFT + F2 om de werkbalk te openen en voer dan de opdracht in helpen om meer te weten te komen over alle opdrachten die je tot je beschikking hebt.
Lees meer op developer.mozilla.org.
Responsieve ontwerpmodus helpt u bij het simuleren van verschillende apparaten; hun afmetingen, interactiemethoden en typische verbindingssnelheid. U kunt kiezen uit een lijst met vooraf gedefinieerde dimensies, uw eigen formaatdefinities toevoegen aan de lijst of de grootte van het voorbeeld wijzigen.
Om het te activeren, klikt u op Responsieve ontwerpmodus pictogram in de dev-gereedschappen. Of voer in de werkbalk Ontwikkelaars in formaat wijzigen om deze modus te activeren, formaat wijzigen in om een specifieke maat te testen, formaat wijzigen om het weer uit te zetten, of formaat wijzigen om het uit en aan te zetten.
Lees meer op developer.mozilla.org.
Houd de dimensies van uw ontwerpen in de gaten door paginaregels te gebruiken, vergelijkbaar met degene die u in een grafisch ontwerpprogramma zou vinden.
Klik op de heersers pictogram op de bovenste balk van de dev-gereedschappen om te activeren, of voer in de werkbalk Ontwikkelaar de opdracht in heersers.
Lees meer op developer.mozilla.org.
Grijp eenvoudig elke kleur van een pagina met de pipet, die alles wat u met uw muis aanwijst, vergroot om zo het picken van kleuren gemakkelijker te maken. U kunt het formaat opgeven waarin u uw kleurcode wilt laten weergeven, of u moet het geschreven formaat gebruiken.
Activeer vanuit het menu Webontwikkelaar of voer in de werkbalk Ontwikkelaar de opdracht in pipet.
Lees meer op: developer.mozilla.org.
Firefox heeft een superhandige screenshot-tool ingebouwd; geen behoefte aan meer extensies voor schermafbeeldingen.
In de normale modus kunt u de screenshot-tool gebruiken om een drag-to-define-gebied vast te leggen, of u kunt op afzonderlijke pagina-elementen klikken om ze vast te leggen. In de modus Ontvankelijk ontwerp kunt u op een kleine knop rechtsboven in het voorbeeld klikken om een screenshot te maken van hoe uw site eruitziet op een bepaald apparaat.
Activeer de screenshot-tool van de hoofdwerkbalk in Firefox 57 (nachtelijk), rechtsboven in de dev-tools of van de Developer Toolbar met de opdracht screenshot.
Lees meer op developer.mozilla.org.
Maak een snelle meting op elk deel van de pagina door het meetgereedschap te activeren en een rechthoek naar buiten te slepen. Je krijgt de hoogte, breedte en diagonale afstand tussen de hoeken.
De dev-tools van Firefox hebben drie thema's: een licht (wit) thema, een donker (blauw) thema en een mooi knipoog naar de originele dev-tools van Firefox, een Firebug-thema.
Of je nu je desktop-setup hebt in lichte of donkere kleuren, je hebt een thema dat bij je past.
Firefox wordt met de dag beter en beter, vooral met de grote veranderingen in de aankomende versie 57. En de functieset die nu beschikbaar is in dev-hulpmiddelen van Firefox, maakt Firefox erg aantrekkelijk, niet alleen voor browsen, maar ook voor ontwikkeling.
Als je nog geen Firefox Dev Tools hebt uitgecheckt, geef ze dan een run!
Accentsconagua