Nya utvecklingsverktyg i Firefox 10 och 11
Firefox 10, som kommer ut den 31 januari (samma dag Firefox 11 blir ett officiellt beta-utgåva), slutar slutligen webbläsarens växande samling utvecklarverktyg med Page and Style Inspectors.
På vissa sätt liknar dessa verktyg Firebug, men de är också unika Mozilla-ey.
I stället för att försöka reproducera Firebug eller verktygen WebKit-utvecklare, har Mozilla bara inkluderat de viktigaste funktionerna, istället fokuserat på att göra upplevelsen elegant.
Fungerar det nya tillvägagångssättet, eller kommer designersna att skrika tillbaka till Firebug? Låt oss ta en titt.
Du kan dra upp sidinspektören genom att högerklicka på en webbsida och välja "Inspektera." (Firebug har nyligen ändrat sitt sammanhangs menyalternativ för att läsa "Inspektera i Firebug" så det kommer att samordna fredligt med de inbyggda dev-verktygen.) Längst ner på skärmen visas en lila stapel med en lista över det valda elementets föräldrar och barn.
Du kan klicka på föräldrar eller barn för att välja dem, och du kan högerklicka på ett element för att se sina syskon. Det finns också knappar märkta "Inspektera", "HTML" och "Stil." Om Firebugs hav av flikar och knappar körde upp dig på väggen kommer denna layout att vara en gudstjänst. Om du bara vill se DOM måste du klicka på "HTML" först och driva dig upp på väggen.
Gräver i
Genom att klicka på HTML-knappen visas en panel som visar hierarkin för HTML-taggar som utgör din sida. I den här vyn kan du expandera och kollapsa taggar och redigera deras attribut. Genom att klicka på "Inspektera" -knappen kan du sväva över element för att inspektera dem, och i så fall markerar Firefox elementet du inspekterar och mörker resten av sidan.
Genom att klicka på "Style" -knappen visas Style Inspector, som visar CSS-reglerna som gäller för det valda elementet. I Style Inspector kan du växla från "Rules" till en "Properties" sektion som ger dig de beräknade CSS-egenskaperna för det valda elementet, tillsammans med länkar till Mozillas dokumentation för varje egendom.
Style Inspector sitter till höger om sidan, medan sidinspektören och HTML-panelen sitter längst ner på skärmen. Du kan välja att visa båda rutorna, bara en av dem, eller varken.
Det täcker i grund och botten hela det som Sid- och stilinspektörerna gör. Webbkonsolen och JavaScript-scratchpad, som introducerades i tidigare versioner av Firefox, är separata verktyg. Det finns ingen nätverksaktivitetsmonitor. Det finns ingen användaromvandlare, ingen "redigera som HTML-funktion", inga prestanda-testverktyg, inget sätt att injicera nya taggar på en sida, inget sätt att aktivera ett elements svängtillstånd. Det finns inte ens en "layout" -panel för visning av dimensioner, vadderingar och marginaler för ditt element.
Trots alla dessa begränsningar, fortsätter jag att komma tillbaka till sidan och stil inspektörer. Jag kommer tillbaka för det snygga gränssnittet, de eftertänksamt placerade rutorna och den skraj lila kromen. Jag kommer tillbaka eftersom de är ett nöje att använda, och för att de möter mina behov mesteparten av tiden.
Inspektörernas enkla användargränssnitt betyder också att de är användbara även när jag har gjort fönstret litet för att testa lyhörda mönster. När de inte uppfyller mina behov öppnar jag bara Firebug eller Web Developer Toolbar. (Jag skulle göra det mycket mindre om de inbyggda dev-verktygen hade motsvarigheter till Firebugs Layout- och Net-paneler.)
Mozillas utvecklingsverktyg behöver inte matcha funktionsuppsättningen av sina konkurrenters verktyg, eftersom de specialiserade egenskaperna hos dessa verktyg redan finns som Firefox-tillägg. Det är det som gör Firefox dev-verktygen unika.
Dessa webbläsare går upp till 11
Förutom HTML och Style Inspector är några innovativa funktioner slated för senare utgåvor av Firefox. Firefox 11: s utvecklingsverktyg låter dig se din webbsida som tredimensionella staplar av taggar. Varje gång du boar en tagg blir den stacken av taggar högre. Den här funktionen är faktiskt förvånansvärt användbar - du kan se om ett element ligger inuti fel förälder och att se dessa taggar höger upp kommer att bota nya utvecklare av div-itis rätt snabbt.
Också i Firefox 11 är en stilredigerare. Med det här verktyget kan du skapa nya stylesheets, precis som alla bra textredigerare skulle göra. Huvudskillnaden är att dina ändringar tillämpas på webbsidor så fort du slutar skriva.
Tidigare har denna typ av live CSS redigering varit domänen för utvecklingsmiljöer som Espresso , så det är fantastiskt att se den här funktionen direkt in i webbläsaren. Fler funktioner, inklusive "verktyg för att hjälpa till med applikationsprestandeproblem", är planerad för senare i år.
Även i Firefox 11 jämförs emellertid de inbyggda dev-verktygen med Firebug (eller med WebKit dev-verktygen) lite som att jämföra iOS med Android. Den förstnämnda har ett rent, intuitivt användargränssnitt och några innovativa idéer, men det är kortfattat med strömanvändare.
Den senare har alla funktioner som du kan tänka på, och du kan konfigurera blåsorna om det, men det är inte lika elegant som Cupertinos wunderkind. Till skillnad från iOS och Android är det enkelt att använda båda verktygen samtidigt om du vill. Mozilla fortsätter att bidra till Firebug och har klargjort att Firebug är här för lång sikt.
Vilket verktyg är rätt för dig? Det beror på vilka funktioner du behöver, vilka funktioner du kan leva utan och hur du känner för att jaga förlängningar för att fylla i luckorna i ditt valfria verktyg. Oavsett vad du tycker om de nya utvecklingsverktygen är det här ett område där du inte kan anklaga Firefox för att komma till WebKit.
Är du upphetsad över de nya dev-verktygen i Firefox 10? Vad är dina go-to dev-verktyg? Låt oss veta i kommentarerna!