Bruke Firefox Developer Edition for webutvikling

Hva du skal skape

Firefox Developer Edition ble utgitt av Mozilla under tirsdag jubileum feiring av Firefox i fjor. Nylig har 64-biters bygg fra Firefox Developer Edition blitt gjort tilgjengelig for Windows, Linux og Mac OS X. Firefox Developer Edition gir enkel tilgjengelighet for et bredt utvalg av utviklerverktøy som bidrar til å gjøre debugging enkelt og hjelp i raskere og mer profesjonelle utvikling. Du kan laste ned den nyeste versjonen av Firefox Developer Edition herfra. La oss se på noen av de flotte funksjonene i Firefox Developer Edition.

WebIDE

Med WebIDE kan du opprette, redigere, teste eller feilsøke webapplikasjoner ved å kjøre dem på Firefox OS-simulatoren. Hvis du oppretter en ny webapp, oppretter den også en grunnleggende app kjele eller en mer komplett kjele plate for deg sammen med en riktig katalog struktur. WebIDE lar deg også koble Firefox Devtools til mange andre nettlesere som Safari (iOS), Firefox (Android) og Chrome (Android).

Responsive Design View

Responsive Design View i Firefox kan påberopes ved å trykke Ctrl + Shift + M. Du kan sjekke responsen til webapplikasjonen din ved hjelp av dette verktøyet. Den tilbyr en rekke alternativer, for eksempel å angi størrelsen på enheten du vil etterligne, rotere skjermen (skifte fra stående til liggende modus), simulere berøringshendelser og ta skjermbilde av nettsiden i responsiv modus.

Eyedropper Tool

Eyedropper Tool er et virkelig fantastisk verktøy som hjelper deg å kjenne heksadesimale verdien av en hvilken som helst farge i en nettside (akkurat som eyedropper-verktøyet i Photoshop). Dette hjelper til med å finne fargen på et hvilket som helst element eller bilde som må bla gjennom koden via Element Inspector. Hvis du klikker på fargekopiene, er det verdien til utklippstavlen!

Nettleserinspektør

Vi har alle jobbet med Element Inspector, nå hva i helvete er Browser Inspector? Vel, Browser Inspector brukes til feilsøking av Firefox-nettleseren selv. Hvis du vil endre fargen på nettadresselinjen eller for eksempel endre kurven til kategoriene med ikke-vedvarende resultater, kan du gjøre det gjennom nettleserinspektøren. Selv om det samme resultatet kan oppnås gjennom Scratchpad, er Browser Inspector flott hvis du ikke er en Firefox-utvikler eller hvis du bare vil teste ut endringene dine!

3D-visning

Nå er dette, jeg føler, den mest fantastiske funksjonen i Firefox Developer Tools. Du kan se på 3D-gjengivelsen av et hvilket som helst nettsted, hvor hver forhøyningsblokk representerer et element, i samsvar med deres nesting i nettstedskoden. Dette hjelper deg å vite hvilke elementer som er nestet i hvilket element. Du kan få tilgang til 3D-visning ved å trykke Ctrl + Shift + C og deretter velge boksformet ikon på høyre side av det nylig åpnede panelet.

Notatblokk

Du kan åpne Scratchpad ved å trykke Shift + F4. Scratchpad kan brukes til å kjøre klynger av javascript kode og redigere, kjøre og undersøke resultatene. Måten den avviger fra nettleserkonsollen, er at nettleserkonsollen er utviklet for å tolke en enkelt linje med kode om gangen, men med Scratchpad kan du arbeide med større stykker kode som utfører det på ulike måter, avhengig av hvordan du vil bruke den produksjon.

Konklusjon

Firefox Developer Edition gir et bredt utvalg av verktøy for å lage, feilsøking, ytelsesovervåking, feilsøking av nettleseren og utvidelse av DevTools selv. Forklare alle verktøyene ligger utenfor rammen av denne artikkelen. Du kan imidlertid se på den komplette listen over verktøy her. Vi håper at introduksjonen til de ovennevnte verktøyene hjelper deg med dine daglige webutviklingsoppgaver.