Share
Jeg bestemte meg for nylig å bytte tilbake til Firefox, etter å ha vært en Chrome-bruker i en rekke år. Da jeg sist brukte Firefox for alvor, jobbet med dev-verktøy alt om Firebug-utvidelsen. Firefox hadde noen innebygde verktøy, men på den tiden var de ikke like sterke som Firebug eller Chrome's dev-verktøy. På min retur fant jeg ting har forandret seg!
Firefox egne dev-verktøy har kommet langt, og de blir stadig kontinuerlig oppgradert. De er nå definitivt på samme nivå som alle andre dev-verktøy og kan skryte av noen fantastiske funksjoner, inkludert noen som du ikke finner andre steder i dag.
Hvis det har vært en stund siden du brukte Firefox for utvikling også, sjekk ut disse funksjonene i Firefox Dev Tools du kanskje ikke vet om.
Merk: Et par av de nyeste funksjonene trenger Firefox Nightly, men de fleste er tilgjengelige nå i vanlig Firefox.
CSS Grid begynner å radikalt endre hvordan webdesignoppsett blir laget, og til det bedre. Så vidt jeg vet, er den eneste inspektøren for CSS Grid for tiden funnet i Firefox's dev-verktøy.
Grid inspektøren kan blant annet:
Hvis du fortsatt har å spille med CSS Grid, kommer du til å elske det, og prosessen med å jobbe med den blir gjort enda mer jevn med Firefox grid inspeksjonsverktøy.
Les mer på hacks.mozilla.org.
Firefox dev-verktøy inneholder nå en grundig CSS Animation inspector som automatisk vil oppdage animasjoner på et valgt element, samt animasjoner på barnets elementer. For hvert animert element, viser det en tidslinje med en skrubber du kan kontrollere, og gir deg muligheten til å pause, øke eller senke animasjoner.
Med en animasjon valgt kan du endre sine egenskaper i Styles fanen og se effekten av endringene dine i sanntid, en funksjon som er veldig nyttig for prosessen med å justere ting som lette funksjoner.
Måten animasjoner er avbildet i dev-verktøyene, hjelper deg også med å bestemme utseendet på hver animasjon, noe vi vil gå inn på i dybden i en annen artikkel som kommer opp veldig snart. Så hvis du er i CSS animasjon, hold deg innstilt!
Les mer på developer.mozilla.org.
Utvikler Verktøylinje er en veldig praktisk måte å raskt aktivere og kontrollere funksjonene som følger med Firefox's dev-verktøy. Det er et relativt enkelt kommandolinjegrensesnitt der du kan samhandle med omtrent alt dev-verktøy kan gjøre. For eksempel kan du bruke den til å ta et raskt skjermbilde, for å få en responsiv forhåndsvisning av nettstedet ditt i bestemte dimensjoner, eller å ta en farge fra siden.
Truffet SHIFT + F2 for å åpne verktøylinjen, og skriv deretter inn kommandoen hjelp å lære om alle kommandoene du har til din disposisjon.
Les mer på developer.mozilla.org.
Responsive Design Mode hjelper deg å simulere forskjellige enheter; deres dimensjoner, interaksjonsmetoder og typisk tilkoblingshastighet. Du kan velge fra en liste over forhåndsdefinerte dimensjoner, legge til dine egne størrelsesdefinisjoner i listen, eller endre størrelsen på forhåndsvisningen.
For å aktivere det, klikk på Responsive Design Mode ikonet i dev-verktøyene. Eller, på verktøylinjen for utvikler, skriv inn endre størrelsen på for å aktivere denne modusen, endre størrelsen på for å teste en bestemt størrelse, endre størrelsen på å slå den av igjen, eller endre størrelsen på bytte å bytte den av og på.
Les mer på developer.mozilla.org.
Hold øye med dimensjonene til designene dine ved hjelp av sidelinjer, som ligner på dem du ville finne i et grafisk designprogram.
Klikk på linjaler ikonet på den øverste linjen i dev-verktøyene for å aktivere, eller i verktøylinjen for utvikler skriv inn kommandoen herskere.
Les mer på developer.mozilla.org.
Ta enkelt farge fra en side med eyedropper, som vil forstørre hva du svinger over med musen for å gjøre fargeplukking enklere. Du kan spesifisere formatet du vil ha fargekoden din til, eller bruk den forfatterformatet.
Aktiver fra Web Developer-menyen, eller på verktøylinjen Developer, skriv inn kommandoen pipette.
Les mer på: developer.mozilla.org.
Firefox har et super praktisk skjermbildeverktøy i bygget; Du trenger ikke flere skjermopptaksforlengelser.
I normal modus kan du bruke skjermbildeverktøyet til å fange et dra-til-definer område, eller du kan klikke på individuelle sideelementer for å fange dem. Når du er i Responsive Design-modus, kan du klikke på en liten knapp øverst til høyre i forhåndsvisningen for å fange et skjermbilde av hvordan nettstedet ditt ser på en bestemt enhet.
Aktiver skjermbildeverktøyet fra hovedverktøylinjen i Firefox 57 (nattlig), fra øverst til høyre for dev-verktøyene, eller fra Developer-verktøylinjen med kommandoen skjermbilde.
Les mer på developer.mozilla.org.
Ta en rask måling på hvilken som helst del av siden ved å aktivere måleverktøyet og dra ut et rektangel. Du får høyde, bredde og diagonal avstand mellom hjørner.
Firefox's dev-verktøy kommer med tre temaer: et lyst (hvitt) tema, mørkt (blått) tema, og i en fin nikk til de opprinnelige dev-verktøyene i Firefox, et Firebug-tema.
Enten du har stasjonære oppsett i lys eller mørk farging, har du et tema for å matche.
Firefox blir bedre og bedre om dagen, spesielt med de store endringene i den kommende versjonen 57. Og funksjonen som nå er tilgjengelig i Firefox dev-verktøy, gjør Firefox veldig tiltalende, ikke bare for å bla, men for utvikling også.
Hvis du ikke har sjekket ut Firefox Dev Tools ennå, kan du gi dem en løp!
Accentsconagua