Nye udviklerværktøjer i Firefox 10 og 11
Firefox 10, der udløber den 31. januar (samme dag Firefox 11 bliver en officiel Beta-version), slutter endelig browserens voksende samling af udviklerværktøjer med Page and Style Inspectors.
På nogle måder ligner disse værktøjer Firebug, men de er også unikt Mozilla-ey.
I stedet for at forsøge at reproducere Firebug eller WebKit-udviklerværktøjerne, har Mozilla kun inkluderet de mest essentielle funktioner og fokuserer i stedet på at gøre oplevelsen elegant.
Fungerer den nye tilgang, eller vil designere løbe skrigende tilbage til Firebug? Lad os se.
Du kan trække Side Inspektøren op ved at højreklikke på en webside og vælge "Inspicere." (Firebug har for nylig ændret sit kontekstmenupunkt til at læse "Inspicere i Firebug", så det vil sameksistere fredeligt med de indbyggede dev-værktøjer.) Nederst på skærmen vises en lilla bjælke med en liste over det valgte elements forældre og børn.
Du kan klikke på forældre eller børn for at vælge dem, og du kan højreklikke på et element for at se sine søskende. Der er også knapper mærket "Inspicere", "HTML" og "Style." Hvis Firebugs hav af faner og knapper kørte dig op ad væggen, vil dette layout være en udgave. Hvis du bare vil se DOM, skal du først klikke på "HTML", så du kan køre dig op ad muren.
Graver ind
Når du klikker på HTML-knappen, vises et panel, der viser hierarkiet af HTML-tags, der udgør din side. I denne visning kan du udvide og collapse tags og redigere deres attributter. Ved at klikke på knappen "Inspicer" kan du svæve over elementer for at inspicere dem, og som du gør det, fremhæver Firefox det element, du inspicerer og mørker resten af siden.
Ved at klikke på "Style" -knappen vises stilinspektøren, der viser de CSS-regler, der gælder for det valgte element. I Style Inspector kan du skifte fra "Regler" til en "Egenskaber" sektion, der giver dig de beregnede CSS egenskaber for det valgte element sammen med links til Mozillas dokumentation for hver ejendom.
Stilinspektøren sidder til højre for siden, mens sideinspektøren og HTML-panelet sidder nederst på skærmen. Du kan vælge at vise begge ruder, kun en af dem, eller hverken.
Det dækker i grunden helheden af, hvad side- og stilinspektørerne gør. Webkonsollen og JavaScript-scratchpad, der blev introduceret i tidligere versioner af Firefox, er separate værktøjer. Der er ingen netværksaktivitetsovervågning. Der er ingen bruger agent switcher, ingen "redigere som HTML-funktion," ingen præstationsprøvningsværktøjer, ingen måde at indsprøjte nye tags på en side, ingen måde at aktivere et elements hover tilstand. Der er ikke engang et "layout" panel til visning af dimensioner, polstring og marginer af dit element.
På trods af alle disse begrænsninger holder jeg tilbage til Side- og stilinspektørerne. Jeg kommer tilbage for den klare interface, de tankevækkende ruter og den funky lilla krom. Jeg kommer tilbage, fordi de er en fornøjelse at bruge, og fordi de opfylder mine behov for det meste.
Inspektørernes enkle brugergrænseflade betyder også, at de er nyttige, selv når jeg har lavet vinduet lille til at teste lydhøre design. Når de ikke opfylder mine behov, åbner jeg bare Firebug eller Web Developer Toolbar. (Jeg ville gøre dette meget mindre, hvis de indbyggede dev-værktøjer havde ækvivalenter til Firebug's Layout og Net paneler.)
Mozillas udviklingsværktøjer behøver ikke at matche funktionssættet af deres konkurrenters værktøjer, fordi de specialiserede funktioner i disse værktøjer allerede findes som Firefox-udvidelser. Det er det, der gør Firefox dev-værktøjerne unikke.
Disse browsere går op til 11
Udover HTML og Style Inspector er nogle innovative funktioner slated til senere udgivelser af Firefox. Firefox 11's udviklerværktøjer giver dig mulighed for at se din webside som tredimensionale stakke af tags. Hver gang du næser et tag, bliver den stak af tags højere. Denne funktion er faktisk overraskende hjælpsom - du kan se et overblik om, hvorvidt et element er inde i den forkerte forælder, og hvis du ser disse tags, skal du hente nye udviklere af div-itis lige hurtigt.
Også udfaldet i Firefox 11 er en stil editor. Dette værktøj giver dig mulighed for at oprette nye stylesheets, ligesom enhver god tekstredigerer ville. Den væsentligste forskel er, at dine ændringer anvendes til at leve websider, så snart du er færdig med at skrive.
Tidligere har denne slags live CSS redigering været domænet for udviklingsmiljøer som espresso , så det er fantastisk at se denne funktion bygget direkte ind i browseren. Flere funktioner, herunder "værktøj til at hjælpe med problemer med applikationens ydeevne" er planlagt til senere i år.
Selv i Firefox 11 er sammenligning af de indbyggede dev-værktøjer med Firebug (eller med WebKit dev-værktøjerne) lidt som at sammenligne iOS med Android. Den førstnævnte har et rent, intuitivt brugergrænseflad og nogle innovative ideer, men det er kortfattet på strømbrugerfunktioner.
Sidstnævnte har alle funktioner, du kan tænke på, og du kan konfigurere blazes ud, hvis det, men det er ikke helt så elegant som Cupertino's wunderkind. I modsætning til iOS og Android er det nemt at bruge begge værktøjer på samme tid, hvis du vil. Mozilla fortsætter med at bidrage til Firebug og har gjort det klart, at Firebug er her for det lange træk.
Hvilket værktøj passer til dig? Det afhænger af hvilke funktioner du har brug for, hvilke funktioner du kan leve uden, og hvordan du føler dig om at jage ned udvidelser for at udfylde hullerne i dit valgte værktøj. Uanset hvad du tænker på de nye udviklerværktøjer, er dette et område, hvor du ikke kan beskylde Firefox for at oprette WebKit.
Er du begejstret for de nye dev-værktøjer i Firefox 10? Hvad er dine go-to dev-værktøjer? Lad os vide i kommentarerne!