Nye utviklerverktøy i Firefox 10 og 11
Firefox 10, utløper 31. januar (samme dag Firefox 11 blir en offisiell Beta-utgivelse), runder endelig ut nettleserens voksende samling av utviklerverktøy med side- og stilinspektører.
På noen måter er disse verktøyene likt Firebug, men de er også unikt Mozilla-ey.
I stedet for å prøve å reprodusere Firebug eller WebKit-utviklerverktøyene, har Mozilla bare inkludert de mest essensielle funksjonene, og fokuserer i stedet på å gjøre opplevelsen elegant.
Fungerer den nye tilnærmingen, eller vil designere løpe skrikende tilbake til Firebug? La oss ta en titt.
Du kan trekke opp Sideinspektøren ved å høyreklikke en nettside og velge "Inspiser." (Firebug har nylig endret kontekstmenyelementet for å lese "Inspekter i Firebug", så det vil sameksistere fredelig med de innebygde dev-verktøyene.) Nederst på skjermen vises en lilla bar med en liste over det valgte elementets foreldre og barn.
Du kan klikke på foreldre eller barn for å velge dem, og du kan høyreklikke på et element for å se sine søsken. Det er også knapper merket "Inspisere", "HTML" og "Stil." Hvis Firebugs hav av faner og knapper kjørte deg oppover veggen, vil dette layoutet bli en godsend. Hvis du bare vil se DOM, må du klikke på "HTML" først, og du kan kjøre deg opp på veggen.
Hiver innpå
Ved å klikke på HTML-knappen får du opp et panel som viser hierarkiet til HTML-koder som utgjør siden din. I denne visningen kan du utvide og kollapse koder og redigere deres attributter. Ved å klikke på "Inspiser" -knappen kan du sveve over elementer for å inspisere dem, og når du gjør det, fremhever Firefox elementet du inspiserer og mørker resten av siden.
Når du klikker på "Style" -knappen, kommer Style Inspector til å vise CSS-reglene som gjelder for det valgte elementet. I Style Inspector kan du bytte fra "Rules" til en "Properties" -del som gir deg de beregnede CSS-egenskapene for det valgte elementet, sammen med koblinger til Mozillas dokumentasjon for hver eiendom.
Style Inspector sitter til høyre for siden, mens Page inspektøren og HTML-panelet sitter nederst på skjermen. Du kan velge å vise begge rutene, bare en av dem, eller ingen av dem.
Det dekker i utgangspunktet helheten av hva Side- og stilinspektørene gjør. Webkonsollen og JavaScript-scratchpad, introdusert i tidligere versjoner av Firefox, er separate verktøy. Det er ingen nettverksaktivitetsmonitor. Det er ingen bruker agent switcher, ingen "redigere som HTML-funksjon," ingen ytelse testing verktøy, ingen måte å injisere nye koder i en side, ingen måte å aktivere et element hover state. Det er ikke engang et "layout" -panel for visning av dimensjonene, polstringen og margene av elementet ditt.
Til tross for alle disse begrensningene, fortsetter jeg å komme tilbake til Page og Style Inspector. Jeg kommer tilbake for det ryddige grensesnittet, de tankefullt plasserte rutene og den skinnende lilla krom. Jeg kommer tilbake fordi de er gledelig å bruke, og fordi de møter mine behov mesteparten av tiden.
Inspektørens enkle brukergrensesnitt betyr også at de er nyttige selv når jeg har gjort vinduet lite for å teste responsive design. Når de ikke oppfyller mine behov, åpner jeg bare Firebug eller Web Developer Toolbar. (Jeg ville gjøre dette mye mindre hvis de innebygde dev-verktøyene hadde ekvivalenter til Firebugs Layout og Net-paneler.)
Mozillas utviklingsverktøy trenger ikke å matche funksjonssettet til konkurrentens verktøy, fordi de spesialiserte funksjonene til disse verktøyene allerede eksisterer som Firefox-utvidelser. Det er det som gjør Firefox dev-verktøyene unike.
Disse nettleserne går opp til 11
I tillegg til HTML og Style Inspector, er noen innovative funksjoner slated for senere utgivelser av Firefox. Utviklerverktøyene i Firefox 11 lar deg vise websiden din som tredimensjonale stabler med tagger. Hver gang du nester en tag, blir den stakken med tagger høyere. Denne funksjonen er faktisk overraskende nyttig - du kan se på et øyeblikk om et element er inne i feil forelder, og å se disse kodene hoper opp, vil kurere nye utviklere av div-ITIS rett fort.
Også utfallet i Firefox 11 er en stil editor. Dette verktøyet lar deg opprette nye stilark, som en god tekstredigerer ville. Hovedforskjellen er at endringene dine brukes til å leve websider så snart du er ferdig med å skrive.
Tidligere har denne typen live CSS redigering vært domenet til utviklingsmiljøer som espresso , så det er kjempebra å se denne funksjonen bygget rett inn i nettleseren. Flere funksjoner, inkludert "verktøy for å bistå med applikasjonsytelsesproblemer", er planlagt for senere i år.
Selv i Firefox 11, sammenligner de innebygde dev-verktøyene med Firebug (eller med WebKit dev-verktøyene) likevel å sammenligne iOS med Android. Den tidligere har et rent, intuitivt brukergrensesnitt og noen innovative ideer, men det er kort på strømbrukeregenskaper.
Sistnevnte har alle funksjonene du kan tenke på, og du kan konfigurere blazes ut hvis det, men det er ikke helt så elegant som Cupertino's wunderkind. I motsetning til iOS og Android, er det enkelt å bruke begge verktøyene samtidig, hvis du vil. Mozilla fortsetter å bidra til Firebug og har gjort det klart at Firebug er her for lang tid.
Hvilket verktøy passer for deg? Det avhenger av hvilke funksjoner du trenger, hvilke funksjoner du kan leve uten, og hvordan du føler om å jakte på utvidelser for å fylle inn hullene i ditt valgfrie verktøy. Uansett hva du tenker på de nye utviklerverktøyene, er dette et område hvor du ikke kan anklage Firefox for å oppnå WebKit.
Er du begeistret for de nye dev-verktøyene i Firefox 10? Hva er dine go-to dev-verktøy? Gi oss beskjed i kommentarene!